2020-06-08

DOM文档对象模型(处理页面的接口)

DOM树(文档)

根元素 元素 节点(标签，属性，文本，注释)

获取元素

根据ID 标签名 H5新增 特殊元素获取 DOM返回的都是对象
1 document.getElementById(“itme”)
2 document.getElementsByTagName(“div”)标签名的集合
可用for遍历
#element.getElementsByTagName()

• 你好1
• 你好2

var nav=document.getElementById("nav") nav.getElementsByTagName("li") 3 根据类名获得H5新增 三个方法 不考虑兼容性可使用 (1)document.getElementsByClassName() (2)document.querySelector(".box" | "#nav" | "div") 第一个选择器 (3)document.querysSelectorAll() 所有元素对象 集合 4特殊元素(获取body元素 获取html元素) document.body;//返回元素对象 document.documentElement;//返回HTML元素对象 增加小笔记{ consloe.log()控制台打印 consloe.dir()打印返回的元素对象 查看属性和方法 }

事件基础(触发——响应机制)

事件三要素:
事件源 事件类型 事件处理程序
事件源: 按钮
事件类型:鼠标点击onclick,键盘…
事件处理程序:函数赋值的方式
btn.οnclick= function(){
alert(“hello kit”)
}
步骤:
(1)获取事件源
var div=document.querySelector(".div");
(2)绑定事件
div.onclick
(3)添加事件处理程序
div.οnclick=function(){
console.log(“hello”)
}

操作元素

1.常见元素的属性操作
（1）inner.Text、innerHTML改变元素内容
（2）src、href
（3）id、alt、title
2.操作元素之表单属性设置
type value checked selected disabled
表单里面的值通过value来修改的

节点操作

节点：
元素节点（1）（重点）
属性节点（2）
文本节点（3）
子节点
childNodes(标准)会得到文本节点 不建议使用
children（非标准的）得到元素节点（重点）
例如：ul.children[0]得到第一个孩子
兄弟节点
nextSibling |previousSibling会得到文本节点 不建议使用
nextElementSibling |previousElementSibling会得到元素节点 但有不兼容性
创建节点
document.createElement()
节点添加
node.appenChild(child)
node.insertBefore(child,node.children[0])在某子节点前插入一个子节点
节点删除
node.removeChild(child)