js_操作DOM

DOM 操作

获取元素的节点，通过 document 调用

1. document.getElementById(‘name’); // 方法，通过 id 的属性获取一个 dom 节点

2. document.getElementsByTagName(‘name’); // 方法，通过 标签名称获取一组 dom 节点。返回 array

3. document.getElementsByName(‘name’); // 方法，通过标签的属性获取一组 dom 节点。返回 array

   ```js
   
     const nodeBtn = document.getElementById('name');
     nodeBtn.innerHTML(); // 获取到节点内的内容text 和 hmtl
     nodeBtn.NODE.属性（class除非：className）;
   
     nodeBtn.innerText()  // 只有文本
   ```
   

获取元素节点的子节点，通过具体的元素节点调用

1. getElementsByTagName() // 方法，返回当前节点的指定标签名后代节点

2. childNodes // 属性，表示当前节点的所有子节点 包括空格

3. children // 属性，表示当前节点的子元素 不包括空格

4. firstChild // 属性，表示当前节点的第一个子节点

5. firstElementChild // 属性，表示当前节点的第一个子元素

6. lastChild // 属性，表示当前节点的组后一个子节点

7. lastElementChild // 属性，表示当前节点的组后一个子元素

获取父节点和兄弟节点，通过具体的元素节点调用

1. parentNode // 属性，表示当前节点的父节点

2. previousSibling // 属性，表示当前节点的前一个兄弟节点

3. previousElementSibling // 属性，表示当前节点的前一个兄弟元素(标签)节点

4. nextSibling // 属性，表示节点的后一个兄弟节点

5. nextElementSibling // 属性，表示节点的后一个兄弟元素(标签)节点

其他选择器

1. document.getElementsByClassName(‘’) // 根据 class 名称查询节点

2. document.querySelector(‘’) // 可以根据 css 选择器查询元素节点， 只会返回第一个。

3. document.querySelectorAll(‘’)

document 其他属性

1. document.body // body

2. document.documentElement // html

3. document.all // 页面里的所有元素

改变 HTML 元素

1. Element.innerHTML() // 改变元素的 inner HTML

2. Element.attribute() // 改变 HTML 元素的属性值

3. element.setAttribute(attribute, value) // 改变 HTML 元素的属性值

4. element.style.property = new style // 改变 HTML 元素的样式

HTML 增删改

1. document.createElement(element) // 创建 HTML 元素

2. document.removeChild(element) // 删除 HTML 元素

3. document.appendChild(element) // 添加 HTML 元素

4. document.replaceChild(element) // 替换 HTML 元素 父节点.replaceChild(oldNode, newNode)

5. document.createTextNode(‘string’) // 创建文本元素

6. document.insertBefore() // 元素前插入

文章参考