DOM初步了解

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

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

不好的地方，请多多指教

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

查看所有标签

猜你喜欢:

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

码农书籍

R语言编程艺术

（美）Norman Matloff / 陈堰平、邱怡轩、潘岚锋等 / 机械工业出版社 / 2013-5 / 69.00

【编辑推荐】这本书涵盖了R语言编程的诸多方面，尤其在面向对象编程、程序调试、提升程序运行速度以及并行计算等方面，填补了同类图书的空白。关于程序调试的章节更是作者多年经验的总结。不管是初学者还是有一定编程经验的读者，阅读这本书都会有所收获。 ——统计之都【内容简介】 R语言是世界上最流行的用于数据处理和统计分析的脚本语言。考古学家用它来跟踪古代文明的传播，医药公司用它来探......一起来看看《R语言编程艺术》这本书的介绍吧!

码农工具

DOM初步了解

什么是DOM?

节点层次

操纵节点

查找元素

设置元素样式

DOM的操作特性

创建元素

innerHTML

textContent 与 innerText

className

自定义数据属性

R语言编程艺术

图片转BASE64编码

XML 在线格式化

Markdown 在线编辑器