9-1 钟申义 日志

9-1 钟申义 日志

DOM可以干五件事,包含:增、删、改、查和事件绑定
document 根节点
节点对象三大属性 nodeType nodeName nodeValue
节点的类型,nodeType属性返回节点类型的常数值。不同的类型对应不同的常数值
包含:
文档节点:document //9
元素节点:element //1
属性节点:attribute //2
文本节点:text //3
问题:无法进一步判断元素的名称
节点名称,进一步判断元素的名称
包含:
文档节点:document // #document
元素节点:element // 全大写标签名,例如:“BODY/HEAD”
属性节点:attrribute // 属性名,例如:“href”
文本节点:text // #text
节点值
包含:
文档节点:document // null
元素节点:element // null
属性节点:attribute // 属性值,例如:“#”
文本节点:text // 文本内容
构建DOM树(先在头脑中构建DOM树)
DOM操作流程 查找触发事件的元素
绑定事件处理函数
document.documentElement 获取html中包含的所有内容
document.head 获取head中包含的所有内容
document.body 获取body中包含的所有内容
document.forms[i] 获取页面中所有的表单元素

节点树

父子
elem.parentNode 获得当前节点的父节点 elem.childNodes 获得当前节点下的直接子节点的集合,返回一个类数组对象包含该父节点下所有直接子节点 elem.firstChild 获得当前节点下的第一个直接子节点 elem.lastChild 获得当前节点下的最后一个直接子节点
兄弟
elem.previousSibling 获得当前节点的前一个平级兄弟节点 elem.nextSibling 获得当前节点的后一个平级兄弟节点
节点树优点 网页结构完整
节点树问题 我们在写代码的时候为了代码格式,会添加很多空格,缩进,换行,这些都是字符。在节点树中,字符也是节点对象,称为 " #text " 。这些看不见的文本节点,会极大的妨碍正常的查找

元素树

仅包含元素节点的树结构,不是一棵新树,仅是节点树的子集
elem.parentElement 获得当前元素的父元素(因为能当父元素的通常都是元素节点,所以也可以用parentNode代替)
elem.children 获得当前元素下的直接子元素的集合,返回一个类数组对象包含该父元素下所有直接子元素(IE8+)
elem.firstElementChild 获得当前元素下的第一个直接子元素
elem.lastElementChild 获得当前元素下的最后一个直接子元素
elem.previousElementSibling 获得当前元素的前一个平级兄弟元素
elem.nextElementSibling 获得当前元素的后一个平级兄弟元素
优点 不包含看不见的文本节点,不干扰查找
缺点 不包含一切文本节点,如果想获取文本可用 “ elem.innerHTML ”获取文本 实例:elem.innerHTML 兼容性问题:IE9+
childNodes和children的区别
childNodes和children都返回动态集合(live collection),不实际存储数据,每次访问集合,都是重新查找DOM树
优点:首次查找返回速度快
缺点:反复访问集合,会导致反复查找DOM树
遍历:for(var i=0,len=children.length;i<len;i++)
区别:
childNodes是标准属性,返回指定元素的子元素集合,包括HTML节点,所有属性,文本节点。可以通过nodeType判断是哪种类型的节点;
children是非标准属性,返回指定元素的子元素集合。但是它只返回HTML几点,甚至不返回文本节点,虽然不是标准的DOM属性,但是却得到几乎所有浏览器的支持
按HTML查找(4个特征)
按ID查找
var elem=document.getElementById("id")
只能用document调用,不能换成其他元素,使用document意为在整个网页范围内查找;
只能找到一个元素对象,如果找不到返回null,如果不小心两个HTML元素id名相同,则 getElementById只能返回第一个找到的元素
问题
按id查找一次只能找一个元素对象,无法同时找多个元素对象;
网页中标有id的元素并不多,因为没有那么多英文单词名字可用
按标签名查找
var elems=parent.getElementsByTagName("标签名")
可在任意父元素下查找。主语是哪个父元素,就只在哪个父元素内查找符合条件的元素;
返回多个符合条件的元素组成的类数组对象,也是动态集合,如果找不到,返回空类数组对象:{ length:0 };
getElementsByTagName()不仅查找直接子元素,而是在所有后代中查找符合条件的元素
按class
var elems=parent.getElementsByClassName("class")
可以在任意父元素上调用,控制查找的范围;
返回类数组对象,也是动态集合,如果没找到,返回空类数组对象{ length:0 };
不只是在直接子元素中查找,而是在所有后代子元素中查找符合条件的元素;
如果一个元素有多个class修饰,而查找时,只要用其中一个class,就能找到该元素
兼容性问题:IE9+
按name
var elems=document.getElementsByName("name")
只能在document上调用;
返回类数组对象,也是动态集合,如果没找到,返回空类数组对象{ length:0 };
因为只有表单元素才会有name属性,所以,getElementsByName几乎专门用于查找指定name属性的表单元素
按选择器查找(Selector API)
可在任意父元素上调用; 返回类数组对象,但是是非动态集合; 受制于浏览器对选择器的兼容性(IE8+); “ () ”中的选择器,是相对于“ . ” 前的父元素下的相对选择器,而不是完整的选择器
var elem=parent.querySelector("selector") var elems=parent.querySelectorAll("selector")
返回值总结
如果该函数规定只返回一个元素对象,则如果找不到,都返回null(getElementById、querySelector)
.如果该函数规定会返回一个类数组对象,则如果找不到,都返回空类数组对象:{ length: 0 }
易用性
按HTML繁琐;
selector API简单

修改元素

elem.innerHTML 获取或设置开始标签到结束标签之间的原始的html代码片段,获取元素的HTML内容时,返回原始的HTML代码内容,修改元素的HTML内容时,先将新的HTML代码内容提交给浏览器解析后,再显示在元素内部 p.innerHTML="hello world"
elem.textContent 获取或设置开始标签到结束标签之间的纯文本内容,获取元素的纯文本内容时,textContent会去掉内嵌标签,还会将特殊符号翻译为正文,修改元素的纯文本内容时,不会将新内容交给浏览器解析,而是直接原样显示在元素内部 p.textContent=“hello world
elem.innerText innerText用法同textContent一样,只不过具有兼容性要求(IE8+)
elem.value 获取或修改表单元素的值 注意:获取表单元素的值不能用 “.innerHTML",因为表单元素多数是单标记,没有innerHTML,表单元素的内容都是用“.value”属性来获取或修改的
对比innerHTML
innerHTML设置文本的时候是去掉所有标签,只显示文本,同时翻译转义字符为正文,而textContent是我们写的是什么就显示什么

心得

太快了,起飞了!

评论

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