DOM(Document Object Model) 文档对象模型。提供系列的属性和方法,让我们可以在js中操作页面中的元素。

# 1、获取dom元素的属性和方法

  • document.getElementById(id)

  • [context].getElementByTagName(tagname)

  • [context].getElementByClassName(classname)IE6-8下不兼容。

  • document.getElementByName(name)IE浏览器中只对表单元素的name有作用

  • [context].querySelector(selector)IE6-8下不兼容

  • [context].querySelectorAll(selector)IE6-8下不兼容

  • document.documentElement =>html元素

  • document.head

  • document.body

  • childNodes 获取所有子节点

  • children 获取所欲元素子节点 =>IE6-8中会把注释节点当做元素节点获取

  • parentNode

  • firstChild/firstElementChild

  • lastChild/lastElemntChild

  • previousSibling/previousElementSibling nextSibling/nextElementSibling //=>所有带Element的在IE6-8下都不兼容

# 2、DOM的增删改查

document.createElement(tagname)
document.createTextNode(text content)
innerHTML/innerText 
[parent].appendChild(newELe)
[parent].insertBefore(newEle,ele)
[ele].cloneNode(true/false);
[parent].removeChild(ele)
//设置自定义属性(property)
[ele].xx=xxx;
//删除自定义属性
delete [ele].xx
//设置元素属性
[ele].setAttribute("xxx","xxx");
[ele].getAttribute("xxx");
[ele].removeAttribute("xxx")
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

# 3、获取元素样式和操作样式

//=>修改元素样式
[ele].style.xxx=xxx;//修改或者设置行内样式
[ele].className=xxx;
//=>获取元素的样式
[ele].style.xxx
1
2
3
4
5
Last Updated: 11/17/2020, 12:36:11 AM