什么是 DOM?
DOM 定义了访问 HTML 和 XML 文档的标准
什么是 XML DOM?
XML DOM 定义了所有 XML 元素的对象和属性,以及访问它们的方法。
什么是 HTML DOM?
HTML DOM 定义了所有 HTML 元素的对象和属性,以及访问它们的方法。
HTML DOM 节点
<html>
<head>
<title>DOM 教程</title>
</head>
<body>
<h1>DOM 第一课</h1>
<p>Hello world!</p>
</body>
</html>
从上面的 HTML 中:
- <html> 节点没有父节点;它是根节点
- <head> 和 <body> 的父节点是 <html> 节点
- 文本节点 "Hello world!" 的父节点是 <p> 节点
并且:
- <html> 节点拥有两个子节点:<head> 和 <body>
- <head> 节点拥有一个子节点:<title> 节点
- <title> 节点也拥有一个子节点:文本节点 "DOM 教程"
- <h1> 和 <p> 节点是同胞节点,同时也是 <body> 的子节点
并且:
- <head> 元素是 <html> 元素的首个子节点
- <body> 元素是 <html> 元素的最后一个子节点
- <h1> 元素是 <body> 元素的首个子节点
- <p> 元素是 <body> 元素的最后一个子节点
HTML DOM常用方法
getElementById() 方法返回带有指定 ID 的元素
getAttribute() 返回指定的属性值
setAttribute() 把指定属性设置或修改为指定的值。
createAttribute() 创建属性节点。
appendChild(node) 插入新的子节点
appendChild() 把新的子节点添加到指定节点。
HTML DOM 属性
innerHTML 属性
例如:
<html>
<body>
<p id="intro">测试1</p>
<script>
var txt=document.getElementById("intro").innerHTML;
document.write(txt);
</script>
</body>
</html>
getElementById 是一个方法,而 innerHTML 是属性。
innerHTML 属性可用于获取或改变任意 HTML 元素
访问 HTML 元素(节点)
访问 HTML 元素等同于访问节点
能够以下不同的方式来访问 HTML 元素:
- 通过使用 getElementById() 方法
- 通过使用 getElementsByTagName() 方法
- 通过使用 getElementsByClassName() 方法
1.getElementById() 方法
返回带有指定 ID 的元素:
document.getElementById("id");
2.getElementsByTagName() 方法
返回带有指定标签名的所有元素。
document.getElementsByTagName("p");
3.getElementsByClassName() 方法
查找带有相同类名的所有 HTML 元素
document.getElementsByClassName("userName");
HTML DOM - 修改
- 改变 HTML 内容
- 改变 CSS 样式
- 改变 HTML 属性
- 创建新的 HTML 元素
- 删除已有的 HTML 元素
创建 HTML 内容
改变元素内容使用 innerHTML 属性。
document.getElementById("name").innerHTML="张三";
改变 HTML 样式
通过 HTML DOM获取对象
document.getElementById("name").style.color="red";
创建新的 HTML 元素
首先必须创建该元素(元素节点),然后把它追加到已有的元素上。
var para=document.createElement("p");
var node=document.createTextNode("new p");
para.appendChild(node);
var element=document.getElementById("div1");
element.appendChild(para);
HTML DOM - 元素
添加、删除和替换 HTML 元素。
appendChild(),:必须创建该元素,然后把它追加到已有的元素上
removeChild(); 删除 HTML 元素,必须清楚该元素的父元素
replaceChild() ; 替换HTML元素,必须清楚该元素的父元素
HTML DOM - 事件
onchange 事件
onclick事件
HTML DOM 允许使用 JavaScript 向 HTML 元素分配事件:
document.getElementById("btn").οnclick=function(){onlickName()};
在上面的例子中, onlickName的函数被分配给了 id=btn" 的 HTML 元素。
当按钮被点击时,将执行函数。