节点的操作和部分BOM

勤学苦练的小白
137 阅读5分钟

1.DOM节点

  1. DOM树： 就是html的结构树

  2. DOM节点：

    • 含义：有一些分类，包含：元素节点，文本节点，属性节点
    • 区别：获取元素的时候通过各种方法获取到的我们叫元素节点（标签节点） 我们在标签中写的文字就是文本节点 我们写在标签上的属性就是属性节点
    • 元素节点：通过getElement...等方法获取到的
    • 文本节点：通过innerText...等方法获取到的
    • 属性节点：通过getAttribute...等方法获取到的

  3. 获取子集元素节点： * 语法：节点.children // 获取到的也是一个伪数组 * 语法：节点.childNodes // 获取到节点内的所有子元素节点

  4. 获取子集第一个节点： * 语法：节点.firstChild // 获取子集的第一个节点，如果有换行那么是Text（文本节点）

  5. 获取子集的第一个元素节点 * 语法：节点.firstElementChild // 获取子集的第一个元素节点

  6. 获取子集最后一个节点： * 语法：节点.lastChild // 获取子集的最后一个节点，如果有换行那么是Text（文本节点）

  7. 获取子集的最后一个元素节点 * 语法：节点.lastElementChild // 获取子集的最后一个元素节点

  8. 获取兄弟节点（获取某一个节点的下一个节点） * 语法：节点.nextSibling // 获取本节点的下一个兄弟节点

  9. 获取某一个节点的下一个兄弟元素节点 * 语法：节点.nextElementSibling // 获取本节点的下一个兄弟元素节点

  10. 获取兄弟节点（获取某一个节点的上一个节点） * 语法：节点.previousSibling // 获取本节点的上一个兄弟节点

  11. 获取某一个节点的上一个兄弟元素节点 * 语法：节点.previousElementSibling // 获取本节点的上一个兄弟元素节点

  12. 获取某一节点的父节点 * 语法：节点.parentNode // 获取本节点的父节点

2.节点属性

  1. 获取元素的属性节点 * 语法：节点.attributes // 获取到的是一个伪数组，所以是有下标和length的，其中每一项叫做属性节点

  2. 获取节点类型（用数字表示） * 语法：节点.nodeType // 获取到的是本节点的类型，用数字表示，元素节点为1，属性节点为2，文本节点为3

  3. 获取节点名称 * 语法：节点.nodeName // 获取到的是本节点的节点名，元素节点为全部大写例如：（大写的标签名）LI,P, 属性节点：这个属性对应的属性名，文本节点：#text

  4. 获取节点的值 * 语法：节点.nodeValue // 获取到的是本节点的值，元素节点没有nodeValue所以就为：null，属性节点为：这个属性对应的属性值，文本节点为：文本对应的内容

3.操作DOM节点

  1. 创建操作节点 * 注意：创建的DOM节点（与页面没有任何关系） 语法：var 变量 = document.createElement('要创建的标签') // 此时跟页面没有任何关系 语法：var 变量 = document.createTextNode('文本节点的内容') // 创建文本节点 * 向页面加入一个DOM节点（此时跟页面产生关联） 语法：父节点.appendChild(要追加的子节点) //向元素节点末尾追加一个子节点 语法2：如果只是追加文本节点可以：父节点.innerText = '要追加的内容' * insertBefore: 向父节点的指定位置添加 父节点.insertBefore(要插入的节点，插入在哪个节点前) // 第二个参数可以传递的是null则表示追加到父元素的末尾

  2. 删除元素节点 * 语法：父节点.removeChild(传入要删除的子元素) 语法：要删除的节点.remove()

  3. 修改页面中的某个节点 * 语法：父节点.replaceChild(新节点，旧节点)

  4. 克隆节点 * 注：页面中的DOM节点只会存在一个，如果你需要这个标签多次出现只能通过克隆 * 语法：节点.cloneNode(参数) // 参数是一个布尔值默认是false，表示不可隆后代节点，若传递参数为true表示克隆后代节点，有一个返回值，返回值为克隆出来的DOM节点

4. 获取元素的非行内样式

  1. window.getComputedStyle(要查询样式的DOM节点).要查询的css属性名 * 返回值：这个css属性对应的属性值 * 注意点：这个方法能获取行内样式也能获取非行内样式 这个方法是只读的，我们能看到但是不能修改，要修改还是得用 节点.style

  2. currentStyle // ie浏览器专属

  3. 元素偏移量 * 含义：在页面上相对参考父级在页面上左边，上边的距离 * 注意点：参考谁去定位的 * 参考父级：其实就是你相对于谁去定位

  4. 获取参考父级 * 语法：节点.offsetParent

  5. offsetLeft * 语法：节点.offsetLeft // 打印值为相对于那个父元素左边的偏移量

  6. 获取元素尺寸（获取元素占地面积） * 语法：节点.offsetWidth/节点.offsetHeight * 语法：节点.clientWidth/节点.clientHeight * 区别：offset：宽/高 + padding + border ，client：宽/高 + padding // 都不包含外间距

  7. 获取浏览器尺寸 * 语法：document.documentElement.clientHeight // 没有节点. ， 获取浏览器视口高度，不包含滚动条高度这是它与window.innerHeight的区别 * 语法：document.documentElement.clientWidth // 没有节点. ， 获取浏览器视口宽度，不包含滚动条宽度这是它与window.innerWidth的区别

avatar
文章
阅读
粉丝