js文档知识｜青训营1.dom文档节点节点是构成网页最基本的组成部分,网页中每个部分都可以成为节点如:html标

1.dom文档节点
节点是构成网页最基本的组成部分,网页中每个部分都可以成为节点

如:html标签,属性,文本,注释,整个文档都是一个节点
常用节点分为四类:
1.文档节点:整个html文档

document代表的是整个html文档,网页中所有的节点都是他的字节点
2.元素节点:html文档中的html标签

html中的各种标签都是元素节点(element),这也是我们最常用的一个节点
3.属性节点:元素的属性

attribute表示标签中的一个属性,属性节点,属性节点不是元素子节点,而是元素

节点的一部分,可通过元素节点获得指定属性节点
|4.文本节点:html标签中的文本内容

Text:表示的是html以外的文本内容,任意非html的文本都是文本节点,文本节点

一般是作为元素节点的子节点保存的,获取文本节点时,一般要获取元素节点,再

通过元素节点获取文本节点

2.文档操作

文档对象代表你的网页,若你希望放问html的任何元素,从访问document对象开始

查找html元素:

你好

我好

<button id="btn1" class="cbtn">你好

// 通过id查询元素

var BTN= document.getElementById("btn1")

console.log(BTN);

// 通过标签名称查找元素

var cbt=document.getElementsByTagName("button")

console.log(cbt);

// 通过类名查找元素

var cb=document.getElementsByClassName("cbtn")

console.log(cb);

//通过选择器查找元素

var b1=document.querySelector("button")//标签

var b2=document.querySelector(".cbtn")//类

var b3=document.querySelector("#btn1")//Id

console.log(b1);

// 通过css选择器来选择多个元素

var list= document.querySelectorAll(".list li")

console.log(list);

获取html的值:

<button style="color: green;" value="123" id="bt">按钮

//获取按钮文本内容元素节点.innertext

var btn=document.getElementById("bt")

var text=btn.innerText

console.log(text);

//获取html元素的innerhtml 元素节点.innerHTML

var h=btn.innerHTML

console.log(h);

//元素属性值元素节点.属性元素节点.getattribute(attribute)

var i=btn.value

console.log(i);

//获取元素的行内样式

var s=btn.style.color

console.log(s)

案例举例:

#myDiv { width: 200px; height: 200px; background-color: red; }

<button onclick="changeColor()">点击切换颜色

var div = document.getElementById("myDiv");

function changeColor() {

if (div.style.backgroundColor == "red") {

div.style.backgroundColor = "green";

} else {

div.style.backgroundColor = "red";

}

3.修改节点的内容除了innerhtml和innertext之外还有insertadjacenttext和insertadjacenthtml 可以在指定位置插入内容

Object.insertadjacenttext(where,text)

Object.insertadjacenthtml(where,html)
where:

Beforebegegin:开始标签前面

Beforeend:结束标签前面

Afterbegin:开始标签的后面

Afterend:结束标签的后面

<p class="p1">你好

var p1=document.querySelector(".p1")

p1.insertAdjacentText("beforeend","我好")

4.修改html元素

创建html元素节点: document.creatElement(element)

html文本节点:document.createTextNode()

//创建html元素节点

var ul = document.createElement("ul")

var li = document.createElement("li")

//创建html文本节点

//添加html元素元素节点.appendchild(element)

var text=document.createTextNode("nihao")

li.appendChild(text)

ul.appendChild(li)

document.getElementsByTagName("body")[0].appendChild(ul)

document.createelement(element)创建html元素节点

document.createattributr(attribute)创建html属性节点

document.createtextnode(text)创建html文本节点

元素节点.removechild(element)删除html元素

元素节点.appendchild(element)添加idhtml元素

元素节点.replacechild(element)替换html元素

元素节点.insertbefore(element)在指定子节点前面插入新子节点

// 给i添加属性

i.setAttribute("id","zer0")

// 在ul中插入i 在two的前面

ul.insertBefore(i,two)

js文档知识 ｜ 青训营

js文档知识｜青训营