DOM结构、选择器、节点类型、操作DOM

选择器

<div id='123'>
    <div></div>
    <strong class='s' id='random'>
    hhh
        <p></p>
        <h></h>
    </strong>
    <input name='password'></input>
</div>
<div>
    <span className='title'>
        <strong>demo</strong>
    </span>
</div>

DOM选择器

document.getElementById('123')
//返回类数组⬇️
document.getElementsByTagName('div') 
document.getElementsByName('password')
document.getElementsByClassName('title')

css选择器

//css选择器⬇️ （不是实时的，选择出来的是副本）
document.querySelector('div> span strong') //选出来的是一个
document.querySelectorAll('div') //选出来的是一组

节点类型、基于节点的DOM选择器

• 文本节点 ➡️ 3
• 元素节点 ➡️ 1
• 注释节点 ➡️ 8
• document ➡️ 9
• 属性节点 ➡️ 2
• DocumentFragment ➡️ 11

var strong = document.getElementByTagName('strong')[0]
//遍历节点数⬇️ 
strong.parentNode //父节点
strong.childNodes //子节点们
strong.childNodes.length //5 
strong.firstChild //第一个子节点
strong.lastChild //最后一个子节点
strong.nextSibling //下一个兄弟节点
strong.previousSibling //上一个兄弟节点
//基于元素节点树的遍历⬇️ （有IE兼容问题）
strong.parentElement //父元素节点
strong.children //元素子节点
strong.firstElementChild //第一个元素子节点
strong.lastElementChild //最后一个元素子节点
strong.nextElementSibling //第一个元素兄弟节点
strong.previousElementSibling //最后一个元素兄弟节点
//节点的属性
strong.firstChild.nodeName // #text 节点名称，只读
strong.firstChild.nodeValue // hhh 文本节点或注释节点的内容，可读写
strong.childNodes[0].nodeType //3 返回节点类型对应数字，只读✅
strong.attributes // {0:'class',1:'id',length:2} 返回属性节点的集合（类数组）可读写
//节点的方法
strong.hasChildNodes() //true 是否有子节点

DOM结构树

Node ⬅️ Document.prototype ⬅️ HTMLDocument.prototype ⬅️ document

Node ⬅️ Element ⬅️ HTMLElement

Node ⬅️ CharacterData ⬅️ Text/Comment

DOM操作

//创建
var div = document.createElement('div') //创建元素节点 ✅
var span = document.createElement('span')
var text = document.createTextNode('aa') //创建文本节点
var comment = document.createComment('ddd') //创建注释节点
//插入
document.body.appendChild(div) //类似于push操作，会放到最后面 ✅
div.appendChild(text) // 
span.appentChild(text) // 具有剪切效果
div.inserBefore(span,div) // <span/> <div/>
//删除
span.removeChild(text) //父节点移除子节点,返回子节点
text.remove() //自己销毁，没有返回值
//替换
div.replaceChild(span, text) //前面是新的，后面是被替换的。

Element节点的一些属性

div.innerHTML = '<span> hhh </span>' // <div> <span> hhh </span> </div> 改变元素节点的内容， 读写
div.innerHTML = '123' // <div>123</div>
div.innerText = 'aaa' //读：仅读文本  写：覆盖所有内容
div.className = 'hhh' //<div class='hhh'>123</div>

Element节点的一些方法

div.setAttribute('class','demo') //<div class='demo'></div> 添加行间属性
div.getAttribute('class') //demo 获取属性值