JS中DOM对象的使用
DOM对象的基础知识
演示案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>DOM对象</title>
</head>
<body>
<p id="p1">DOM树有很多类型的节点</p>
<p id="p2"><b>读写</b>节点</p>
<p id="p3"><b>增删</b>节点</p>
<div>
<img alt="" src="../images/01.jpg" id="i1">
</div>
<div>
<a href="https://blog.csdn.net/coder_boy_" id="a1">博客</a>
</div>
<script type="text/javascript">
console.log("-------1.读写节点----------")
//读取节点的类型
var p1 =document.getElementById("p1");
console.log(p1.nodeName);//节点名
//nodeType的12种类型
// NodeType
/* ELEMENT_NODE = 1; 元素节点
ATTRIBUTE_NODE = 2; 属性节点
TEXT_NODE = 3; 文本节点
CDATA_SECTION_NODE = 4; CDATA 区段
ENTITY_REFERENCE_NODE = 5; 实体引用元素
ENTITY_NODE = 6; 实体
PROCESSING_INSTRUCTION_NODE = 7; 表示处理指令
COMMENT_NODE = 8; 注释节点
DOCUMENT_NODE = 9; 最外层的Root element,包括所有其它节点
DOCUMENT_TYPE_NODE = 10; <!DOCTYPE………..>
DOCUMENT_FRAGMENT_NODE = 11; 文档碎片节点
NOTATION_NODE = 12; DTD 中声明的符号节点
*/
console.log(p1.nodeType);//节点类型--1
//读写节点的内容(<a>内容<a>)
//innerHTML:可以包含子标签
var p2 = document.getElementById("p2");
console.log(p2.innerHTML);
p2.innerHTML = "<u>读写</u>节点";
//innerText:不能包含子标签
var p3 = document.getElementById("p3");
console.log(p3.innerText);
p3.innerText = "<u>增删</u>节点";
//读写节点的属性（标准）
var img = document.getElementById("i1");
console.log(img.getAttribute("src"));
img.setAttribute("src","../images/02.jpg");
img.removeAttribute("src");
//读写节点的属性（简单）
//语法：节点.属性名
//特殊：节点.className
var a = document.getElementById("a1");
console.log(a.href);
a.href = "#";
</script>
</body>
</html>最终页面显示效果：
