20200901岳浩天

知识总结

DOM操作流程：

1.构建DOM树

2.查找触发事件的元素

3.绑定事件的处理函数

查找元素

不需要查找的元素：

document
document.documentElement 获取html中包含的所有内容
document.head
document.body
document.forms[i]

节点树查找的优缺点：

优点：网页结构完整

缺点：我们在写代码的时候为了代码格式，会添加很多空格，缩进，换行，这些都是字符。在节点树中，字符也是节点对象，称为 " #text " 。这些看不见的文本节点，会极大的妨碍正常的查找

元素树的优缺点：

优点：不包含看不见的文本节点，不干扰查找

缺点：不包含一切文本节点，如果想获取文本可用 “ elem.innerHTML ”获取文本

实例：elem.innerHTML

兼容性问题：IE9+

childNodes和children的区别

childNodes和children都返回动态集合（live collection），不实际存储数据，每次访问集合，都是重新查找DOM树

优点：首次查找返回速度快

缺点：反复访问集合，会导致反复查找DOM树

遍历：for(var i=0,len=children.length;i<len;i++)

区别：

1.childNodes是标准属性，返回指定元素的子元素集合，包括HTML节点，所有属性，文本节点。可以通过nodeType判断是哪种类型的节点；

2.children是非标准属性，返回指定元素的子元素集合。但是它只返回HTML几点，甚至不返回文本节点，虽然不是标准的DOM属性，但是却得到几乎所有浏览器的支持

递归遍历

遍历body下的所有子元素：

var body=document.body;

function getChild(parent){

// Step1：遍历parent的直接子节点

var child=parent.childNodes;

for(var i=0;i<child.length;i++){

    // 输出查找到的子元素

    console.log(child[i])

        //Step2: 为每个子节点调用和父节点完全相同的函数

    console.log(arguments);

        arguments.callee(child[i]);

}

}

getChild(body)

但是递归的效率极低

解决效率低的方法：

可用循环代替递归

实例：

function getChild(parent){

    // 创建迭代器对象

    var iterator=document.createNodeIterator(

            parent, NodeFilter.SHOW_ALL , null, false

            // parent, NodeFilter.SHOW_ELEMENT , null, false

    );

    var node;

    while((node=iterator.nextNode())!=null){

            // node获得当前正在遍历的节点

            console.log(node.nodeType!=3?node.nodeName:node.nodeValue);

    }

}

解析：createNodeIterator // 节点原生遍历

语法：document.createNodeIterator(root,whatToShow,filter,false);

注意：createNodeIterator遍历的时候包含自身元素

可用按条件查找解决只能遍历所有，如需筛选，得自己写判断的问题

html查找和选择器查找比较：

返回值：

1.按HTML，返回动态集合，不实际存储所有内容，只返回本次所需的内容，如果重复访问集合，就需要重新查找DOM树，优点是首次查找速度快，缺点是反复访问集合，会导致反复查找DOM树（会根据页面元素的变化而变化）；

2.selector API，返回非动态集合，可以直接存储所有数据，即使反复访问集合，也不需要反复查找DOM树

首次查询效率：

1.按HTML效率更高，仅返回需要的内容，不需要准备完整数据；

2.selector API低，第一次要返回完整数据

易用性：

1.按HTML繁琐；

2.selector API简单

什么时候使用：

1.如果只凭一个条件即可获得想要的元素时，首选按HTML查找；

2.如果需要多级复杂条件查找才能获得想要的元素时，用selector API

修改

elem.innerHTML 识别标签
elem.textContent 不识别标签
elem.innerText
elem.value

属性：

获取属性var value=elem.getAttribute("属性名")
修改属性elem.setAttribute("属性名",属性值)
移除属性elem.removeAttribute("属性名")
判断是否含有属性var bool=elem.hasAttribute("属性名")

HTML DOM：

获取属性elem.属性名
修改属性elem.属性名=值
判断是否包含属性elem.属性名!==""
移除属性elem.属性名=""
特例：class属性：

class属性，不能直接用 “ . ” 访问，因为class属性是ES中的关键词，所以DOM不能再使用class作为属性。如果操作页面上的class属性，只能改名为“ .className”。使用"元素“.className"属性，等效于使用<元素 class="xxx">属性，直接修改class

实例：

​ 元素.className="xxx"

提示：元素.classList

1.元素.classList.add("class名")

2.元素.classList.remove("class名")

添加

step1：创建新元素对象

var elem=document.createElement("标签名")

实例：创建一个页面元素对象

​ var a=document.createElement("a")

step2：设置关键属性

实例：为创建好的对象添加属性

​ a.href="url";

​ a.innerHTML="文本"

问题：此时新创建的元素都没有在DOM树上。自然也就无法显示在网页中

step3：将元素添加到DOM树

1.将新元素放在父元素下最后一个直接子元素后，末尾追加

实例：

​ parent.appendChild(child)

2.将新元素放在父元素下一个现有旧元素之前

实例：

​ parent.insertBefore(child,oldChild)

3.将新元素替换父元素下一个现有旧元素

实例：

​ parent.replaceChild(child,oldChild)

文档片段：

step1：创建文档片段对象

var frag=document.createDocumentFragment();

step2：将多个平级子元素临时添加到文档片段对象中

frag.appendChild(child)

step3：将文档片段整体一次性添加到DOM树上指定父元素下

parent.appendChild(frag)

注意：frag不会成为页面元素，添加子元素后，frag自动释放