Dom节点操作总结

Dom

一：Dom的概念
　　Dom的简介：全称为 document object model 文档对象模型，是操作文档的一整套方法 - 文档 - html，document时一个对象，是dom的顶级对象，属于window的一个对象，并且可以说是最出色的。

　　Dom节点：组成整个html流程的所有步骤，相当于是所有标签，文本，属性，注释构成了整个网页 - 将构成网页的每一个部分内容都看作是一个节点，整个网页是由很多节点组成的。节点主要是：(标签，文本，属性，注释) / 元素节点(标签) ，因为在实际的操作过程中，元素节点是比较重要的，所以在获取或者创建节点的时候，一般都是在操作元素节点，像注释节点，文本节点相对来说就用的比较少。

　　Dom树：简单来说，Dom树就是由许多的节点构成的，在以根节点HTML的基础上，其余节点为子节点，组成一个树的数据结构就是为Dom树。

　　dom树的表示。

二：Dom节点操作

　　那么我们为什么要获取节点呢？节点能做什么？

　　　　1、找到元素

　　　　2、设置元素属性值

　　　　3、设置元素的样式

　　　　4、创建/删除元素

　　　　5、事件的触发

　　　　　　等等等等。。。。

　　　　所以节点的作用是非常给力的。涉及的知识较多，我就简单总结下节点的所有的基本操作。

　　1：获取元素的方法

 　　　　　console.log(document)  // document

         console.log(document.documentElement) // 获取html标签

         console.log(document.body)  // 获取body标签

         console.log(document.head)  // 获取head 标签

         console.log(document.title) // 获取title 标签

         // 获取有 id 的标签的dom方法时，必须使用 document 调用 getElementById

         console.log(document.getElementById('id'))  // 通过id

         //getElementsByTagName这个方法除了可以使用document以外，还可以使用元素调用

         console.log(document.getElementsByTagName('div'))     // 通过标签名

         console.log(document.getElementsByClassName('.box'))  // 通过class名获取

         console.log(document.getElementsByName('name'))       // 通过name名来获取

         console.log(document.querySelector('.box'))           // 通过css选择器来获取

         console.log(document.querySelectorAll('div'))         // 通过css选择器来获取 所有的标签

         // 总结 ： 通过 id  和 name 获取标签只能使用 document 调用，通过标签名,class名，css选择器都可以通过父元素来调用方法，获取子元素的标签

　　 2：节点的类型 nodeType & 节点名 nodeName & 节点值 nodeValue

　　　　要想获取节点的类型，名称，值需要先获取对应的节点。以下是我书写的html标签。

　　　　节点主要有文本节点，注释节点，元素节点

 　　<div id="ids">

         <!-- dom 是 文档对象模型 -->

         <div class="box">文本</div>

         <p>文本</p>

         <div class="box" name="1"></div>

         文本 属性

     </div>

         var ids = document.getElementById('ids')

         var nodes = ids.childNodes // 获取 ids 下的所有子节点

         console.log(nodes)  　　// nodes是ids下所有子节点的集合列表

         console.log(nodes[0].nodeType)  // 文本节点类型  3

         console.log(nodes[0].nodeName)  // 文本节点名  #text

         console.log(nodes[0].nodeValue) // 文本节点值  就是文本内容，空格也是文本节点

         console.log(nodes[1].nodeType)  // 注释节点类型  8

         console.log(nodes[1].nodeName)  // 注释节点名  #comment

         console.log(nodes[1].nodeValue) // 注释节点值  就是注释内容

         console.log(nodes[3].nodeType)  // 元素节点类型  1

         console.log(nodes[3].nodeName)  // 元素节点名  大写的标签名

         console.log(nodes[3].nodeValue) // 元素节点值  null

　　3：节点的操作

　　　　还是一样，配合我书写的 div 标签为 ID名为 ids 的来演示节点的操作方法

         var ids = document.querySelector('#ids') // 获取父元素

         console.log(ids.childNodes) // 获取 ids 下的所有子节点

         console.log(ids.children)  // 获取 ids 下的所有子元素节点

         console.log(ids.firstChild)  // 获取 ids 下的第一个子节点

         console.log(ids.firstElementChild) // 获取 ids 下的第一个子元素节点

         console.log(ids.lastChild) // 获取 ids 下的最后一个子节点

         console.log(ids.lastElementChild) // 获取 ids 下的最后一个子元素节点

         console.log(ids.nextSibling)  // 下一个兄弟节点

         console.log(ids.nextElementSibling)  //   下一个兄弟元素节点

         console.log(ids.previousSibling)  // 获取上一个兄弟节点

         console.log(ids.previousElementSibling)  // 获取上一个兄弟元素节点 // 不只是相同的标签，不同的也可以

         console.log(ids.parentNode)  // 获取父节点

         console.log(ids.parentElement)  // 获取父元素节点

　　4：节点的增删改查操作（重要）

　　节点操作 - 增

1：创建元素节点：document.createElement(字符串的标签名)

2：创建文本节点： document.createTextNode("文本") 相当于创建了一个文件节点对象，直接可以将这个文本节点对象插入在任何需要的位置

3：追加：父容器.appendChild(子元素); 将子元素插入在父容器的尾部

4：给标签添加文本：父容器.textContent = '你要添加的内容'

5：插入标签：父容器.insertBefore(要插入的元素，插入在谁的前面)

6：复制元素：元素.cloneNode(深度布尔值) 要用新的变量接收

6.1：cloneNode(深度布尔值)

1：深度布尔值==false 浅复制仅复制元素，不复制内容和子元素

2：深度布尔值==true 深复制可以将元素和元素里面的内容及子元素都复制进去

        var div = document.createElement('div')  // 创建 标签

         document.body.appendChild(div)    // 将div元素放在body标签的尾部

         // 追加：父容器.appendChild(子元素);  将子元素插入在父容器的尾部

         var span = document.createElement('span')

         div1.appendChild(span)  // 将 span 标签放在 div 标签中

         span.textContent = '你好'

         // 插入标签  在 div 中，插入一个 b 标签到 span 便签前

         var b = document.createElement('b')

         // 插入书写方式一：

         div.insertBefore(b,span)

         // 插入书写方式二：

         div.insertBefore(b,div.lastElementChild)

         // 创建文本节点：document.createTextNode("文本")

         // 放在 div 的 b 标签中

         var text = document.createTextNode('我是创建好的文本节点')

         // 将创建好的文本节点插入在 div 中 第一个元素节点前

         div.insertBefore(text,div.firstElementChild)

         console.log(div)

         // 复制元素 元素.cloneNode(深度布尔值)

         var b1 = b.cloneNode(false)   // 浅复制

         var b2 = b.cloneNode(true)    // 深复制

         console.log(b1,b2)

　　节点操作 - 删

　　 // 1: 元素.remove(); 元素自身删除

// 2: 页面标签.remove(); // 指从DOM树上删除

// 3：父容器.removeChild(子元素); 父容器删除子元素

// 4：快速清除所有子元素：元素.innerHTML = " "

        var b = document.createElement('b')

        document.body.appendChild(b)

        // 复制元素

        var b1 = b.cloneNode(false)

        var b2 = b.cloneNode(false)

        b1.remove()  // 删除 b1 元素

        var dl = document.createElement('dl')

        document.body.appendChild(dl)

        dl.appendChild(b2)

        dl.removeChild(b2)   // 删除再 dl 中 的 b2 元素

        // 注意这样是 无法删除干净  需要 b2 = null

        document.body.appendChild(b2)   // 这行代码证明 b2 没有删除干净，缓存还在

        b2 = null   // 当 b2 被赋值为 null 时 b2 就是完全删除干净，无法再调用

        // document.body.appendChild(b2)  // 在这里 b2 无法被调用 ,并且报错

　　节点操作 - 改

1：父容器.replaceChild(新的元素，要替换的元素)

         var input = document.createElement('input')  // 创建input标签

         var div = document.createElement('div')      // 创建div标签

         document.body.appendChild(div)      // 将div元素插入在body的尾部

         document.body.replaceChild(input,div)   // 替换元素

　 5：DOM元素(标签)属性的操作

DOM元素概念

任何一个DOM元素，有两种属性，一个是对象属性，一个是标签属性

1：把写在标签上的属性称为标签属性

2：任何一个DOM元素都是对象模型，都可以自主的添加设置对象的属性和值

DOM 元素属性的操作 - 增删改查

1：元素的属性 - 增 - 元素.setAttribute(属性名,属性值)

1.1：单属性的添加方式：如表单的 checked 属性，设置时：属性名('checked','checked') 或者('checked','')

注意：属性名的命名不能使用驼峰式命名，通常命名时使用-区分两个单词:toggle-target ，属性值不能出现大写，并且必须是字符串

         var div0 = document.createElement('div')

         document.body.appendChild(div0)

         div0.setAttribute('渣渣辉','一刀999')  // 给元素添加属性

         div0.setAttribute('class','999')  // 属性2

         // 2：元素的属性 - 删 - 元素.removeAttribute(属性名)

         div0.removeAttribute('渣渣辉')  // 删除属性 渣渣辉

         // 3：元素的属性 - 改 - 改其实就是增加属性的操作，当属性不存在，就是增，当属性存在，再就是再原基础上修改他

         div0.setAttribute('class','666666')

         // 4:元素的属性 - 获取（查看）属性值 - 元素.getAttribute(属性名)

         console.log(div0.getAttribute('class'))

         // 扩充知识1 ：DOM元素都是对象模型，对象属性并不会显示在标签上(如：a 标签的 href 属性，img 的 src 属性)

         // 扩1案例 ：1: img.src = '你要放入的图片地址'  2: a.href = '你要放入的图片地址' 3: div.a = 10 - 给 div 添加属性，名为 a 值为 10

         // 扩2：DOM元素都是object，所以设置属性都是按照对象属性来设置，当遇到标签属性值和对象属性值冲突时，以对象属性值为准

         // 扩2案例：

         var ck=document.querySelector("input")

         ck.setAttribute("checked","")  // input 添加属性 checked ，input设置checked时，就是为true == 选中

         ck.checked=false  // 当标签属性值和对象属性值冲突时，以对象属性值为准，此时checked 就是为 false == 不选中

　　6：元素节点样式的操作

         // 1：标签样式 - 增

         // 方法1: 通过增加属性的方法增加 行内 （注意行内）样式 元素.setAttribute(属性名,属性值)

         var div0 = document.createElement('div')

         document.body.appendChild(div0)

         div0.setAttribute("style","width:50px;height:50px;background-color:red")

         // 方法2： - 元素.style.你要添加的样式名 = '样式值'

         div0.style.margin = '5px'

         // 2：标签样式获取

         console.log(div0.style.width)  // 只能获取到 行内样式 ，无法获取到内部和外部的样式

         // 万能获取法：getComputedStyle(元素)   不管是 行内，内部，外部的样式都能获取

         console.log( getComputedStyle(div0).width)

         // 3 :获取元素的矩形边界限范围 （IE8以后才有的方法）

         // 语法：元素..getBoundingClientRect()

         // IE 兼容方法：元素.currentStyle.样式属性

         var res = div0.getBoundingClientRect()

         console.log(res)

         // 此方法也是对象模型，属性共有 八个，分别为以下属性

         /*{

             width,  // offsetWidth

             height, // offsetHeight

             left,   // 最左边到可视窗口的距离

             top,    // 最顶部到可视窗口的距离

             right,  // left+width 最右边到可视窗口的距离

             bottom, // top+height  最下面到可视窗口的距离

             x,      // left  坐标X轴

             y       // top   坐标Y轴

         }

         */

巴特西

Dom节点操作总结

最新文章

热门文章