16前端成长日记-DOM常用APInode接口属性childNodes获取子节点firstChild获取第一子节点las

node 接口

属性

childNodes 获取子节点

<body>
    <div>Hello World</div>
</body>
<script>
    document.querySelector('body').childNodes // <div>Hello World</div>
</script>

firstChild 获取第一子节点

<body>
    <div><span></span></div>
</body>
<script>
    document.querySelector('body>div').firstChild // <span></span>
</script>

lastChild 获取最后一个节点

<body>
    <div><span></span><p></p></div>
</body>
<script>
    document.querySelector('body>div').lastChild // <p></p>
</script>

innerText 获取节点后文本内容

<body>
    <span>Hello</span>
    <span>World</span>
</body>
<script>
    document.querySelector('body').innerText // Hello World
</script>

textContent 获取节点后文本内容

它与 innerText 的区别在于

textContent 会获取到script和style元素而 innerText 不会；

innerText 会受 css 样式的影响而 textContent 不会

nextSibling 获取紧跟其后的兄弟节点

<body>
    <span>Hello</span><span>World</span>
</body>
<script>
    document.querySelector('span').nextSibling // <span>World</span>
</script>

previousSibling 获取上面的一个兄弟节点

<body>
    <span>Hello</span><span>World</span>
</body>
<script>
    document.querySelector('span').nextSibling.previousSibling // <span>Hello</span>
</script>

nodeName 获取节点的名称

返回的节点名称是大写

<body>
    <div>Hello World</div>
</body>
<script>
    document.querySelector('body').nodeName // 'BODY'
</script>

nodeType 获取节点类型

<body>
    <div>Hello World</div>
</body>
<script>
    document.querySelector('body').nodeType // '1'
</script>

nodeValue 获取节点的内容

如果是文档节点则返回 null

<body>
    <div>Hello World</div>
</body>
<script>
    document.querySelector('div').nodeValue // 'Hello World'
</script>

ownerDocument 获取文档的顶层节点

<body>
    <div>Hello World</div>
</body>
<script>
    document.querySelector('div').ownerDocument // 'HTML'
</script>

parentElement,parentNode 获取当前节点的父节点

<body>
    <div>Hello World</div>
</body>
<script>
    document.querySelector('div').parentElement
 // <body>...</body>
</script>

方法

appendChild() 在指定节点内部的末尾，添加节点

这个方法通常与 Element 接口的 createElement() 一起搭配使用

<body>
</body>
<script>   document.querySelector('body').appendChild(document.createElement('div'))
</script>

removeChild() 删除节点

<body>
    <div id="box">
        <span id="span"></span>
    </div>
</body>
<script>
document.getElementById('box').removeChild(document.getElementById('span'))
</script>

cloneNode() 克隆节点

cloneNode() 括号内如果填 true 表示为深拷贝；深拷贝不仅会拷贝当前节点还会拷贝它的后代

<body>
    <div id="box">
        <span id="span"></span>
    </div>
</body>
<script>
document.getElementById('box').appendChild(document.getElementById('span').cloneNode(true))
</script>

Document 接口

方法

createTextNode() 创建文本节点

createTextNode() 括号内写需要创建的文本内容

<body>
    <div id="box">
    </div>
</body>
<script>
document.getElementById('box').appendChild(document.createTextNode('Hello World'))
</script>

querySelector() 获取指定的选择器

只能返回一个 element 对象

<body>
    <div id="box">
    </div>
</body>
<script>
document.querySelector('body>div')//<div id="box"></div>
</script>

querySelectorAll() 获取指定的选择器组

<body>
    <div id="box"></div>
    <div></div>
</body>
<script>
document.querySelectorAll('body>div')//NodeList(2) [div#box, div]
</script>