2020.9.14陈悦玲BOM总结

dom语法总结

查找元素

#不需要查找可直接获得的节点:

document根节点

document.documentElement 获取html中包含的所有内容

document.head 获取head中包含的所有内容

document.body 获取body中包含的所有内容

document.forms[i] 获取页面中所有的表单元素

#按照节点间关系查找

节点树

关系:

父子关系:

1.elem.parentNode 获得当前节点的父节点

2.elem.childNodes 获得当前节点下的直接子节点的集合,返回一个类数组对象包含该父节点下所有直接子节点

3.elem.firstChild 获得当前节点下的第一个直接子节点

4.elem.lastChild 获得当前节点下的最后一个直接子节点

兄弟关系:

1.elem.previousSibling 获得当前节点的前一个平级兄弟节点

2.elem.nextSibling 获得当前节点的后一个平级兄弟节点

##解决节点树的方法(元素树)

使用元素树:什么是元素树?

仅包含元素节点的树结构,不是一棵新树,仅是节点树的子集(其实内存中只有一棵完整的节点树。而元素树只不过是在节点树的基础上,新增了一些仅指向元素节点的新属性而已。所以,元素树只是节点树中的一个子集)

什么时候用元素树?

所有的按关系查找,都用元素树,而不用节点树(只关心元素,不关心文本时)

使用 (两大类关系,六个属性)

​ 父子
​ elem.parentElement
​ elem.children
​ elem.firstElementChild
​ elem.lastElementChild
​ 兄弟
​ elem.previousElementSibling
​ elem.nextElementSibling

优点:不包含看不见的文本节点,不干扰查找

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

实例:elem.innerHTML

兼容性问题:IE9+

##递归遍历
#按照HTML查找
##按照ID查找

var elem=document.getElementById("id")

提示:

1.只能用document调用,不能换成其他元素,使用document意为在整个网页范围内查找;

2.只能找到一个元素对象,如果找不到返回null,如果不小心两个HTML元素id名相同,则getElementById只能返回第一个找到的元素

问题:

1.按id查找一次只能找一个元素对象,无法同时找多个元素对象;

2.网页中标有id的元素并不多,因为没有那么多英文单词名字可用

按照标签名查找

var elems=parent.getElementsByTagName("标签名")

提示:

1.可在任意父元素下查找。主语是哪个父元素,就只在哪个父元素内查找符合条件的元素;

2.返回多个符合条件的元素组成的类数组对象,也是动态集合,如果找不到,返回空类数组对象:{ length:0 };

3.getElementsByTagName()不仅查找直接子元素,而是在所有后代中查找符合条件的元素

按照class

var elems=parent.getElementsByClassName("class")

提示:

1.可以在任意父元素上调用,控制查找的范围;

2.返回类数组对象,也是动态集合,如果没找到,返回空类数组对象{ length:0 };

3.不只是在直接子元素中查找,而是在所有后代子元素中查找符合条件的元素;

4.如果一个元素有多个class修饰,而查找时,只要用其中一个class,就能找到该元素

兼容性问题:IE9+

按照name查找

var elems=document.getElementsByName("name")

提示:

1.只能在document上调用;

2.返回类数组对象,也是动态集合,如果没找到,返回空类数组对象{ length:0 };

3.因为只有表单元素才会有name属性,所以,getElementsByName几乎专门用于查找指定name属性的表单元素

注意:ByTagName、ByClassName、 ByName三个函数注定返回类数组对象,即使只找到一个元素,也会放在类数组对象中返回,无法直接返回一个元素对象,所以,如果只找到一个元素对象时,应该再加[0],才能取出类数组对象中保存的惟一的这个元素对象

#按照选择器查找(Selector API)

查找一个元素

var elem=parent.querySelector("selector")

查找多个元素

var elems=parent.querySelectorAll("selector")

注意:差不到的返回null

HTML查找和选择器查找:

html返回动态集合,不实际存储所有内容,只返回本次所需内容;选择器查找返回非动态集合,可以直接存储所有数据;

修改元素

修改元素内容

elem.innerHTML

获取或设置开始标签到结束标签之间的原始的html代码片段,获取元素的HTML内容时,返回原始的HTML代码内容,修改元素的HTML内容时,先将新的HTML代码内容提交给浏览器解析后,再显示在元素内部

实例:

​ p.innerHTML="hello world"

elem.textContent = elem.innerText(后者都兼容性 ie8+)

获取或设置开始标签到结束标签之间的纯文本内容,获取元素的纯文本内容时,textContent会去掉内嵌标签,还会将特殊符号翻译为正文,修改元素的纯文本内容时,不会将新内容交给浏览器解析,而是直接原样显示在元素内部

实例:

​ p.textContent=“hello world

elem.value

获取或修改表单元素的值

注意:获取表单元素的值不能用 “.innerHTML",因为表单元素多数是单标记,没有innerHTML,表单元素的内容都是用“.value”属性来获取或修改的

属性:
核心DOM

1.获取属性

var value=elem.getAttribute("属性名")

实例:获得a元素的href属性

​ a.getAttribute("href")

了解:

​ var attrNode=elem.attributes[ i / 属性名 ];

​ // var attrNode=elem.getAttributeNode("属性名");

​ var value=attrNode.value;

2.修改属性

elem.setAttribute("属性名",属性值)

注意:如果属性不存在,也可以使用setAttribute,此时会自动添加该属性

实例:修改a元素的title属性

​ a.setAttribute("title","hello world")

3.移除属性

elem.removeAttribute("属性名")

提示:只移除开始标签中的attribute,不删除内存中对象的property

实例:移除a元素的title属性

​ a.removeAttribute("title")

4.判断是否含有属性

var bool=elem.hasAttribute("属性名")

实例:判断a元素是否有id属性,如果含有返回true,否则返回false

​ a.hasAttribute("id")

HTML DOM

1.获取属性

elem.属性名

2.修改属性

elem.属性名=值

3.判断是否包含属性

elem.属性名!==""

4.移除属性

elem.属性名=""

5.特例:class属性

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

实例:

​ 元素.className="xxx"

提示:元素.classList

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

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

状态属性
样式

最好的修改样式的方法:

如果批量修改多个css属性时,首选用class,修改class属性,批量应用样式

实例:

​ var d1=ducment.getElementById("d1");

​ d1.className="disBlock";

​ d1.className="disNone";

优化样式修改

因为每修改一次样式,都可能导致重排重绘网页,所以,应该尽量减少修改样式的次数,使用 “ 元素.style.cssText属性 ” 代替,单独设置的 “ 元素.style.css属性 ”

实例:

​ 元素.style.cssText="width:100px; height:100px"

注意:此时浏览器只需要一次重排重绘网页,对比单独设置:

​ 元素.style.width="100px"

​ 元素.style.height="100px"

单独设置导致网页在短时间内进行两次重排重绘

添加和删除元素

添加

1.创建新元素对象

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

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

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

2.设置关键属性

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

​ a.href="url";

​ a.innerHTML="文本"

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

3.将元素添加到DOM树

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

实例:

​ parent.appendChild(child)

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

实例:

​ parent.insertBefore(child,oldChild)

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

实例:

​ parent.replaceChild(child,oldChild)

添加问题

每操作一次DOM树,都会导致重排重绘。如果数据量大,又频繁操作DOM树,会导致重排重绘不过来

解决添加问题

优化,尽量少的操作DOM树,如果同时添加父元素和子元素,应该先暂存内存中,将所有子元素添加到父元素,最后将父元素一次性添加到DOM树上,只需要重排重绘一次。如果父元素已经在DOM树上了,而要添加多个平级子元素,需要借助文档片段对象

删除

parent.removeChild(child)

评论

© 2021 成都云创动力科技有限公司 蜀ICP备20006351号-1