js dom - 元素选择、节点树、元素节点树、节点属性

最新推荐文章于 2022-11-01 00:21:55 发布

@红@旗下的小兵

最新推荐文章于 2022-11-01 00:21:55 发布

阅读量497

点赞数

分类专栏： ES5

本文链接：https://blog.csdn.net/qq_42778001/article/details/105927514

版权

ES5 专栏收录该内容

32 篇文章 1 订阅

订阅专栏

1、document

document 整个文档（document节点）

html标签 是 document的根标签

2、元素选择

（1）根据 id 选择：

let dom = document.getElementById('id')  // 根据id选择元素 - 一个

（2）根据 标签名 选择元素 - 选出是一组元素（类数组）无兼容问题

let dom = document.getElementsByTagName('div')[0]

（3）根据 class 选择元素 - 选出是一组元素（类数组） ie8和ie8以下的没有此方法

let dom = document.getElementsByClassName('div')[0]

（4）根据 name 选择元素 - 选出是一组元素（类数组）不常用，如：表单、 img、 iframe

<input name="username">
let dom = document.getElementsByName('username')[0]

（5）根据 css 选择元素，可写css选择器 - 选择出来的是一个

<div>
     <p>
         <span class="demo"></span>
     </p>
 </div>
let dom = document.querySelector('div > p >span.demo') // 一个元素
let dom = document.querySelectorAll('div > p >span.demo') // 一组数据（类数组）

tips:

1》 ie6/7 没有此方法

2》选出来的元素不是实时的（如：先使用querySelectorAll选出来的元素，之后对元素进行增删改查，querySelectorAll选出来的元素不会改变！）

3、遍历节点树

无兼容问题，只不过选出来的包含多个节点：

（1）dom.parentNode 获取父级元素（最顶层的parentNode为#document）

<div id="box">吕星辰
    <!--<span></span>-->
    <div class="son">123</div>
</div>
<script>
let dom = document.getElementsByClassName('son')[0]

// <div id="box">···</div>
console.log('1父节点为：', dom.parentNode)

// <body>···</body>
console.log('2父节点的父节点为：', dom.parentNode.parentNode)

// <html lang="en">···</html>
console.log('3父节点的父节点的父节点为：', dom.parentNode.parentNode.parentNode)

// #document
console.log('4父节点的父节点的父节点的父节点为：', dom.parentNode.parentNode.parentNode.parentNode)

// null
console.log('5父节点的父节点的父节点的父节点的父节点为：', dom.parentNode.parentNode.parentNode.parentNode.parentNode)
</script>

（2）dom.childNodes 获取直接子级元素（包含各类节点 文本节点··· ···）

<div id="box">
    吕星辰
    <!--<span></span>-->
    <div>123</div>
    <span>345</span>
</div>
<script>
    let dom = document.getElementById('box')
    let r = dom.childNodes
    console.log(r) // NodeList(7) [text, comment, text, div, text, span, text]
</script>

（3）dom.firstChild 获取第一个直接子集节点（不常用，通常选择出来的是文本节点）

（4）dom.lastChild 获取最后一个直接子集节点（不常用，通常选择出来的是文本节点）

（5）节点类型

元素节点：1

属性节点：2

文本节点：3

注释节点：8

document：9

DocumentFragment：11

4、遍历元素节点树

只会包含元素（标签），不会包含其他的文本节点 ··· ···

ie9及以下不兼容

dom.parentElement      父元素节点
dom.children           当前元素的直接子元素节点
dom.children.length    个数

dom.firstChild         当前元素的第一个子节点
dom.lastChild          当前元素的最后一个子节点

dom.nextElementSibling       当前元素的下一个元素的节点（是邻居节点，不是父子关系）
dom.previousElementSibling   当前元素的上一个元素的节点（是邻居节点，不是父子关系）

5、节点属性

nodeName    元素的标签名，以大写形式表示，只读 返回字符串
nodeValue   Text节点或Comment节点的文本内容，可读写
nodeType    返回该节点的类型 ，非常常用

封装 - 返回当前元素的子元素节点

<div id="box">
    吕星辰
    <!--<span></span>-->
    <div>123</div>
    <span>345</span>
</div>
<script>
function retTemp(node) {
    let temp = {
        push: Array.prototype.push,
        splice: Array.prototype.splice //加上splice 浏览器内部会把temp变为类数组
    }
    let childrenNodes = node.childNodes,
        childrenNodesLength = childrenNodes.length
    // 节点类型等于1 - 元素节点，才push
    for(let i = 0; i < childrenNodesLength; i ++) {
        if (childrenNodes[i].nodeType === 1) {
            temp.push(childrenNodes[i])
        }
    }
    return temp
}
let node = document.getElementById('box')
const r = retTemp(node)
console.log(r) // Object(2) [div, span, push: ƒ, splice: ƒ]
</script>

封装 - insertAfter 方法，在某个元素之后插入元素节点

<div id="box">吕星辰
    <span></span>
    <p></p>
</div>
<script>
    let div = document.getElementById('box')
    let span = document.getElementsByTagName('span')[0]
    let p = document.getElementsByTagName('p')[0]
    let i = document.createElement('i')

    // 封装insertAfter 在某个元素之后插入元素节点
    Element.prototype.insertAfter = function(targetElement, afterElement) {
        let proxy = afterElement.nextElementSibling // 获取到某个元素的下一个相邻元素节点
        if (proxy === null) { // 有个可能是最后一个元素，获取到某个元素的下一个相邻元素就为null
            this.appendChild(targetElement) // 直接插入
        } else {
            this.insertBefore(targetElement, proxy) // 在相邻元素的前边插入元素即可
        }
    }
    div.insertAfter(i, p)
</script>