DOM操作

1. JS基础知识，规定语法（ECMA 262 标准）
2. JS Web API，网页操作的API（W3C标准）

W3c标准
w3c标准不是某一个标准，而是一系列标准的集合。网页主要由结构、表现、行为三部分组成，对应的标准有结构化标准语言有XHTML、xml,表现的标准语言有CSS，行为的标准有对象模型（如 w3c dom）、ECMAScripe等

JS Web API：

• DOM
• BOM
• 事件绑定
• ajax
• 存储

DOM（document object model）的本质，dom是哪种数据结构

• 树（DOM树）—>数据结构

获取DOM节点

//html和css
//css
.container{
    border:1px solid #ccc;
    height:50px;
}
.red{
    color:red;
}
//html
<div id="div1">
    <p>这是一段文字1</p>
    <p>这是一段文字2</p>
    <p>这是一段文字3</p>
<div>
<div class="container">
    内容
</div>

const div1 = document.getElementById('div1');//元素
const divList = document.getElementsByTagName('div')//集合
console.log(divList.length,divList[0])
const containerList = document.getElelmentsByClassName("container") //集合
const pList = document.querySelectorAll("p") //集合

property和attribute

1. property:修改对象属性，不会体现在html结构中。
2. attribute:修改html属性，会改变html结构。
3. 两者都可能引起DOM重新渲染。（尽量用property）

js

const pList = document.querySelectorAll('p')
const p1 = pList[0]

property形式(对dom元素js变量进行修改)

p1.style.width="100px"
console.log(p1.style.width)
p1.calssName = "red"
console.log(p1.calssName)
console.log(p1.nodeName)//打印的是节点名称p
console.log(p1.nodeType)//打印节点类型1

attribute形式(设置的是节点属性)

p1.setAttribute("class","container")
console.log(p1.getAttribute("class"))

DOM结构操作

1. 新增/插入节点
2. 获取子元素列表，获取父元素
3. 删除字节点

const div1 = document.getElementById("div1")
//添加新节点
const newP = document.createElement('p')
newP.innerHTML = "this is p1"
div1.appendChild(newP)//添加新创建的元素
//移动已有节点，注意是移动
const p2 = document.getElementById('p2')
div1.appendChild(p2)

//获取子元素列表
const div1 = document.getElementById("div1")
const div1ChildNodes = div1.childNodes
console.log(div1.childNodes)//打印出两种标签，一种是p标签，一种是text标签，因为p标签里面含有文本，text的nodeType为3，p的nodeType为1，所以通过转化为数组过滤。
const div1ChildNodesP = Array.prototype.slice.call(div1.childNodes).filter(child=>{
    if(child.nodeType == 1){
        return true
    }
    return false
})

//删除子节点
div1.removeChild(div1ChildNodesP[0])


//获取父元素
const div1 = document.getElementById("div1")
const parent = div1.parentNode