一,简介
DOM(Document Object Model)的缩写,即文档对象模型。是针对XML并经过扩展用于HTML的应用程序编程接口(API)
所以DOM本质上是一种接口(API),是专门操作网页内容的API标准
DOM把整个页面映射为一个多层节点结构,HTML或XML页面中的每个组成部分都是某种类型的节点。借助DOM提供的API,开发人员可以删除、添加、替换或修改任何节点
DOM:
核心DOM 能够操作所有结构化文档(HTML XML)——万能 - 繁琐
HTML DOM 专门操作HTML内容的API——常用的API --> 简化
二,获取元素的方式总结
1、根据 id 的属性的值获取元素,返回值是一个元素对象
document.getElementById(“id属性的值”);
2、根据标签名获取元素,返回值是包含多个元素对象的伪数组
document.getElementsByTagName(“标签名字”);
下面的几个,有的浏览器不支持。
3、根据 name 属性的值获取元素,返回值是包含多个元素对象的伪数组
document.getElementsByName(“name属性的值”);
// 通过 name 属性获取元素适用于表单标签,基本标签没有 name 属性
//基本标签:div,p,h1,ul,li,br等
//表单标签:input, select,option,form,textarea,datalist,label等
4、根据 class 类样式的名字获取元素,返回值是包含多个元素对象的伪数组
document.getElementsByClassName(“class类样式的值”);
ie8等低版本浏览器不支持此方法。此方法属于 h5 的
5、根据 CSS 选择器获取元素,返回值是一个元素对象
document.querySelector("#id属性的值");
document.querySelector(“标签的名字”);
document.querySelector(".class类样式的值");
6、根据 CSS 选择器获取元素,返回值是包含多个元素对象的伪数组
document.querySelectorAll("#id属性的值");
document.querySelectorAll(“标签的名字”);
document.querySelectorAll(".class类样式的值");
注意:以上方法获取的元素的集合都是伪数组
判断伪数组的方式是伪数组不能调用数组的方法。
伪数组怎么变为真数组?
定义一个空数组,把伪数组的所有内容复制过去即可。
2.1、通过节点查找
三个元素不需要找,直接用
document.documentElement <html>
document.head <head>
document.body <body>
1) 父子关系
node.parentNode 获得node的父节点
node.childNodes 获得node的直接子代节点
node.firstChild 获得node下的第一个子节点
node.lastChild 获得node下最后一个子节点
2)兄弟关系
node.previusSibling 返回当前节点的前一个兄弟节点
node.nextSibling 返回当前节点的下一个兄弟节点
节点树:包含了所有节点(元素,文本) 完整的结构
节点树:包含了所有节点(元素,空格,文本) 完整的结构
1)父子关系
elem.parentElement 返回父元素对象
elem.children 返回子元素对象集合 IE8支持
elem.firstElementChild 返回第一个子元素对象
elem.lastElementChild 返回最后一个子元素对象
2)兄弟关系
elem.previusELementSibling 返回当前元素的前一个兄弟元素
elem.nextElementSibling 返回当前元素的下一个兄弟元素
元素树 : 仅包含元素节点的树形结构