Zohar's blog

Javascript - DOM

JavascriptjavascriptDOMDocument Object Model

当网页被加载时,浏览器会为页面上所有对象创建一个树形结构模型,用来管理页面上的所有对象,称之为 DOM(Document Object Model)

DOM 作用

DOM tree

通过借助 DOM, JS 可以实现:

  • 操作页面中的所有 对象

  • 改变页面中的所有 HTML 元素和属性

  • 改变页面中的所有 CSS 样式

  • 设置页面中的所有 事件

查找文档对象

要想对文档中的对象进行操作,第一步就是对待操作对象进行定位,有以下三种方式:

  1. 通过 id 对单个对象进行的绝对定位

     var x = document.getElementById("comment");
    
  2. 通过 class 对多个同类对象进行定位

     var x = document.getElementByClassName("comment");
    
  3. 通过 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);