内容简介：注：innerHTML、textContent 与 innerText之间的区别，有兴趣的可以 Google 一下不好的地方，请多多指教
什么是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-，目的是为元素提供与渲染无关的信息，或者提供语义信息。
不好的地方，请多多指教
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持 码农网
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
