JS文档对象模型（DOM）操作元素属性样式的属性及方法

w  DOM是一个树形结构，节点类型分为元素节点和文本节点

获取HTML元素（转换为js对象）

获取单个元素的方法

• document.getElementById("id名")；
• document.querySelector("id/class/标签")

获取多个元素的方法（存储在数组中）

• document.getElementsByTagName("标签")；
• document.getElementsByClassName("class");
• document.getElementsByName("name");
• document.querySelectorAll("标签/class")

---

根据层级关系访问元素节点

• 节点.firstElementChild——返回此节点中的第一个子节点
• 节点.lastElementChild——返回此节点中的最后一个子节点
• 节点.nextElementSibling——返回此节点的下一个兄弟节点
• 节点.previousElementSibling——返回此节点的上一个兄弟节点
• 节点.childNodes——返回此节点的所有类型的子节点
• 节点.children——返回此节点的所有元素类型的子节点
• 节点.parentNode——返回此节点的父节点

        ps:document.body可表示body的js元素节点

---

根据层级关系访问文本节点（常用属性）

• 节点.firstChild——常用来访问元素下的文本节点
• 节点.lastChild——常用来访问元素下的文本节点

        ps:代码中的回车同样是文本节点

        节点.innerHTML——可以访问元素下的文本内容(返回结果不带双引号）

---

判断当前节点是什么元素类型

        节点.nodeType——返回值为 1(代表元素节点) / 3（代表文本节点）

        ps：innerHTML——返回类型为Undefined

---

用JS方式创建HTML元素并控制元素属性及样式（重点）

节点的创建

        var 对象名=document.creatElement("标签名")；

节点的追加

        父元素节点的对象名.appendChild(目标节点）；

        父元素节点的对象名.insertBefore(目标节点，参照节点）——将目标节点添加到参照节点之前

给节点内添加文本

        节点.innerHTML（常用）——获取除自身标签外的所有内容，有字符串解析功能，可以用来创建新HTML元素和添加文本内容

        节点.innerText——获取的是纯文本内容

        节点.outerHTML——获取的是包含自身标签在内的所有内容

节点的删除

        节点.remove()——无参，删除当前节点

节点属性的读写

第一种方法：       

• 读：节点.属性
• 写：节点.属性=""

第二种方法：

•  读：节点.getAttribute(“属性”)
•  写：节点.setAttribute("属性"，“属性值”)

ps：注意自定义属性用哪种方法写的就用哪种方法读 

样式的读写

行内样式：

• 读：节点.style.属性
• 写：节点.style.属性=“”

非行内样式：

• 读：getComputedStyle(节点，false)[“属性”]
• 写：节点.style.属性=“”

offset相关属性

读：(读出来的是数字)

• 节点.offsetWidth
• 节点.offsetHeight
• 节点.offsetTop
• 节点.offsetLeft

写：（写进去的是字符串）

• 节点.style.width = 500 + "px";
• 节点.style.height = 300 + "px";
• 节点.style.left = 150 + "px";
• 节点.style.top = 110 + "px";

---

点击按钮返回顶部案例

    xbut.onclick = function() {
    document.body.scrollTop = document.documentElement.scrollTop = 0｝