js之节点

JavaScript013

js之节点,第1张

1.节点至少拥有以下三个信息:

node Type:节点类型,元素节点类型为1,属性为2,文本为3,注释为8

node Name:节点名称

node value:节点值

2.父节点:parentNode

语法:element.ParentNode

得到的是离元素最近的父节点,如果找不到就返回null

3.子节点:ParentNode.childNodes

获得所有子节点

4.创建节点:document.create.Element()

document.createElement("元素名") 创建元素节点 

let div1 = document.createElement('div')

console.log(div1)

document.createTextNode("文本")   创建文本节点 

let divText = document.createTextNode('我是div')console.log(divText)

A.appendChild( B) 把B节点追加至A节点的末尾 

div1.appendChild(divText)

 console.log(div1)

 let body = document.querySelector('body')

 body.appendChild(div1)

父节点.insertBefore( A,B ) 把A节点插入到B节点之前 */

let gege = document.createElement('button')

let btnText = document.createTextNode('btn的哥哥')

gege.appendChild(btnText)

let didi = document.getElementById('btn1')

body.insertBefore(gege,didi)

 创建一个h1 我是h1 插入到 btn的前面 */

}

需要准备的材料分别是:电脑、html编辑器、浏览器。

1、首先,打开html编辑器,新建一个html文件,例如:index.html。

2、在index.html的<script>标签中,输入js代码:document.body.removeChild(document.getElementById("1"))。

3、浏览器运行index.html页面,此时会发现123所在的整个div以及它的内容都被移除了。

我也是刚开始学js,js中的节点你只需要知道对应的节点代表什么就行。文本节点就是元素标签的文字内容,属性节点就是元素标签的属性,元素节点就是元素标签。然后,知道了这些,你就应该想得到,标签,是有属性,有内容的。