DomDOM 节点获取dom元素的方法 document //代表整个文档 document.getElementBy

DOM

DOM文档对象模型document、object、model，是用来呈现以及与任意 HTML 或 XML文档交互的API。

节点

节点表示网络中的连接点，在dom中有很多不同类型的节点，比较常用的dom节点有元素节点、属性节点、文本节点。

<p title="a gentle reminder">Don't forget to buy this stuff.</p>
元素节点 p标签
属性节点 title="a gentle reminder"
文本节点 Don't forget to buy this stuff.

获取dom元素的方法

document //代表整个文档
document.getElementById()
getElementsByTagName()
getElementsByName()
getElementsByClassName()
querySelect()
querySelectAll()

document.getElementById()通过id查找元素，注意前面必须通过document调用此方法

<body>
    <div id="demo1"></div>
</body>

let div = document.getElementById('demo1') 
console.log(div)    //<div id="demo1"></div>

getElementsByTagName()返回给定标签的html元素集合

<body>
    <div id="demo1"></div>
</body>

let byTagName=document.getElementsByTagName('div') 
console.log(byTagName)//HTMLCollection [div#demo1, demo1: div#demo1]

getElementsByClassName()返回所指定类名的子元素集合。注意ie9以下该方法不支持

<body>
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
</body>

let box = document.getElementsByClassName('box')
console.log(box)//HTMLCollection(3) [div.box, div.box, div.box]

querySelect()返回指定选择器或选择器组查询到的第一个元素，注意ie8以下不支持，获取到的dom元素不是实时的

<body>
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
</body>

let querySelect = document.querySelector('.box')
console.log(querySelect)//<div class="box">1</div>

querySelectAll()返回指定选择器或选择器组查询到的元素列表，返回对象nodeList 注意ie8以下不支持，获取到的dom元素不是实时的

<body>
    <div></div>
    <div></div>
    <div></div>
</body>

let qDiv = document.querySelectorAll('div')
let div = document.createElement('div')
document.body.appendChild(div)
console.log(qDiv)//nodeList(3)

第四章

遍历节点树
childNodes、nodeType、nodeValue、firstChild、lastChild、parentNode、nextSibling、previousSibling属性

childNodes属性获取一个元素的所有子元素节点，返回类数组
 <div id="demo1">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
</div>
let div = document.getElementById('demo1')
console.log('nodes', div.childNodes)//NodeList(7) [text, div.box, text, div.box, text, div.box, text]

nodeType属性获取一个元素的所有子元素，返回类数组
 <div id="demo1">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
</div>
let div = document.getElementById('demo1')
let arr = Array.from(div.childNodes)
arr.forEach((item) =>{
    console.log(item.nodeType) // 3 1 3 1 3 1 3
})
元素节点nodeType值为1
属性节点nodeType值为2
文本节点nodeType值为3

nodeValue属性，设置文本节点的值
 <div id="demo1">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
</div>
let div = document.getElementById('demo1')
let arr = Array.from(div.childNodes)
let value = arr[1].childNodes[0].nodeValue
console.log('value',value)  //1

firstChild和lastChild属性访问第一和最后一个节点

parentNode返回父节点

nextSibling、previousSibling分别返回上一个和下一个兄弟节点

遍历元素节点树
parentElement、children、firstElementChild、lastElementChild

parentElement   返回当前元素的父元素节点（ie不兼容）
children    返回当前元素的元素子节点
firstElementChild   返回第一个元素节点（ie不兼容）
lastElementChild    返回最后一个元素节点（ie不兼容）
nextElementSibling、previousElementSibling分别返回上一个和下一个兄弟元素节点

Dom结构树

Node
    Document
        HTMLDocument
    CharacterData
        Text
        Content
    Element
        HTMLElement
            HTMLHeaderElement
            HTMLBodyElement
            ......
    Attr

节点继承关系例如：document.__proto__ ->HTMLDocument HTMLDocument.__proto__ -> Document    Document.__proto__ ->Node

增加节点

document.createElement
document.createTexrNode
document.createComment
document.createDocumentFragment

插入节点

appendChild //剪切操作
insertBefore(a,b)

删除节点

removeChild //删除子节点
remove  //删除自己

替换

replaceChild(new,origin)

elelment节点的一些属性

innerHTML   //替换操作，会识别html结构
innerText   //文本内容，火狐和低版本ie不兼容

elelment节点的一些方法

setAttribute    //设置属性
getAttribute    //获取属性