DOM初步了解

时间 2019-12-05

标签 dom 初步了解栏目 HTML 繁體版

原文原文链接

什么是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属性时，能够这样操做：css

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

很差的地方，请多多指教