DOM

DOM

节点

节点:Node

元素节点 (element)

属性节点 (attribute)

文本节点 (text)

<div id='a' name='b'>这是文本节点</div>

 

 

div为标签节点、 id和name…等都是属性节点、这是文本节点是文本节点

属性节点操作的相关方法

setAttributeNode 设置属性节点

getAttributeNode 获取属性节点

removeAttributeNode 删除属性节点

方法

cloneNode 方法 (克隆所有节点)

append 添加节点

appendChild 添加节点

replaceChild 替换节点

replaceChildren 替换所有的子节点

insertBefore 插入节点

removeChild 移除子节点

 

innerHTML 及 innerText

//innerHtml 显示的html(所有)  innerText 显示的文本(所有的文本)
console.log(div.innerHTML);
console.log(div.innerText); 
div.innerHTML = "<b>hello</b>" //解析html代码的
div.innerText = "<b>hello</b>" //不会解析html代码的

 

 

document文档对象

属性

  • document.head //获取head标签

  • document.body //获取body标签

  • document.forms //获取所有的表单标签

 

HTMLCollection 与 NodeList 的区别

  • NodeList 是一个静态集合,其不受 DOM 树元素变化的影响;

  • 相当于是 DOM 树快照,节点数量和类型的快照,就是对节点

    增删,NodeList 感觉不到。但是对节点内部内容修改,是可以感觉到的,比如修改 innerHTML

  • 只有 NodeList 对象有包含属性节点和文本节点。

  • HTMLCollection 是动态绑定的,是一个的动态集合,DOM 树发生变化,HTMLCollection 也会随之变化,节点的增删是敏感的。

  • HTMLCollection 元素可以通过 nameid 或 index 索引来获取。NodeList 只能通过 index 索引来获取。

 

方法

1.获取全局内容

Element后面有s的都是返回一个伪数组(有长度和下标,但不是数组)

  • 通过id获取(document.getElementById())返回一个元素(Element类型)

  • 通过class属性名获取(document.getElementsByClassName() )(HTMLCollection)

  • 通过标签名获取(document.getElementsByTagName() )(HTMLCollection)

  • 通过属性获取(document.getElementsByName() )(NodeList)

  • 通过复合选择器获取(document.querySeletor() )返回的是第一个查到的元素(Element类型)

    (NodeList)

  • 通过复合选择器获取(document.querySeletorAll() )

    (NodeList)

  • 获取根节点(document.getRootNode())

2.创建全局的内容

  • 创建元素(document.createElement())返回一个元素

  • 创建属性结点(document.createAttribute())

  • 创建文本节点 (document.createTextNode())

//创建元素的方法
var p = document.createElement('p') //传入的是一个对应的标签名
console.log(p);
​
//创建属性的方法
var attr = document.createAttribute('password') //创建的是一个属性  默认为空值
//给属性对象赋属性值的操作
attr.value = '123456'
console.log(attr);//
​
//创建文本
var text = document.createTextNode('文本节点') //创建一个文本节点对象
console.log(text);

 

Element元素对象

<span></span>
<div>
    <a></a>
    <span></span>
</div>
<p></p>

 

 

属性

获取父元素
// 相关属性 
var div = document.getElementsByTagName('div')[0]
// 获取父元素
console.log(div.parentElement);//body

 

获取子元素
// 获取子元素
var div = document.getElementsByTagName('div')[0]
​
console.log(div.childElementCount); //2 子元素个数
console.log(div.children); //[a,span] 获取子元素 (伪数组)

 


获取兄弟元素
var div = document.getElementsByTagName('div')[0]
​
//获取前面的兄弟
console.log(div.previousElementSibling);
//得到<span></span>
​
//获取后面的兄弟
console.log(div.nextElementSibling)
//得到<p></p>

 

 

方法

  1. 获取特定的元素

     

    <div id='box'>
        <img></img>
        <img></img>
        <img></img>
    </div>
    <img></img>
    //获取 div 中的 Img
    document.getElementById('box').getElementsByTagName('img')

     

     

  2. 替换元素

    1. replaceChild (用一个新的元素来替换里面的子元素)

    2. replaceChildren (用一个元素来替换里面所有的子元素)

      var div = document.getElementById('box')
      div.replaceChildren("hello") //替换所有的子节点 用传入的节点替换里面所有的子节点
      var content = document.createElement('div')
      div.replaceChildren('span') //用content传的替换所有子元素,产生一个content传来的标签
      //replaceChild 用前面的替代后面的(一定是属于我们本身的儿子元素)
      var a = document.createElement('a')
      div.replaceChild(a,div.children[0]) //使用新的节点来替换对应的子节点 使用a这个元素来替代对应的content这个子元素

       

       

  3. 插入元素

    1. append 插入任意的子元素到对应的父元素内 插入到后面

    2. appendChild 插入一个子元素到对应的父元素内容 插入到后面

    3. insertBefore 插入一个元素到另一个子元素的前面

      var div = document.getElementById('box')
      // 插入元素 append inster
      div.append("hello",content) //追加内容到当前元素里面的最后一个元素的后面  追加多个
      // appendChild 追加子元素
      var b= document.createElement('b')
      div.appendChild(content) //追一个元素在当前元素的里面 (同一个元素只能允许加一次 里面存在是不可以添加的)
      div.appendChild(b) //追一个元素在当前元素的里面 
      //insertBefore
      var span = document.createElement('span')
      //参数1 当前需要插入的元素  参数2 对应的子元素
      div.insertBefore(span,div.children[0]) //插入到哪个子元素的前面

       

       

  4. 删除元素

    div.remove() //全部删除 包括自己
    // 清空所有的内容 
    //建议使用replaceChildren('')

     

  5. cloneNode(克隆)

     

    var div = document.getElementById('box')
    var cloneDiv = div.cloneNode() //进行元素克隆
    //默认只会克隆自己 并不会克隆里面包含对应的内容
    var div1 = div.cloneNode(true) //里面是true的情况表示深度克隆 他会考虑所有的内容包括事件
    console.log(div1);

     

  6. 获取、创建、删除属性的方法

    1. getAttribute

    2. setAttribute

    3. removeAttribute

      //获取
      //示例:element.getAttribute(name)
      box.setAttribute('username','tom')
      console.log(box.getAttribute('width'));//返回对应的值 一般都是string
      console.log(box.getAttribute('username'));//返回对应的值 一般都是string
      ​
      //创建
      //示例:element.setAttribute(name,value)
      //不仅可以操作 后续定义的属性 也可以操作本身就有的属性
      var box =   document.querySelector('div')
      box.setAttribute('width','100px')
      ​
      //删除
      //示例:element.removeAttribute(name)
      box.removeAttribute('width')