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

评论

this is is footer