DOM的增删改查

在对DOM进行增删改查之前要对DOM进行获取

1. 通过id获取

// 使用document.getElementById('id')
document.getElementById('juejin-web-editor')

2. 通过标签获取,返回的是一个伪数组

// document.getElementsByTagName('tag')
document.getElementsByTagName('div')

3. 通过类名来获取

// document.getElementsByClassName('className')
document.getElementsByClassName('edit-draft')

4. 通过选择器来获取（兼容性差）

// 传入选择器的名字，如果多个符合条件返回第一个
document.querySelector('div')
// 传入选择器的名字,获取所有符合条件的元素
document.querySelectorAll('div')

5. 获取特定元素

• 获取html元素

document.documentElement

• 获取head元素

document.head

• 获取body元素

document.body

• 获取所有的元素

document.all 是一个falsy值

很奇怪的一个点在于document.all返回值明明是个伪数组，效果如下

![C_MXZPG$LIKQBOSG(NPG92.png

但是在if语句中进行判断的时候确实falsy值，如下代码打印出来的是false

if(document.all){
    console.log(true)
}else{
    console.log(false)
}

IE11之前的IE中的Microsoft专有功能，并作为“蓄意违反JavaScript规范”而添加到HTML规范中，因此为IE编写的网站在尝试访问时不会中断document.all.something。这是虚假的。（个人理解，是由于历史原因导致，document.all是ie中的非标准的写法，因此它在标准中是虚假的） 链接详情

元素的原型

// 获取的原型链是非常的长的
console.dir(document.querySelector('div'))

• 元素和节点的区分 节点包含元素、文本注释等，是元素的超集 通过x.nodeType来区分,x是获取的节点

返回值如果是1表示元素,也叫标签 3表示文本

节点的增删改查

增加

• 在js线程中创建一个标签节点

let div1 = document.createElement('div')

• 增加元素

// 语法：parentNode.appendChild('childNode')
//  往parentNode的后面添加一个子节点
let div = document.createElement('div');
test1.appendChild(div);
test2.appendChild(div);   
`只在test2中添加一个节点，test1中并不会添加节点`

• 在js线程中创建一个文本节点

let text = document.createTextNode('您好')

• 在js线程中，往元素上插入文本

let div1 = document.createElement('div')
let text = document.createTextNode('您好')
div1.appendChild(text1)

//另一种更简单的方式
let div1 = document.createElement('div')
div1.innerText = '您好'

上述的代码在JS线程中，需要将创建的节点添加到页面上

删除

两种方式

// 旧方式：parentNode.removeChild(childNode)
// 新方式： childNode.remove()    //不兼容ie
// 前者的兼容性好，并且要获取两个节点，后者只需获取需要删除的节点

改属性

• 改标准属性

div.className = 'red blue'  //覆盖
div.classList.add('red')   //不覆盖
//修改style
div.style.width = "100px"
// 修改data-*属性
element.dataset.x = 'maple'

//读标准属性
a.href
element.getAttribute('key')

• 改写事件处理函数 div.onclick 默认值为null,当将div.onclick赋值给一个函数fn的时候，当div被点击的时候浏览器就会调用这个函数fn.call(div,event),event是事件对象，包含了事件的所有的信息

• 查看 查看父节点： node.parentNode、 node.parentElement

查子代：node.childNodes、node.children

查看第一个节点 node.first-child

查看最后一个节点：node.lastChild

查看上一个兄弟节点 node.previousSibling

查看下一个兄弟 node.nextSibling