HTML DOM

DOM：Document Object Model 文档对象模型，把html里面的各种数据当做对象进行操作

节点的概念

• DOM把所有的html都转换为节点
• 整个html文档，是一个节点：[object HTTMLDocument]
• 元素是节点：[object HTMLDivElement]
• 元素属性是节点：[object Attr]
• 元素内容是节点：[object Text]
• 注释也是节点：

获取节点

• 通过id获取元素节点：

var div1 = document.getElementbyId("d1")

• 通过标签名称获取元素节点：

var divs = document.getElementsByTagName("div")

• 通过类名获取元素节点：

var elements = document.getElementsByClassName

• 通过表单元素的name获取元素节点：

var elements = document.getElementsByName("userName")

• <script>应该代码写在HTML之后，否则获取的时候还没有加载对象

var div1 = documents.getElementById("d1");
var attrs = div1.attributes;
as[i].nodeName
as[i].nodeValue

• 获取内容节点：元素节点的childNodes[0]就是内容节点

var div1 = document.getElementById("d1");
var content = div1.childNodes[0];
content.nodeName
content.nodeValue

节点的属性

• nodeName
• nodeValue
• nodeType
• 修改元素的文本内容：

document.getElementById("d1").childNodes[0].nodeValue = "新内容"
document.getElementById("d1").innerHTML= "新内容"

• 获取元素上的属性值

getAttribute("test")
attributes["test"].nodeValue

DOM样式：一个元素节点的style属性即对应的css

• 隐藏和显示

var d = document.getElementById("d");
d.style.display = "none";

DOM事件

• 焦点事件：onfocus,onblur
• 鼠标事件：onmousedown，onmouseup
• 键盘事件：onkeydown(event),onkeypress(event)
• 点击事件：onclick,ondblclick
• 事件变化：onchange
• 提交事件：onsubmit
• 加载事件：onload
• 当前组件：出发事件的组件this
• 阻止事件的发生：onsubmit

DOM节点关系

• childNodes会包含文本节点
• children会排除文本节点

创建节点

• 创建元素节点：createElement

删除节点

• 删除元素节点：先获取父节点，然后removeChild
• 删除属性节点：先获取元素节点，然后removeAttribute

替换节点

• replaceChild：需要父节点，被替换的节点，新节点

插入节点

• 追加节点：
• 在前方插入节点：

常用场景

• 页面的数据验证