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自动释放
评论