document.head
获取HEAD元素对象
document.body
获取BODY元素对象
document.documentElement
获取HTML元素对象
//=>需求:获取浏览器一屏幕的宽度和高度(兼容所有的浏览器)
document.documentElement.clientWidth || document.body.clientWidthdocument.documentElement.clientHeight || document.body.clientHeight
面试题:获取当前页面中所有ID为HAHA的和元素(兼容所有的浏览器)
function queryAllById(id) {
//->基于通配符*获取到整个文档中所有的HTML标签
var nodeList = document.getElementsByTagName('*');
//->遍历集合中的每一项,把元素ID和传递ID相同的这一项存储起来
var ary = [];
for (var i = 0; i < nodeList.length; i++) {
var item = nodeList[i];
item.id === id ? ary.push(item) : null;
}
return ary;
}
console.log(queryAllById('HAHA'));
节点 (node)
在一个HTML文档中出现的所有东西都是节点
-
元素节点(HTML标签)
-
文本节点(文字内容)
-
注释节点(注释内容)
-
文档节点(document)
元素节点
nodeType:1 nodeName:大写标签名 nodeValue:null
文本节点
nodeType:3 nodeName:'#text' nodeValue:文本内容
在标准浏览器中会把空格/换行等都当做文本节点处理
注释节点
nodeType:8 nodeName:'#comment' nodeValue:注释内容
文档节点
nodeType:9 nodeName:'#document' nodeValue:null
parentNode
获取当前节点唯一的父亲节点
childNodes
获取当前元素的所有子节点
子节点:只获取儿子级别的
所有:包含元素节点、文本节点等
children
获取当前元素所有的元素子节点
在IE6~8中会把注释节点也当做元素节点获取到,所以兼容性不好
previousSibling
获取当前节点的上一个哥哥节点(获取的哥哥可能是元素也可能是文本等)
previousElementSibling:获取上一个哥哥元素节点(不兼容IE6~8)
nextSibling
获取当前节点的下一个弟弟节点
nextElementSibling:下一个弟弟元素节点(不兼容)
firstChild
获取当前元素的第一个子节点(可能是元素或者文本等)
firstElementChild
lastChild
获取当前元素的最后一个子节点
lastElementChild
需求一:获取当前元素的所有元素子节点
基于children不兼容IE低版本浏览器(会把注释当做元素节点)
function children(curEle) {
//=>首先获取当前元素下所有的子节点,然后遍历这些节点,筛选出元素的(NODE-TYPE===1),把筛选出来的结果单独存储起来即可
var nodeList = curEle.childNodes,
result = [];
for (var i = 0; i < nodeList.length; i++) {
var item = nodeList[i];
if (item.nodeType === 1) {
result.push(item);
}
}
return result;
}
console.log(children(course));
关于DOM的增删改
createElement
创建一个元素标签(元素对象)
document.createElement([标签名])
appendChild
把一个元素对象插入到指定容器的末尾
[container].appendChild([newEle])
insertBefore
把一个元素对象插入到指定容器中某一个元素标签之前
[container].insertBefore([newEle],[oldEle])
cloneNode
把某一个节点进行克隆
[curEle].cloneNode()
:浅克隆,只克隆当前的标签[curEle].cloneNode(true)
:深克隆,当前标签及其里面的内容都一起克隆了
removeChild
在指定容器中删除某一个元素
[container].removeChild([curEle])
set/get/removeAttribute
设置/获取/删除 当前元素的某一个自定义属性