JSDOM操作

div、p是元素节点，content是文本节点，title是属性节点

1|0创建节点

1|1createElement

创建新元素，接受一个参数，即要创建元素的标签名

  let div = document.createElement('div')

1|2createTextNode

创建一个文本节点

let text = document.createTextNode("content");

1|3createAttribute

创建属性节点，可以是自定义属性

let dataAttr = document.createAttribute('action');
consle.log(dataAttr);

 

2|0获取节点

getElementById()

getElementsByClassName()

getElementsByName()

getElementsByTagName()

getElementsByTagNameNS()

2|1querySelector

传入任何有效的css 选择器，即可选中单个 DOM元素（首个）：

   document.querySelector('div')
    document.querySelector('.class')
    document.querySelector('#id')
    document.querySelector('[name="username"]')
    document.querySelector('div+p>span')

2|2querySelectorAll

返回一个包含节点子树内所有与之相匹配的Element节点列表，如果没有相匹配的，则返回一个空节点列表

   let lis=document.querySelectorAll('li')

3|0更新节点

3|1innerHTML

不但可以修改一个DOM节点的文本内容，还可以直接通过HTML片段修改DOM节点内部的子树

  let div = document.createElement('div')
    div.innerHTML = '123'

3|2innerText、textContent

innerText不返回隐藏元素的文本，而textContent返回所有文本

3|3style

DOM节点的style属性对应所有的CSS，可以直接获取或设置

  let div = document.createElement('div')
    div.style.color='red'

4|0添加

4|1innerHTML

   let div = document.createElement('div')
  div.innerHTML = '<div id="cla">children</div>'

4|2appendChild

把一个子节点添加到父节点的最后一个子节点

    let div = document.createElement('div')
   div.innerHTML = '<div id="cla">children</div>'
   div.style.color = 'red'
   cla.appendChild(div)

4|3insertBefore

把子节点插入到指定位置的前面

parentElement.insertBefore(newElement,谁)

4|4setAttribute

在指定元素中添加一个属性节点，如果元素中已有该属性改变属性值

var div = document.querySelector('id')
div.setAttribute('class', 'red');//第一个参数属性名，第二个参数属性值。

5|0 删除节点

删除一个节点，首先要获得该节点本身以及它的父节点，然后，调用父节点的removeChild把自己删掉

// 拿到待删除节点:
const self = document.getElementById('id');
// 拿到父节点:
const parent = self.parentElement;
// 删除:
const removed = parent.removeChild(self);
removed === self; // true

删除后的节点虽然不在文档树中了，但其实它还在内存中，可以随时再次被添加到别的位置

5|1

__EOF__

本文作者：长安
本文链接：https://www.cnblogs.com/jingxin01/p/16400910.html
关于博主：评论和私信会在第一时间回复。或者直接私信我。
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！