DOM初步了解

栏目: CSS · 发布时间: 6年前

内容简介：注：innerHTML、textContent 与 innerText之间的区别，有兴趣的可以 Google 一下不好的地方，请多多指教

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

不好的地方，请多多指教

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍

Data Mining

Jiawei Han、Micheline Kamber、Jian Pei / Morgan Kaufmann / 2011-7-6 / USD 74.95

The increasing volume of data in modern business and science calls for more complex and sophisticated tools. Although advances in data mining technology have made extensive data collection much easier......一起来看看《Data Mining》这本书的介绍吧!

码农工具

Base64 编码/解码

RGB HSV 转换

RGB HSV 互转工具

HSV CMYK 转换工具

HSV CMYK互换工具