DOM基础知识

document.head           获取HEAD元素对象

document.body           获取BODY元素对象

document.documentElement   获取HTML元素对象

//=>需求：获取浏览器一屏幕的宽度和高度（兼容所有的浏览器）
document.documentElement.clientWidth || document.body.clientWidth

document.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

设置/获取/删除 当前元素的某一个自定义属性