节点操作

Yang大约 3 分钟

类名修改

className

获取或修改类名，替换整个类名字符串

<div id="div" class="test1 test2 test3">className Test</div>
<script>
  var oDiv = document.getElementById('div')
  console.log(oDiv.className) // test1 test2 test3
</script>

classList

一个特殊的对象，它具有 add/remove/toggle 单个类的方法

elem.classList.add(class) ：添加/类
elem.classList.remove(class) ：删除类
elem.classList.toggle(class) ：如果类不存在就添加类，存在就移除它
elem.classList.contains(class) ：检查给定类，返回 true/false

<div id="div" class="test1 test2 test3"></div>
<script>
  var oDiv = document.getElementById('div')
  console.log(oDiv.classList) // DOMTokenList(3) ['test1', 'test2', 'test3', value: 'test1 test2 test3']
  console.log(Array.from(oDiv.classList)) // (3) ['test1', 'test2', 'test3']
  for(let name of oDiv.classList){
    console.log(name) // 依次打印 test1、test2、test3
  }
</script>

样式修改

style

是一个对象，它对应于 style 属性中所写的内容

对于多词属性，使用驼峰式 camelCase

<div id="div">Test</div>
<script>
  var oDiv = document.getElementById('div')
  oDiv.style.color = "#f00"
</script>

style.cssText

完全重写元素 style 属性内容

<div id="div">Test</div>
<script>
var oDiv = document.getElementById('div')
console.log(oDiv.style.cssText) // 空
oDiv.style.cssText=`
    background-color: red;
    width: 100px;
  `;
console.log(oDiv.style.cssText) // background-color: red; width: 100px;
console.log(oDiv.style.width) // 100px
console.log(oDiv.style.backgroundColor) // red
  
oDiv.style.backgroundColor = '#f00'
console.log(oDiv.style.backgroundColor) // rgb(255, 0, 0)
</script>

getComputedStyle(elem, [pseudo])

读取 CSS 中最终应用到元素上的的样式值

elem：需要被读取样式值的元素
pseudo：（可选的）伪元素，空字符串或无参数代表元素本身

注意

单位要添加到值上 style.top.top = '20px'
通过 style.* = str 的方式设置某个样式后，可以再次通过 style.* = '' 的方式来重置为设置之前的样式

创建节点

createElement(tag)

创建元素节点

document.createElement('div')

createTextNode(text)

创建文本节点

document.createTextNode('Hello World!')

插入节点

下面方法的参数可以是一个要插入的任意的 DOM 节点列表，或者文本字符串

<div id="div"></div>
<script>
  div.before('<p>Hello</p>', document.createElement('hr'));
</script>

append、prepend、before、after、replaceWith：插入字符串时，参数都被作为文本插入，而不是作为 HTML 代码，因此像 <、> 这样的符号都会被作转义处理来保证正确显示

append()

在 node 末尾插入节点或字符串

prepend()

在 node 开头插入节点或字符串

before()

在 node 前面插入节点或字符串

after()

在 node 后面插入节点或字符串

replaceWith()

将 node 替换为给定的节点或字符串

insertAdjacentHTML(where, html)

将字符串作为 HTML 插入

该方法的第一个参数是代码字，指定相对于 elem 的插入位置。必须为以下之一
- beforebegin ：将 html 插入到 elem 之前
- afterbegin ：将 html 插入到 elem 开头
- beforeend ：将 html 插入到 elem 末尾
- afterend ：将 html 插入到 elem 之后
还有两个类似的方法 elem.insertAdjacentText(where, text)、elem.insertAdjacentElement(where, elem)
- 语法一样，只是一个是作为文本插入，一个是作为元素插入，目的是为了语法统一，多数情况还是使用 insertAdjacentHTML 或者之前那几种方法，语法更简洁

注意

所有插入方法都会自动从旧位置删除该节点，无需调用 remove() 方法删除

<div id="first">First</div>
<div id="second">Second</div>
<script>
  second.after(first)
</script>

删除节点

remove()

删除节点

<div>
  <div>==============</div>
  <h1 id="title">Title</h1>
  <div>==============</div>
</div>
<script>
	setTimeout(()=>{
    document.getElementById('title').remove()
  }, 2000)
</script>

克隆节点

cloneNode(deep)

克隆节点

elem.cloneNode(true)：来创建元素的一个“深”克隆，具有所有特性（attribute）和子元素
elem.cloneNode(false)：克隆就不包括子元素

<div id="div" class="test">
  123
  <h1>Content H1</h1>
  <h2>Content H2</h2>
  <h3>Content H3</h3>
  <h4>Content H4</h4>
  <h5>Content H5</h5>
  <h6>Content H6</h6>
</div>
<script>
  var oDiv = document.getElementById('div')
  var oCloneDiv = oDiv.cloneNode(false)
  oDiv.after(oCloneDiv)
</script>

文档片段

DocumentFragment 是一个特殊的 DOM 节点，用作来传递节点列表的包装器
可以向其附加其他节点，当将其插入某个位置时，则会插入其内容

<ul id="ul"></ul>
<script>
function getListContent() {
  let fragment = new DocumentFragment()
  for(let i=1; i<=3; i++) {
    let li = document.createElement('li')
    li.append(i)
    fragment.append(li)
  }
  return fragment
}
ul.append(getListContent())
</script>

旧版本操作方法

这些旧方法都会返回 node

elem.appendChild(node)

将 node 附加为 elem 的最后一个子元素

elem.insertBefore(node, nextSibling)

在 elem 的 nextSibling 前插入 node

elem.replaceChild(node, oldChild)

将 elem 的后代中的 oldChild 替换为 node

elem.removeChild(node)

从 parentElem 中删除 node（假设 node 为 parentElem 的后代）