DOM初步了解

什么是DOM?

DOM(文档对象模型)是针对HTML和XML文档的一个API(应用程序编程接口)。

节点层次

<html>
   <head>
       <title>Sample Page</title>
   </head>
   <body>
       <p>Hello World!</p>
   </body>
</html>

DOM初步了解

操纵节点

  • 添加一个节点: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-,目的是为元素提供与渲染无关的信息,或者提供语义信息。
不好的地方,请多多指教

相关推荐