前端基础知识

6.1DOM

DOM是js操作网页的接口

6.2doucument对象-方法-获取元素

将脚本代码放在body之后，先让dom加载

document.getElementsByTagName()        返回类似数组的对象

document.getElementsByClassName()                  [div.text, div.text]

document.getElementsById()

doucument.getQueryselector()

doucument.querySelectorAll()

6.3doucument对象-方法-创建元素

  document.createElement（）   创建元素        <div></div>

document.createTextNode()        创建文本内容        

text.appendChild（）        把文本加入标签中        <div>你好吗？</div>

document.createAttribute("id")        添加属性        id.value = "root"设置完新属性后一定要记得赋值哦

text.SetAttributeNode()        把属性加入到标签中        <div id="root">你好吗？</div>

6.4Element对象-属性

Element对象对应HTML的元素。每一个HTML元素都在DOM树上转换为一个Element节点对象 

element.id                        返回指定元素的id属性

element.classList            判断是否有这个class，有则返回true，无则返回false

if(root.classList.contains("box"))

        document.write("有");

    else

        document.write("无");

element.className                读写当前元素节点的class属性，值是字符串

                                                root.className="box box1"

element.innerHTML                读写（识别为标签【可访问网址】）

 var root = document.getElementById("root")

 var str= "<a href='https://mp.csdn.net/?spm=1011.2648.3001.10366'>前端</a>";

    root.innerHTML= str

element.innerText                   读写（识别为字符串）

6.5Element获取元素位置

    //获取视口高度（屏幕高度）

    console.log(document.documentElement.clientHeight)

    //获取页面高度

    console.log(document.body.clientHeight)