共计 1744 个字符，预计需要花费 5 分钟才能阅读完成。
什么是 DOM?
DOM（文档对象模型）是针对 HTML 和 XML 文档的一个 API（应用程序编程接口）。节点层次
<html>
<head>
<title>Sample Page</title>
</head>
<body>
<p>Hello World!</p>
</body>
</html>
操纵节点
- 添加一个节点：appendChild() 和 insertBefore()
- 替换节点：replaceChild()
- 移除节点：removeChild()
查找元素
- document.getElementById() 返回对拥有指定 ID 的第一个对象的引用
- document.getElementsByTayName() 返回一个对所有 tag 标签引用的集合
- document.getElementsByName() 返回 name 特性的所有元素，返回一个 NodeList
- document.getElementsByClassName() 获取类名，如果有多个相同类名，最终得到 NodeList
- document.querySelector() 方法接收一个 CSS 选择符，返回与该模式匹配的第一个元素，如果没有找到匹配的元素，返回 null
- document.querySelectorAll() 可以对多个元素进行匹配和操作，并把它们存储在 NodeList
设置元素样式
- 语法：ele.style.styleName = styleValue
- 功能：设置 ele 元素的 css 样式
- 例子：box.style.color = “#fff”;
- 注：属性是减号连接的复合形式时，必需要转换为驼峰形式
DOM 的操作特性
- 获取元素的属性：ele.getAttribute(“attribute”)
- 设置元素的属性：ele.setAttribute(“attribute”,value)
- 删除元素的属性：ele.removeAttribute(“attribute”)
创建元素
- document.createElement()
- document.body.appendChild() 将新创建的元素添加到文档 body 元素中
<ul>
<li>1</li>
<li>2</li>
</ul>
<script>
var list = document.querySelector("ul");
var item = document.createElement("li");
item.innerHTML= "3";
list.appendChild(item);
</script>innerHTML
- 语法：ele.innerHTML = “html”;
- 功能：获取和设置标签之间的文本和 HTML 内容
- innerHTML 是 Element 对象的属性；
textContent 与 innerText
- 设置和获得标签的文本内容
- textContent 是 Node 对象的属性；
- innerText 是 HTMLElement 对象的属性；
注：innerHTML、textContent 与 innerText 之间的区别，有兴趣的可以 Google 一下
className
- 为元素指定的 CSS 类，ele.className = “header”;
-
小缺陷：设置元素 class 属性时，会替换元素原有的 class 的属性。当追加元素 class 属性时，可以这样操作：
<style> .box1{color: red;} </style> <div class="box">Hello World</div> <script> var box = document.querySelector(".box"); function addClass(element,value) {if (!element.className) {element.className = value;} else { newClassName = element.className; newClassName += " "; // 这句代码追加的类名分开 newClassName += value; element.className = newClassName; } } addClass(box,"box1"); </script>
自定义数据属性
- HTML5 规定可以为元素添加非标准的属性，但要添加前缀 data-，目的是为元素提供与渲染无关的信息，或者提供语义信息。
不好的地方，请多多指教
正文完