Dom的javascript原生操作总结

1、创建节点

document.createElement(标签名)

// 创建了一个p标签的新节点
let new = document.createElement('p');

2、插入节点

在parent内的最后插入节点，若我们插入的js节点已经存在于当前的dom树，则这个节点首先会从原先的位置删除，再插入到新的位置

// 将child插入到parent节点内的最后一个
let parent = document.getElementById('parent');
let child = document.getElementById('child');
parent.appendChild(child);

insertBefore(要插入的节点，原有节点)      在指定位置（原有节点之前）插入节点  

let parent = document.getElementById('parent');
let child = document.getElementById('child');
let newElement = document.createElement('div');
parent.insertBefore(newElement, child);

3、移除节点

parent.removeChild(节点)

4、获取节点

①  根据id获取dom节点，只可能获取到一个  ----->  document.getElementById(id);   

// 返回ID为'test'的节点：
var test = document.getElementById('test');

②  根据类名获取dom节点，多个同名时可以获取到一个dom集合  ----->  document.getElementsByClassName(ClassName); 

//  获取类名为test的节点
var test = document.getElementsByClassName('test'); 

③   根据name获取dom节点，(同上)   ----->  document.getElementsByName(Name); 

// 获取name为test的节点，即name='test'
var test = document.getElementsByName('test'); 

④  根据标签名获取dom节点，(同上)   ----->  document.getElementsByTagName(TagName); 

//  获取标签名为p的所有节点
var test = document.getElementsByTagName("p"); 

⑤  通过querySelector获取某节点(一个)        ----->    document.querySelector('#id');

//获取id名为test的节点
var test = document.querySelector('#test');

//获取class名为test的节点
var test = document.querySelector('.test');

//获取文档中 class="example" 的第一个 <p> 元素:
document.querySelector("p.example");

⑥  通过querySelectorAll获取符合条件的所有节点   ----->   document.querySelectorAll(条件);

// 通过querySelectorAll获取q1节点内的符合条件的所有节点：
var ps = q1.querySelectorAll('div.highlighted > p');

5、替换节点的内容

①  element.innerHTML(可以插入html代码)

// 获取<p id="test">...</p>
var p = document.getElementById('test');
// 设置文本为abc:
p.innerHTML = 'abc'; // <p id="test">abc</p>

②  innerText(仅可以插入文本，遇到html会自动编码)

6、修改CSS样式

// 获取<p id="test">...</p>
var p = document.getElementById('test');
// 设置CSS:
p.style.color = '#ff0000';
p.style.backgroundColor = '#ff0000';
p.style.fontSize = '20px';
p.style.paddingTop = '2em';
...