DOM初步了解
什么是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属性时,可以这样操作:
<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-,目的是为元素提供与渲染无关的信息,或者提供语义信息。
不好的地方,请多多指教
相关推荐
chensen 2020-11-14
lwnylslwnyls 2020-11-06
ATenhong 2020-10-15
yanzhelee 2020-10-13
佛系程序员J 2020-10-10
guojin0 2020-10-08
佛系程序员J 2020-10-08
bluewelkin 2020-09-16
wwzaqw 2020-09-04
zhongdaowendao 2020-09-02
favouriter 2020-08-18
奎因amp华洛 2020-08-15
一青年 2020-08-13
千锋 2020-08-10
nangongyanya 2020-08-09
dongxurr 2020-08-08
明天你好 2020-08-03
kyelu 2020-08-03
Ashes 2020-08-03