Skip to main content

DOM-node

我们在html里想要获取指定的元素，可以用dom操作，但是比较繁琐

node操作，主要利用element的父子兄弟关系来获取元素，让我们开始吧

节点类型#

在所有元素的属性下有一个nodeType,一共有3个，分别代表如下

元素节点：nodeType=1

属性节点：nodeType=2

文本节点：nodeType=3

我们主要用的就是元素节点

父级节点#

node.parentNode

<body><div>    <p></p></div>
</body><script>let a = document.querySelector('p')let b= a.parentNodeconsole.log(b)   //这样就可以找到div标签了，注意得到的是离它最近的父亲
</script>

子级节点#

<body><div id="bigf">    <div><p></p></div></div>
</body><script>let a = document.querySelector('#bigf')let b= a.childNodesconsole.log(b)//结果是NodeList(3) [text, div, text]，
</script>

没错它里里面还有文本节点，但是我们只想要元素节点，所以我们一般不用子级节点childNodes

children#

我们一般用这个来输出子元素

<body><div id="bigf">    <div><p></p></div></div>
</body><script>let a = document.querySelector('#bigf')let b= a.childrenconsole.log(b)//结果：HTMLCollection [div]
</script>

firstchild lastchild#

获取第一，最后1个字节点，文本，元素节点都包括

firstElementChild lastElementChild#

获取元素节点，常用

<body><div id="bigf">    <p>sas</p>    <p></p>    <p></p>    <p></p>    <p></p></div>
</body><script>let a = document.querySelector('#bigf')let b= a.firstElementChildconsole.log(b)
</script>

兄弟节点#

nextSibing#

下一个兄弟节点，包含文本节点

previousSibing#

上一个兄弟节点，包含文本节点

nextElementSibing#

下一个兄弟元素节点，常用

<body><div id="bigf">
</div><p>sdad</p>
</body><script>let a = document.querySelector('#bigf')let b= a.nextElementSiblingconsole.log(b)
</script>

previousElementSibling#

上一个兄弟元素节点，常用

创建节点#

<body><div id="bigf">
</div><ul></ul>
</body><script>    let ula=document.querySelector('ul')    let lis=[]
    for(let i in [1,2,3]){        let lia=document.createElement('li')  //创建标签        lia.innerText=`this is ${Number(i)+1}`//添加标签内容        ula.appendChild(lia)  //添加到ul下面作为孩子，追加到最后面
    }


</script>

如果要插在前面就要用到insertBefore

用法是：node.insertBefore(插入的元素，在哪个子元素的前面)

删除节点#

<body><ul>    <li>11</li>    <li>2</li>    <li>3</li></ul></body><script>let ula=document.querySelector('ul')ula.removeChild(ula.children[0])  //用removeChild删除子节点</script>

复制节点#

<body>
<ul id="ul1">    <li>11</li>    <li>2</li>    <li>3</li></ul><button>-</button></body><script>    let ula1=document.querySelector('#ul1')//这里我们要复制ul    let ula2=ula1.cloneNode(true)//用。cloneNote来复制，如果()里不填就是false,那么就是浅复制，只复制一个标签并不复制整体元素，如果改成true,那么整个都复制，包括里面的子元素，属性    ula2.id='ul2'    let body=document.querySelector('body')    body.appendChild(ula2)</script><style>    #ul1{        color: red;    }    #ul2{        color: blue;    }</style>
danger

用。cloneNote来复制，如果()里不填就是false,那么就是浅复制，只复制一个标签并不复制整体元素，如果改成true,那么整个都复制，包括里面的子元素，属性