DOM初步了解

jiezi

6 年前

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”;
注：属性是减号连接的复合形式时，必需要转换为驼峰形式

获取元素的属性：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>

语法：ele.innerHTML = “html”;
功能：获取和设置标签之间的文本和 HTML 内容
innerHTML 是 Element 对象的属性；

设置和获得标签的文本内容
textContent 是 Node 对象的属性；
innerText 是 HTMLElement 对象的属性；

注：innerHTML、textContent 与 innerText 之间的区别，有兴趣的可以 Google 一下

为元素指定的 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-，目的是为元素提供与渲染无关的信息，或者提供语义信息。

不好的地方，请多多指教

DOM初步了解

什么是 DOM?

节点层次

操纵节点

查找元素

设置元素样式

DOM 的操作特性

创建元素

innerHTML

textContent 与 innerText

className

自定义数据属性