DOM 作用

通过借助 DOM, JS 可以实现:
-
操作页面中的所有 对象
-
改变页面中的所有 HTML 元素和属性
-
改变页面中的所有 CSS 样式
-
设置页面中的所有 事件
查找文档对象
要想对文档中的对象进行操作,第一步就是对待操作对象进行定位,有以下三种方式:
-
通过 id 对单个对象进行的绝对定位
var x = document.getElementById("comment");
-
通过 class 对多个同类对象进行定位
var x = document.getElementByClassName("comment");
-
通过 label 对多个相同标签的对象进行定位
var x = document.getElementByTagName("pre");
通过 getElementByTagName 将返回一个 HTMLCollection 对象,通过下标访问元素,拥有 length 属性,但 Collection 并非一个数组
var collections = document.getElementsByTagName("p"); var i; for (i = 0; i < collections.length; i++) { collections[i].style.backgroundColor = "red"; }
操作 DOM 节点
即对文档中的所有对象元素进行操作,包括增删改:
增加
-
向后追加
appendChild()
:<div id="append"> <p id="p11">This is a paragraph.</p> <p id="p12">This is another paragraph.</p> </div> <script> var para = document.createElement("newp1"); // 生成标签节点 var node = document.createTextNode("This is a new paragraph."); // 生成文本节点 para.appendChild(node); // 将文本节点设置为标签节点子节点 var element = document.getElementById("append"); element.appendChild(para); // 将标签节点设置为 append 的子节点 </script>
This is a paragraph.
This is another paragraph.
-
向前插入
insertBefore()
:<div id="insert"> <p id="p21">This is a paragraph.</p> <p id="p22">This is another paragraph.</p> </div> <script> var para = document.createElement("newp2"); var node = document.createTextNode("This is a new paragraph."); para.appendChild(node); var element = document.getElementById("insert"); var child = document.getElementById("p21"); element.insertBefore(para, child); </script>
This is a paragraph.
This is another paragraph.
删除
<div id="delete">
<p id="p31">This is a paragraph.</p>
<p id="p32">This is another paragraph.</p>
</div>
<script>
var parent = document.getElementById("delete1");
var child = document.getElementById("p31");
parent.removeChild(child);
</script>
This is a paragraph.
This is another paragraph.
替换
<div id="replace">
<p id="p41">This is a paragraph.</p>
<p id="p42">This is another paragraph.</p>
</div>
<script>
var para = document.createElement("newp4");
var node = document.createTextNode("This is a new paragraph.");
para.appendChild(node);
var parent = document.getElementById("replace");
var child = document.getElementById("p41");
parent.replaceChild(para, child);
</script>
This is a paragraph.
This is another paragraph.
改变 HTML
输出流
JavaScript 可以设置输出流动态地输出内容
<script>
document.write(Date());
</script>
改变内容
<p id="changeContent">Hello World!</p>
<script>
document.getElementById("changeContent").innerHTML="New Text!";
</script>
Hello World!
改变属性
<img id="image" src="https://www.baidu.com/img/bd_logo1.png?where=super">
<script>
document.getElementById("image").src="/favicon.ico";
</script>

改变 CSS
<p id="changCSS1" style="text-align:center;">Hello World!</p>
<p id="changCSS2" style="text-align:center;">Hello World!</p>
<script>
document.getElementById("changCSS2").style.color="#b8e986";
document.getElementById("changCSS2").style.fontFamily="Arial";
document.getElementById("changCSS2").style.fontSize="larger";
</script>
Hello World!
Hello World!
设置事件
HTML 中监听事件
<p id="p_showtime1">What time is it now?</p>
<button onclick="displayDate1()" style="margin: 0px 0px 12px 0px">Click Here</button>
<p onmouseover="mOver(this)"
onmouseout="mOut(this)"
style="margin:6px auto;text-align:center;
background-color:#D94A38; width:120px; padding:40px 20px;">
Mouse Over Me
</p>
<script>
function displayDate1(){
document.getElementById("p_showtime1").innerHTML=Date();
}
function mOver(obj){
obj.innerHTML="Thank You"
}
function mOut(obj){
obj.innerHTML="Mouse Over Me"
}
</script>
What time is it now?
Mouse Over Me
JS 中监听事件
<p id="p_showtime2">What time is it now?</p>
<button id="btn_timmer" style="margin: 0px 0px 12px 0px">Click Here</button>
<script>
document.getElementById("btn_timmer").addEventListener("click", displayDate2);
function displayDate2() {
document.getElementById("p_showtime2").innerHTML = Date();
}
</script>
// OR
<script>
document.getElementById("btn_timmer").addEventListener("click", displayDate2() {document.getElementById("p_showtime2").innerHTML = Date();});
</script>
What time is it now?
事件冒泡与事件捕捉
通过设置 addEventListener(“movement”, function, [useCapture]) 中的可选参数来控制事件冒泡与捕捉,默认为冒泡
-
在 冒泡 中,内部元素的事件会先被触发,然后再触发外部元素
-
在 捕获 中,外部元素的事件会先被触发,然后才会触发内部元素的事件
<div id="div_bubble" style="background-color: #b8e986;border: 1px solid;padding: 25px;">
<p id="p_bubble" style="text-align:center">Click me, I'm bubble.</p>
</div><br>
<div id="div_capture" style="background-color: #b8e986;border: 1px solid;padding: 25px;">
<p id="p_capture" style="text-align:center">Click me, I'm capture.</p>
</div>
<script>
document.getElementById("p_bubble").addEventListener("click", function() {alert("You clicked P_Bubble!");}, false);
document.getElementById("div_bubble").addEventListener("click", function() {alert("You clicked Div_Bubble!");}, false);
document.getElementById("p_capture").addEventListener("click", function() {alert("You clicked P_Capture!");}, true);
document.getElementById("div_capture").addEventListener("click", function() {alert("You clicked Div_Capture!");}, true);
</script>
Click me, I'm bubble.
Click me, I'm capture.
移除事件
element.removeEventListener("movement", myFunction);