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);