JS -- DOM（文档对象模型）
认识DOM（文档对象模型）
DOM（Document Object Model）：定义访问和处理HTML文档的标准方法。
DOM 将HTML文档呈现为带有元素、属性和文本的树结构（节点树）。
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>DOM简介</title> </head> <body> <h2> <a href="http://www.baidu.com">JavaScript DOM</a> </h2> <p>哒哒哒</p> <ul> <li>JavaScript</li> <li>DOM简介</li> </ul> </body> </html>
将HTML代码分解为DOM节点层次图：
HTML文档可以说由节点构成的集合，三种常见的DOM节点:
1. 元素节点：上图中<html>、<body>、<p>等都是元素节点，即标签。
2. 文本节点：向用户展示的内容，如<li>...</li>中的JavaScript、DOM、CSS等文本。
3. 属性节点：元素属性，如<a>标签的链接属性href="http://www.baidu.com"。
一、通过ID获取元素
语法：
document.getElementById("idName");
结果:null或[object HTMLParagraphElement]
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>DOM简介</title> </head> <body> <h2> <a href="http://www.baidu.com">JavaScript DOM</a> </h2> <!--设置P标签的id--> <p id="con">哒哒哒</p> <script type="text/javascript"> //通过ID获取元素 var mychar=document.getElementById("con") document.write("输出："+mychar) </script> </body> </html>
运行结果：
JavaScript DOM
哒哒哒
输出：[object HTMLParagraphElement]
二、通过innerHTML属性修改文本节点
innerHTML 属性用于获取或替换 HTML 元素的内容。
语法：
Object.innerHTML="newtext"
其中Object为获取的元素对象，如通过document.getElementById获取的元素。
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>DOM简介</title> </head> <body> <h2> <a href="http://www.baidu.com">JavaScript DOM</a> </h2> <!--设置P标签的id--> <p id="con">哒哒哒哒哒哒</p> <script type="text/javascript"> //通过ID获取元素 var mychar=document.getElementById("con") document.write("修改前："+mychar.innerHTML+"<br>") //利用<br>实现换行 mychar.innerHTML="尽管科琳双胞胎作为班长" //通过innerHTML属性来修改元素内容 document.write("修改后："+mychar.innerHTML) </script> </body> </html>
运行效果：
JavaScript DOM
尽管科琳双胞胎作为班长
修改前：哒哒哒哒哒哒
修改后：尽管科琳双胞胎作为班长
三、控制类名（className属性）
className 属性设置或返回元素的class 属性。
语法：
object.className = classname
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>DOM简介</title> <style type="text/css"> .one{ font-size: 20px; color: red; } .two{ font-size: 30px; color: blue; } .three{ font-size: 40px; color: green; } </style> </head> <body> <h2> <a href="http://www.baidu.com">JavaScript DOM</a> </h2> <!--设置P标签的id--> <p id="con1" class="one">哒哒哒哒哒</p> <p id="con2" class="two">哈哈哈哈哈</p> <p id="con3" class="three">嘎嘎嘎嘎嘎</p> <input type="button" value="点击我，修改样式" onclick="modify()"> <script type="text/javascript"> var mychar=document.getElementById("con1") function modify(){ //通过.className属性，修改样式 mychar.className="three" } </script> </body> </html>
运行效果：
四、通过Object.style.property修改元素的样式
（1）文本属性
语法：
Object.style.property="new style"
常见样本属性表：
（2）显示或隐藏
语法：
Object.style.display=value
value取值:
| 值 | 描述 |
| none | 此元素将被隐藏 |
| block | 此元素将被显示 |
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>DOM简介</title> </head> <body> <h2> <a href="http://www.baidu.com">JavaScript DOM</a> </h2> <!--设置P标签的id--> <p id="con1">哒哒哒哒哒</p> <p id="con2">哈哈哈哈哈</p> <p id="con3">嘎嘎嘎嘎嘎</p> <script type="text/javascript"> //通过ID获取元素 var mychar1=document.getElementById("con1"); //通过Object.style.property修改元素的样式 mychar1.style.color="red"; mychar1.style.fontSize="20px"; //mychar1.style.background="blue"; //mychar1.style.width="300px"; //此处的width为背景的宽度 //隐藏ID为con2的元素 document.getElementById("con2").style.display="none" //显示ID为con3的元素 document.getElementById("con3").style.display="block" </script> </body> </html>
运行效果：
JavaScript DOM
哒哒哒哒哒
嘎嘎嘎嘎嘎
五、getElementsByName()方法
语法：
document.getElementsByName(name)
注意：
1. 因为文档中的 name 属性可能不唯一，所有 getElementsByName() 方法返回的是元素的数组，而不是一个元素。
2. 和数组类似也有length属性，可以和访问数组一样的方法来访问，从0开始。
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
function getnum(){
//通过document.getElementsByName()查找相同Name的标签
var mynode= document.getElementsByName("myt"); ;
alert(mynode.length);
}
</script>
</head>
<body>
<input name="myt" type="text" value="1">
<input name="myt" type="text" value="2">
<input name="myt" type="text" value="3">
<input name="myt" type="text" value="4">
<input name="myt" type="text" value="5">
<input name="myt" type="text" value="6">
<br />
<input type="button" onclick="getnum()" value="看看有几项？" />
</body>
</html>
运行效果：
区别getElementByID，getElementsByName，getElementsByTagName
<input type="checkbox" name="hobby" id="hobby1"> 音乐
其中：ID为“hobby1”，name为“hobby”，tagname为“input”。
参考：https://www.imooc.com
