DOM节点的应用
学习总结
1. 什么是 DOM
DOM 是 Document Object Model 文档对象模型的缩写。根据 W3C DOM 规范,DOM 是一种与浏览器,平台,语言无关的接口,可动态地修改 XML 和 HTML。
D:文档 – HTML文档 或 XML 文档
O:对象 – document 对象的属性和方法
M:模型
2. HTMLDOM
1)DOM 是将 HTML 文档表达为树结构, 定义了访问和操作 HTML 文档的标准方法;
2)DOM 树:节点(node)的层次。文档节点(document)、元素节点、属性节点、文本节点;
3)DOM 把一个文档表示为一棵家谱树(父,子,兄弟)。
3. 元素获取
元素获取方式:
-
通过元素 Id
getElementById,返回拥有指定 id 的第一个元素,如果不存在则返回 null; -
通过标签名字
getElementsByTagName,返回一个包括所有给定标签名称的元素集合,如果没有匹配的元素,返回一个空集; -
通过 class 名字
getElementsByClassName,返回一个包含所有指定class名称的元素集合,可以在任意元素上调用该方法; -
通过 name 属性
getElementsByName,返回一个包含所有指定 name 属性的元素集合,可以在任意元素上调用该方法。
元素节点的属性操作
- 操作标准属性
1)获取元素值
元素对象[“属性名”]
元素对象.属性名
元素对象.getAttribute(“属性名”);
2)设置属性值
元素对象[”属性名”] = 值
元素对象.属性名 = 值
元素对象.setAttribute(“属性名”, 值)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--页面加载完毕事件(当页面加载完毕以后,才执行函数体的代码)-->
<script type="text/javascript">
window.onload = function() {
// 获取 div 标签(根据标签中 id 属性)
// var p = document.getElementById("p1");
var divEle = document.getElementById("div1");
var divEle2 = document.getElementsByTagName("div");
var divEle3 = document.getElementsByName("div");
// 获取、设置属性的值
// 1、通过 元素对象.属性名
console.log(divEle.id);
divEle.id = "div";
// 通过点的方式如果属性是class,需要使用 className 名字
console.log(divEle.className);
divEle.className = "熊大";
// 如果属性中有短杠的符号组合,在调用的时候需要去掉短杠,然后使用驼峰命名的方式
console.log(divEle.style.backgroundColor);
divEle.style.backgroundColor=