DOM 节点分为三大类:元素节点、文本节点、属性节点。其中,元素节点又叫标签节点,指文档中的各种 HTML 标签;文本节点和属性节点为元素节点的两个子节点,分别表示标签中的文字和标签的属性。通过 getElement 系列方法,可以取到元素节点
1.获取元素节点
1)通过ID获取(getElementById)
2)通过name属性(getElementsByName)
3)通过标签名(getElementsByTagName)
4)通过类名(getElementsByClassName)
5)通过选择器获取一个元素(querySelector)
6)通过选择器获取一组元素(querySelectorAll)
注:getElementsByClassName和querySelectorAll返回的都是集合,元素可以通过索引(以0为起始位置)来访问
var p = document.querySelectorAll("p");
p[0].style.color="red"
2.操作文本节点
属性 | 含义 |
---|---|
tagName | tagName 属性返回元素的标签名,即获取节点的标签名 |
innerHTML | innerHTML 属性设置或返回表格行的开始和结束标签之间的 HTML |
innerText | innerText 属性用来定义对象所要输出的文本,即它可以用来设置或者获取节点内部的所有文字 |
注:innerHTML和innerText的区别
1)innerHTML 指的是从对象的起始位置到终止位置的全部内容,包括 HTML 标签,同时保留空格和换行。
2)innerText 指的是从起始位置到终止位置的内容,但它去除 HTML 标签,同时空格和换行也会去掉。
innerText 只适用于 IE 浏览器(现在也适应 Chrome 浏览器),而 innerHTML 是符合
W3C 标准的属性。因此,尽可能地使用 innerHTML,而少用 innerText
3.操作属性节点
3.1.查看属性节点
getAttribute("属性名")
3.2 设置属性节点
setAttribute() 方法添加指定的属性,并为其赋指定的值。如果这个指定的属性已存在,
则仅设置或更改属性值。基本语法如下:
setAttribute("属性名","属性值")
4.修改元素样式
1)className
使用 className 直接设置 class 类,为元素设置一个新的 class 名字
div.className="home"
2)style
使用 style 设置单个属性,为元素设置一个新的样式,注意属性名要使用小驼峰命名法则
div.style.backgroundColor="red"
div.style.display="none"
3)style.cssText
style.cssText 为元素同时修改多个样式。使用 style 或 style.cssText 可以设置多个样式属性
div.style = "background-color:red;color:yellow;"
// 推荐使用第二种;有输入提示
div.style.cssText = "background-color:red;color:yellow;"
5.案例:头部导航栏切换
<header>
<div> 联系人</div>
<div>问题</div>
<div>推荐</div>
</header>
<div class="content">
<div class="desc1">
联系人
</div>
<div class="desc2">
问题
</div>
<div class="desc2">
推荐
</div>
</div>
<script>
//获取元素节点,先获取父节点,在通过父节点获取子节点
var header = document.querySelector("header");
var content = document.querySelector(".content");
var desc = content.querySelectorAll("div");
var head = header.querySelectorAll("div");
for (var i = 0; i < desc.length; i++) {
//设置属性及其属性值
head[i].setAttribute("index", i);
head[i].addEventListener("click", function () {
//排他
for (var j = 0; j < desc.length; j++) {
desc[j].style.display = "none";
//修改样式
head[j].style.cssText = "background-color:;font-size:20px"
}
this.style.cssText = "background-color:#e9e9e9;font-size:22px"
//获取index属性的属性值
var index = this.getAttribute("index");
desc[index].style.display = "block";
})
}
</script>
点击切换
6.获取层次节点
文档中所有节点相互之间都有关系,包括父子关系、同胞关系。例如,每个节点都有childNodes 属性,保存着一个 NodeList 对象。NodeList 是一种类数组的对象,可以使用
childeNode[0],childNode.item(1)来访问,同时拥有 length 属性,但并不是 Array 实例。
6.1 父级节点
node.parentNode
注:1.parentNode属性可返回某节点的父节点,注意是最近的一个父节点
2.如果指定的节点没有父节点则返回null
6.2 子节点
6.2.1 childNodes/children
//子节点 childNodes 所有的子节点 包含元素节点 文本节点等等,结果为数组
parentNode.childNodes
//children 获取所有的子元素节点,结果为数组。也是·我们实际开发常用的
parentNode.children
6.2.2 firstChild / firstElementChild/ lastChild / lastElementChild
-
firstChild(lastChild): 获取元素的第一个(最后一个)子节点,包括按 Enter 键换行等文本节点;
-
firstElementChild(lastElementChild):获取元素的第一个(最后一个)元素子节点,不包括按 Enter 键换行等文本节点;如果没有元素子节点,则返回 null
6.3 兄弟节点
-
nextSibling(previousSibling ) 下一个(前一个)兄弟节点 包括文本节点或者元素节点等等
-
nextElementSibling( previousElementSibling) 得到下一个兄弟元素节点
7.操作元素节点
7.1 创建新节点
-
createElement(“标签名”)
创建一个新的节点,需要配合 setAttribute()方法给新节点设置相关属性。 -
appendChild(“节点名”)
要创建新的 HTML 元素 (节点)需要先创建一个元素,然后在已存在的元素中添加它
<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另外一个段落。</p>
</div>
<script>
//创建新的元素
var para = document.createElement("p");
var node = document.createTextNode("这是一个新的段落。");
para.appendChild(node);
//查找已存在的元素
var element = document.getElementById("div1");
//添加到已存在的元素中
element.appendChild(para);
</script>
- insertBefore(新节点名,目标节点名)
以上的实例我们使用了 appendChild() 方法,它用于添加新元素到尾部。
如果我们需要将新元素添加到开始位置,可以使用 insertBefore() 方法:
其他动态创建元素的方式
- document.write()
<script>
document.write("<p>hello</P>")
</script>
- element.innerHTML()
<script>
element.innerHTML("<p>hello</P>")
</script>
三种动态创建元素的区别
7.2 删除已存在的元素 removeChild
<script>
var parent = document.getElementById("div1");
var child = document.getElementById("p1");
parent.removeChild(child);
</script>
7.3 替换 HTML 元素 - replaceChild(新节点,被替换节点)
<script>
parent.replaceChild(para, child);
//para为要替换的新元素,child为要替换的元素
</script>
7.4 克隆元素 cloneNode(true/false)
true 表示复制当前节点及所有子节点,false 表示只复制当前节
点,不复制子节点(默认)
<script>
var last=img[0].cloneNode(true);//true为深度克隆
container.appendChild(last);//将克隆的元素加入
</script>
注:
1)浅拷贝是把被拷贝的对象复杂数据类型中的地址拷贝给目标对象,修改目标对象会影响被拷贝对象。
2)深拷贝,前面加true, 完全克隆(拷贝的对象,而不是地址),修改目标对象不会影响被拷贝对象