DOM常规操作包括:1.获取文档元素;2.对文档元素进行增删改查操作;3.事件操作。
文档加载过程
1. 存在问题
浏览器加载一个页面时,是按照自上而下的顺序加载的,如果将script
标签写到head
内部,在代码执行时,页面还没有加载,页面中的DOM对象也没有加载,这会导致在JS中无法获取到页面中的DOM对象。
2. 解决方案
1) onload事件
onload
事件会在整个页面加载完成之后才触发。为window
绑定一个onload
事件,该事件对应的响应函数将会在页面加载完成之后执行,这样就可以确保我们的代码执行时所有的DOM对象已经加载完毕了。
2) 把script标签放在body尾部
3) 建议:两者综合
文档页面元素获取
1. 根据id获取元素
var btn = document.getElementById("btn");
2. 根据标签名获取元素
var btn = document.getElementsByTagName("button")[0];
3. 根据name获取元素
var btn = document.getElementsByName("btn")[0];
4. 根据类名获取元素
var btn = document.getElementsByClassName("btn")[0]
5. 根据选择其获取元素
// 返回第一个符合选择器的DOM节点
var btn1 = document.querySelector("#btn");
var btn2 = document.querySelector("button");
var btn3 = document.querySelector(".btn");
// 返回所有符合选择器的DOM节点的集合
var btn4 = document.querySelectorAll("#btn")[0];
var btn5 = document.querySelectorAll(".btn")[0];
节点之间关系
网页中的所有内容都是节点,包括标签、属性、文本、注释等。
1. 获取父节点
var a = document.getElementsByTagName("a")[0];
var b = a.parentNode; // 获取父节点
var c = a.parentElement; // 获取父节点
2. 获取兄弟节点
var span = document.getElementById("span");
// 获取下一个兄弟节点
var nextEle = span.nextElementSibling || span.nextSibling; // nextSibling方法获取到的节点包括换行和注释等标签
// 获取上一个兄弟节点
var preEle = span.previousElementSibling || span.previousSibling;
// 获取任意兄弟节点
var siblings = span.parentNode.children; // 所有的同级节点
var one = siblings[1] // 通过索引获取任意兄弟节点
3. 获取子节点
var box = document.querySelector("#box");
// 获取第一个子节点
var firstChild = box.firstElementChild || box.firstChild;
// 获取最后一个子节点
var lastChild = box.lastElementChild || box.lastChild;
// 获取所有的子节点
var children = box.childNodes; // 包括换行、注释等子节点
var children2 = box.children; // 所有元素子节点
4. 节点的nodeType属性
每个节点都有一个nodeType
属性,用于表明节点的类型。节点类型由Node类型中定义的12个常量表示。以下列举了常用的几个。
常量名 | 常量值 | 节点类型 | 描述 |
---|---|---|---|
Node.ELEMENT_NODE | 1 | Element | 代表元素节点 |
Node.ATTRIBUTE_NODE | 2 | Attr | 代表属性节点 |
Node.TEXT_NODE | 3 | Text | 代表元素或属性中的文本内容 |
Node.COMMENT_NODE | 8 | Comment | 代表注释节点 |
Node.DOCUMENT_NODE | 9 | Document | 代表整个文档(DOM树的根节点) |
window.onload = function(ev) {
// 获取标签
var box = document.getElementById("box");
// 获取标签内部的所有节点
var allNodeList = box.childNodes;
// 过滤元素节点
var newArr = [];
allNodeList.forEach(function(value, key, parent) {
if (value.nodeType === 1) {
newArr.push(value);
}
})
}