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

不好的地方，请多多指教

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

查看所有标签

猜你喜欢:

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

码农书籍

啊哈!算法

啊哈磊 / 人民邮电出版社 / 2014-6-1 / 45.00元

这不过是一本有趣的算法书而已。和别的算法书比较，如果硬要说它有什么特点的话，那就是你能看懂它。这是一本充满智慧和趣味的算法入门书。没有枯燥的描述，没有难懂的公式，一切以实际应用为出发点，通过幽默的语言配以可爱的插图来讲解算法。你更像是在阅读一个个轻松的小故事或是在玩一把趣味解谜游戏，在轻松愉悦中便掌握算法精髓，感受算法之美。本书中涉及到的数据结构有栈、队列、链表、树......一起来看看《啊哈!算法》这本书的介绍吧!

码农工具

DOM初步了解

什么是DOM?

节点层次

操纵节点

查找元素

设置元素样式

DOM的操作特性

创建元素

innerHTML

textContent 与 innerText

className

自定义数据属性

啊哈!算法

XML、JSON 在线转换

正则表达式在线测试

HEX HSV 转换工具