DOM

发表于 | 分类于

1.HTML DOM

DOM(文档对象模型)是针对HTML和XML文档的一个API。DOM描绘了一个层次化的节点树，允许开发人员添加、移除和修改页面的某一部分。
以下面的HTML代码为例:

1
2
3
4
5
6
7
8
9
<html>
<head>
	<title>Sample Page</title>
</head>
<body>
    <a href="">link</a>
	<p>Hello World!</p>
</body>
</html>

可以将这个简单的HTML文档表示为一个结构层次，如下图所示：

通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。

  • JavaScript能够改变页面中的所有 HTML 元素
  • JavaScript能够改变页面中的所有 HTML 属性
  • JavaScript能够改变页面中的所有 CSS 样式
  • JavaScript能够对页面中的所有事件做出反应

2.DOM 改变 HTML 内容

  1. 改变 HTML 输出流
    在 JavaScript 中，document.write() 可用于直接向 HTML 输出流写内容

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <!DOCTYPE html>
    <html>
    <body>

    <script>
    document.write(Date()); // Thu Nov 29 2018 16:16:59 GMT+0800 (中国标准时间)
    </script>

    </body>
    </html>

  2. 改变 HTML 内容

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <html>
    <body>

    <p id="p1">Hello World!</p>

    <script>
    document.getElementById("p1").innerHTML="New text!";
    </script>

    </body>
    </html>

  3. 改变 HTML 属性

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    <!DOCTYPE html>
    <html>
    <body>

    <img id="image" src="smiley.gif">

    <script>
    document.getElementById("image").src="landscape.jpg";
    </script>

    </body>
    </html>

3.DOM 改变 CSS

本例改变了 id=”id1” 的p元素的样式，当用户点击按钮时：

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html> 
<html> 
<body> 

<h1 id="id1">My Heading 1</h1>

<button type="button" 
onclick="document.getElementById('id1').style.color='red'"> 
Click Me!</button> 

</body> 
</html>

4.DOM 事件

下面例子是button元素的onclick事件。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<html>
<body>

<button id="myBtn">点这里,下面会出现一句话</button>
<p id="demo"></p>

<script>
document.getElementById("myBtn").onclick=function(){displayDate()};
function displayDate(){
	document.getElementById("demo").innerHTML="Hello World";
}
</script>

</body>
</html>

5.DOM EventListener

addEventListener() 方法用于向指定元素添加事件句柄，添加的事件句柄不会覆盖已存在的事件句柄，也就是可以向一个元素添加多个事件句柄。
可以使用 removeEventListener() 方法来移除事件的监听。

  1. 语法:
    1
    element.addEventListener(event, function, useCapture);
  • 第一个参数是事件的类型 (如 “click” 或 “mousedown”),注意不带”on”;
  • 第二个参数是事件触发后调用的函数。
  • 第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的.在冒泡中，内部元素的事件会先被触发，然后再触发外部元素。在捕获中，外部元素的事件会先被触发，然后才会触发内部元素的事件。
  1. 下面的例子给button添加了click事件。
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    <html>
    <body>

    <button id="myBtn">点我</button>
    <script>
    document.getElementById("myBtn").addEventListener("click", myFunction);
    function myFunction() {
        alert ("Hello World!");
    }
    </script>

    </body>
    </html>

所有的HTML DOM事件，参考W3C的： HTML DOM Event 对象参考手册

6.DOM 元素

  1. JavaScript HTML DOM 元素(节点)
    根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点：
  • 整个文档是一个文档节点
  • 每个 HTML 元素是元素节点
  • HTML 元素内的文本是文本节点
  • 每个 HTML 属性是属性节点
  • 注释是注释节点

在文档对象模型 (DOM) 中，每个节点都是一个对象。DOM 节点有三个重要的属性，分别是：

  • nodeName : 节点的名称
  • nodeValue ：节点的值
  • nodeType ：节点的类型

  1. 创建新的 HTML 元素
    如需向 HTML DOM 添加新元素，您必须首先创建该元素（元素节点），然后向一个已存在的元素追加该元素。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    <div id="div1">
    <p id="p1">This is a paragraph.</p>
    <p id="p2">This is another paragraph.</p>
    </div>

    <script>
    var para=document.createElement("p");
    var node=document.createTextNode("This is new.");
    para.appendChild(node);

    var element=document.getElementById("div1");
    element.appendChild(para);
    </script>

  2. 删除已有的HTML元素
    先找到要删除元素的父元素，然后从父元素删除这个元素。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <div id="div1">
    <p id="p1">This is a paragraph.</p>
    <p id="p2">This is another paragraph.</p>
    </div>

    <script>
    var parent=document.getElementById("div1");
    var child=document.getElementById("p1");
    parent.removeChild(child);
    </script>

参考网页：W3Cschool javascript教程