DOM编程

DOM就是文档模型对象的简称

获取元素的方法

// 主要用这两种
document.querySelector('')
document.querySelectorAll('')[index]

// 后面是过时的，了解一下即可
document.getElementById('')
document.getElementsByTagName('')[index]
document.getElementsByClassName('')[index]

新增元素

创建一个标签节点

let div=document.createElement('标签')

创建一个文本节点

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

在新增的标签里面插入文本节点

// 方法一
div.appendChild(text)
// 方法二
div.innerText="你好"
// 方法三
div.textContent="你好"

// 注意，方法一不能在括号里放字符串，因为appendChild只能接收对象

如果完成了上面的三步，相当于创建的标签出现在JS内存里面，还不能显示在页面，下面还需要插入到网页。

// 插入到body里面
document.body.appendChild(div)
// 插入到页面已知的元素
页面已知的元素.appendChild(div)

将元素移除页面

// 新方法
Node.remove()
// 旧方法
parentNode.removeChild()

修改属性

修改class

// 覆盖之前的类名
div.className='red'
// 这种方法比较推荐
div.classList.add('red')

修改style

// 改某个标签的样式
div.style='width:100px;color:blue;'

// 改style的一部分，注意将短横线改成驼峰的写法
div.style.width='200px'
div.style.backgroundColor='white';

读属性

// 方法一，点操作符
a.href
// 方法二
a.getAttribute("href")

查看元素

查看单个元素

// 查爸爸
node.parentNode
node.parentElement

// 查爷爷
node.parentNode.parentNode

//查子代
node.childNodes
node.children

// 查兄弟姐妹
node.parentNode.childNodes
node.parentNode.children

// 查第一个子元素
node.firstChild

// 查看最后一个子元素
node.lastChild

// 查看上一个兄弟元素
node.previousSibling

// 查看下一个兄弟元素
node.nextSibling

遍历（查看）div里面所有的元素（不包括文本节点）

travel=(node,fn)=>{
    fn(node)
    if(node.children){
        for(let i=0;i<node.children.length;i++){
            travel(node.children[i])
        }
    }
}

travel(div1,(node)=>{console.log(node)})