1. 简介
DOM(Document Object Mode)是一套web标准,地那一了访问HTML文档的一套属性、方法和事件
其本质:
网页 与 脚本语言 沟通的桥梁
脚本语言通过DOM对象来访问HTML页面,从而改变文档的结构、样式和内容。
当浏览器载入HTML文档时,他就会称谓document对象树。
2. DOM对象
(1)文档对象:整个HTML文档
(2)节点对象:所有的HTML元素都是元素节点
(3)属性对象:依附于元素节点,所有节点的属性都是节点
(4)文本对象:文本插入到HTML元素是文本节点
3. 查找元素
(1)元素的id属性
document.getElementsById(元素id值)
Id唯一,返回唯一元素
(2)元素的class属性
documenr.getElementsByClassName(元素class值)
返回值为一个元素列表
(3)元素的标签名
document.getElementsByTagName(标签名)
返回值为一个元素列表
(4)css选择器
查找一个元素:document.querySelector(css 表达式)
查找多个元素:document.querySelectorAll(css 表达式)
在css选择器中,#表示元素的id .表示元素的class属性
4. 获取和修改元素属性
(1)获取元素属性
document.getElementByXXX("").属性名
document.getElementByXXX("")。getAttribute(属性名)
(2)修改元素属性
document.getElementByXXX("").属性名 = 属性值
document.getElementByXXX("").setAttribute(属性名,属性值)
5. 获取和修改元素的内容
(1)获取元素内容
document.getElementByXXX("").innerHTML 包括HTML标签
document.getElementByXXX("").innerText 不包括标签,纯文本
(2)修改元素内容
document.getElementByXXX("").innerHTML = new HTML 包括HTML标签
document.getElementByXXX("").innerText = new Text 不包括标签,纯文本
6. 修改样式
document.getElementByXXX("").style.样式名=样式值