javascript如何表示根节点

JavaScript08

javascript如何表示根节点,第1张

节点至少拥有nodeType(节点类型),nodeName(节点名称),nodeValue(节点值)三个基础属性

(1)元素节点---nodeType为1

(2)属性节点---nodeName为2

(3)文本节点---nodeValue为3 (文本节点包含文字、空格、换行等)

2、节点的层级

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

(1)根节点:<html>就是根节点,有且只有一个

(2)父节点:一个节点的上级节点

(3)子节点:一个节点的下级节点

(4)兄弟节点:具有相同父节点的节点

二、节点操作

1、获取父节点

element.parentNode

2、获取子节点

(1)element.childNodes:获得的是当前元素的所有子节点的集合(所有类型的子节点)

(2)element.children:是一个可读的属性,返回所有子元素节点

(3)firstChild:获取第一个子节点

(4)lastChild:获取最后一个子节点

(5)firstElementChild:获取第一个元素子节点

(6)lastElementChild:获取最后一个子元素节点

3、获取兄弟节点

(1)nextSibling:获取下一个兄弟节点

(2)previousSibling:获取上一个兄弟节点

(3)nextElementSibling:获取下一个兄弟元素(标签)节点

(4)previousElementSibling:获取前一个兄弟元素节点

<body>

<div class="demo">

<div class="box">

<h2>一二三四五</h2>

<span class="child">上山打老虎</span>

<p>注意!(保护国家保护动物)</p>

</div>

</div>

<div>

<ul>

<li id="l1">红楼梦</li>

<li>水浒传</li>

<li>三国演义</li>

<li>西游记</li>

</ul>

</div>

<script>

var child = document.querySelector('.child')

console.log(child.parentNode)

var ul = document.querySelector('ul')

var lis = ul.querySelectorAll('li')

console.log(lis)

console.log("通过childNodes获得的子节点",ul.childNodes)

console.log("children",ul.children)

console.log("ul的子节点",ul.childNodes)

console.log("ul第一个子节点的类型:",ul.childNodes[0].nodeType)

console.log("ul的第二个字节点类型:",ul.childNodes[1].nodeType)//1是元素,也叫标签

console.log("ul的第一个子节点",ul.firstChild)

console.log("ul的最后一个子节点:",ul.lastChild)

console.log("ul的第一个子元素节点",ul.firstElementChild)

console.log("ul的最后一个子元素节点",ul.lastElementChild)

var span = document.querySelector('.child')

console.log("span的兄弟节点",span.nextSibling.nextSibling)

console.log("span的前一个兄弟节点",span.previousElementSibling)

</script>

</body>

登录后复制

4、创建节点

(1)doument.write():若页面加载完毕,再次调用该方法导致页面重绘

(2)element.innerHTML:将节点加入到元素中,导致页面部分重绘

(3)document.createElement():创建节点.结构清晰、效率不高

5、添加和删除节点

(1)appendChild():将节点添加到指定父节点的已有子节点的末尾

(2)insertBefore():将节点添加到指定父节点的已有子节点的前面

(3)removeChild(child):删除一个指定的节点。返回值为删除的节点

6、克隆节点

cloneNode(true/false):复制节点

(1)true:深拷贝,复制节点本身和所有子节点

(2)false(或空):浅拷贝,只复制节点本身

我们仅仅知道用户点击的那一条数据,所以这条数据必须是唯一的才能构建一颗唯一的树结构,如果后端给不到你唯一的值,一定要让他给你生成一个唯一值id

我采用的string切割插入值

table初始化进来只有一层,并且是固定的

此时生成的是