DOM以及常见操作

什么是DOM?
DOM是HTML文档对象模型（HTML）定义的一套标准方法，用来访问和操作HTML文档。
DOM是以树状结构组织HTML文档的，根据DOM,HTML每个标签或元素都是一个节点

整个文档是一个文档节点
每个HTML标签都是一个元素节点
包含在HTML元素中的文本都是文本节点
每一个HTML属性都是一个属性节点
注释属于注释节点

在这里插入图片描述
当网页被加载时，浏览器会自动创建页面的文档对象模型（DOM）,构造了文档对象树，通过可编程的对象模型，JavaScript就可以动态的控制或者说操作创建HTML文档

改变页面中的HTML元素
改变页面中的HTML属性
改变页面中的CSS样式
对页面中的事件作出反应

DOM: Core DOM ,XML DOM 和 HTML DOM 三部分组成。

查找HTML元素

通过id查找HTML元素。用方法：document.getElementById(id_name);
通过标签名查找HTML元素。用方法：getElementsByTagName(tag_name);
通过类名查找 HTML 元素getElementsByClassName(class_name)

获取子元素&兄弟元素&父元素

element.childNodes: 获取指定元素的子节点,包括文本节点、元素节点等
element.children: 获取指定元素的子元素,只会获取元素节点。
element.nextSibling: 获取指定元素的下一个兄弟节点
element.nextElementSibling: 获取指定元素的下一个兄弟元素
element.previousSibling: 获取指定元素的上一个兄弟节点
element.previousElementSibling: 获取指定元素的上一个兄弟元素
element.parentNode: 获取元素的父节点,父节点肯定是一个元素

获取第一&最后一个子元素

element.firstChild: 获取指定元素下面的第一个子节点
element.firstElementChild: 获取指定元素下面的第一个子元素
element.lastChild: 获取指定元素下面的最后一个子节点
element.lastElementChild: 获取指定元素下面的最后一个子元素

节点操作

克隆节点 - cloneNode()

参数:布尔值,
true代表深层克隆,把当前节点和内部所有节点都复制一份
false代表浅层克隆,只复制当前节点

添加节点 - appendChild()

father.appendChild(son)

插入节点 - insertBefore()

father.inserBefore(son1_new,son2_old): 将son1插入到father节点下的son2前面

移除节点 - removeChild()

father.removeChild(son): 将father下的son节点移除

创建结构

document.write() 
特点:只能被document调用,而且会覆盖页面上原有内容

element.innerHtml 
特点:往页面添加html标签,可以限定范围

document.createElement() 
特点:动态创建标签,添加到页面需要配合appendChild使用

标签的自定义属性操作
设置标签属性: setAttribute()

box.setAttribute("id","aaa");// 有规定的属性可以设置 
box.setAttribute("bbb","ccc");// 没有规定的属性也可以设置

获取标签属性:getAttribute()

box.getAttribute("id");// 有规定的可以获取 
box.getAttribute("aaa"); // 没有规定的也可以获取

移除标签属性:removeAttribute()

box.removeAttribute("id"); // 有规定的可以删除 
box.removeAttribute("aaa"); // 没有规定的也可以删除

示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
   function hh(){
	   var hText=document.getElementById("fruit").getAttribute("src");
	   alert("图片的路径是："+hText);
   }
   function check(){
	   var favor=document.getElementsByName("enjoy");
	   var like="你喜欢的水果是：";
	   for(var i=0;i<favor.length;i++){
		   if(favor[i].checked==true){
			   like+="\n"+favor[i].getAttribute("value");
		   }
		   
	   }
	   alert(like);
   }
   function change(){
	   var imgs=document.getElementsByTagName("img");
	   imgs[0].serAttribute("src","images/orange.jpg");
   }
   
   
   
</script>
</head>
<body>
<img src="images/fruit.jpg" alt="水果图片" id="fruit"/>
<h1 id="love">选择你喜欢的水果</h1>
<input name="enjoy" type="checkbox" value="apple"/>苹果
<input name="enjoy" type="checkbox" value="banana"/>香蕉
<input name="enjoy" type="checkbox" value="grape"/>葡萄
<input name="enjoy" type="checkbox" value="pear"/>梨
<input name="enjoy" type="checkbox" value="watermelon"/>西瓜

<br/><input name="btn" type="button" value="显示图片路径" onclick="hh()"/>
<br/><input name="btn" type="button" value="喜欢的水果" onclick="check()"/>
<br/><input name="btn" type="button" value="改变图片" onclick="change()"/>
</body>
</html>

在这里插入图片描述

改变HTML CSS样式
CSS在页面中应用非常频繁，使用这些样式可以实现页面中不同样式的特效，但是这些特效都是静态的，不能随鼠标或键盘实现动态的改变。比如购物时，鼠标移动到指定商品会出现样式上的变化
那么如何实现CSS样式变化呢？

一是使用样式的style属性，二是使用样式的className属性。
在HTML DOM 中，style是一个对象，代表一个单独的样式声明，可从应用样式的文档或元素访问style对象，语法如下：

document.getElementById("  "),style.样式属性=“值”；

但是要注意，JavaScript使用CSS样式和在HTML中使用CSS 会有些不同，比如属性，font-size在HTML中可以使用，JavaScript不行，因为**“ -”**符号在JavaScript中是减号，在JavaScript中应该是fontSize

在css中有样式.example。代码如下：

.example {
color: #fff;
font-size 1em;
text-align: right;
}

要用JavaScript动态的应用到网页上，可以使用如下类似的代码：

function preparePage() {
//当mainContent元素被点击，mainContent的样式将会改变
document.getElementById("mainContent").onclick = function() {
//检查当前mainContent的样式，若是example，则将样式取消。
//取消样式直接将className属性赋值为空字符串””就行。
//若mainContent的样式不是example，则应用example样式。
if( document.getElementById("mainContent").className == "example") {
document.getElementById("mainContent").className = "";
} else {
document.getElementById("mainContent").className = "example";
}
};
}
window.onload = function() {
preparePage();
}

猜你喜欢