• 微信公众号:美女很有趣。 工作之余,放松一下,关注即送10G+美女照片!

JavaScript学习之DOM(节点、节点层级、节点操作)

互联网 diligentman 2小时前 2次浏览

目录

  • 节点
    • 概念
    • 节点的属性
  • 节点层级
    • 概念
  • 节点操作
    • 创建新节点
    • 增添和删除节点
    • 复制节点
    • 练习

节点

概念

一个页面就是一个节点树,页面中的内容就是节点。

例如:HTML文档可以看作是一个节点树,网页中的所有内容都是节点。

节点的属性

(1)节点类型(nodeType)

A、1表示为元素节点(即标签)

B、2表示为属性节点(标签的属性)

C、3表示为文本节点(标签的内容),文本节点包括文字、空格、换行等

(2)节点名称(nodeName)

(3)节点值(nodeValue)

节点层级

概念

一个HTML文件可以看作是所有元素组成的一个节点树,各元素节点之间有级别的划分。

DOM根据HTML中各节点的不同作用,可将其分别划分为标签节点(元素节点)、文本节点和属性节点。

(1)节点之间的层级关系:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>节点层级</title>
  </head>
  <body>
    <p>段落...</p>
    <a href="#"></a>
  </body>
</html>

根节点<html>标签是整个文档的根节点,有且仅有一个

父节点:指的是某一个节点的上级节点

子节点:指的是某一个节点的下级节点

兄弟节点:两个节点同属于一个父节点(p标签和a标签就是兄弟节点)

(2)获取父节点的方式:
parentNode属性:来获得离当前元素的最近的一个父节点

(3)获取子节点、子元素的方式:

A、childNodes属性:返回当前节点的所有子节点的集合,返回的节点包括元素、文本和其他节点

B、children属性:只返回子元素节点的集合(标签的集合)

C、firstChild属性:返回第一个子节点(元素节点或文本节点)

D、firstElementChild属性:返回第一个子元素(第一个子标签)

E、lastChild属性:返回最后一个子节点(元素节点或文本节点)

F、lastElementChild属性:返回最后一个子元素)(最后一个子标签)

obj.children[0]			   // 获取第一个子元素节点
obj.children[obj.children.length - 1]   // 获取最后一个子元素节点

(4)获取兄弟节点、兄弟元素的方式

A、nextSibling属性:返回后一个兄弟节点

B、previousSibling属性:返回前一个兄弟节点

C、nextElementSibling属性:返回下一个兄弟元素

D、previousElementSibling属性:返回前一个兄弟元素

节点操作

创建新节点

(1)通过createElement创建元素节点(创建标签);

通过createTextNode创建文本节点

(2)补充:

动态创建元素节点的3种常见方式如下:

document.write()创建元素,如果页面文档流加载完毕,再调用会导致页面重绘

element.innerHTML将内容写入某个DOM节点,不会导致页面全部重绘

document.createElement()创建多个元素效率稍微低一点,但是结构更加清晰

增添和删除节点

appendChild()方法,将一个节点添加到指定父节点的子节点列表末尾

insertBefore(child, 指定元素)方法,将一个节点添加到父节点的指定子节点前面

removeChild(child)用于删除节点,该方法从DOM中删除一个子节点,返回删除的节点

复制节点

cloneNode(deep)

注意:
deep是逻辑值,true表示深拷贝,即复制当前节点及其所有子节点(默认值)

false表示浅拷贝,只复制当前节点不复制其子节点。

练习

<h3 id="h">插入节点</h3>
<form name="frm">
	输入文本:<input type="text" name="txt">
	<input type="button" value="插入节点" onclick="insertNode('h',document.frm.txt.value)">
</form>
<script>
    function insertNode(nodeid,str){
        //创建一个p标签
        var newNode=document.createElement('p')
        //创建一个文本节点
        var newTxt=document.createTextNode(str)
        //将文本节点插入到p标签中
        newNode.appendChild(newTxt)
        var ref=document.querySelector('#'+nodeid)
        //判断ref是否有父节点,若节点没有父节点,则无法插入节点
        if(ref.parentNode){
            ref.parentNode.insertBefore(newNode,ref)
        }
    }
</script>

JavaScript学习之DOM(节点、节点层级、节点操作)


程序员灯塔
转载请注明原文链接:JavaScript学习之DOM(节点、节点层级、节点操作)
喜欢 (0)