Web前端复习——JavaScript复习(DOM) 迈不过友情╰ 2022-06-16 08:44 173阅读 0赞 1、DOM概述 DHTML:动态网页技术的统称 DHML=HTML+CSS+JS HTML XHTML DHTML XML HTML:超文本标记语言,专门编写网页内容的语言 XHTML:严格的HTML语言标准 DHTML:动态网页技术的统称,=HTML+CSS+JS XML:可扩展的标记语言,可自定义标签 专门用来存储/传输描述的结构化数据 逐渐被json替换了 2、DOM VS BOM BOM:浏览器对象模型(API),专门操作浏览器窗口的API。 DOM:文档对象模型(API),专门操作网页内容的API 可以对网页中任意对象,做任何修改! DOM是标准,它允许程序和脚本动态的访问和更新文档的内容、结构和样式。 W3C DOM标准被分为3个不同的部分: 核心DOM——针对任何结构化文档的标准模型 XML DOM——针对XML文档的标准模型 HTML DOM——针对HTML文档的标准模型 HTML DOM:针对HTML文档的对象模型 核心DOM:针对HTML文档的简化API HTML DOM不能完成所有功能,实际开发中都是核心DOM与HTML、DOM配合使用 HTML DOM:在网页中一切都是对象(元素,属性,文字) 同一网页中的所有对象,在内存中父子相连,形成一棵 DOM树: <a href="http://tmooc.cn">我的链接</a> 节点数:网页中每一个元素,属性,文本,注释都是节点对象 树根:document对象 节点数中:节点间关系(6个属性) 父子关系(4种):parentNode、childNodes、firstChild、lastChild 兄弟关系(2种):previousSibling、nextSibling Node类型定义了3个公共属性 nodeType:节点的类型的数值 何时使用:专门用于判断的获得的节点类型 如果元素节点,返回1;如果文本节点,返回3 nodeName:节点名称 nodeValue:节点的值 元素节点,返回null, childNodes:类数组对象, “动态集合”:自己不保存任何实际数据,每使用一次重新查找一遍 遍历:从指定父元素开始,按照深度优先的原则,遍历所有各级子节点 2步:(1)定义一个函数,查找任意父节点下的所有直接子节点 (2)以深度优先为原则,递归调用函数本身 元素树:仅由元素节点组成的树结构 其实有一组和节点树6个属性对应的元素树属性 父对象 所有子对象 第1个子对象 最后子对象 前1个兄弟 后1个兄弟 节点树——parentNode childNodes firstChild lastChild previousSibling nextSibling 元素树——parentxNode children firstxChild lastxChild previousxSilbling nextxSibling (注:“x”=element) 何时使用元素树? 只要仅希望遍历元素节点时,就用元素树 (问题:IE8不兼容,children可用) DOM Level2 遍历API:2个 (1)深度优先遍历:NodeIterator(节点迭代器) 如何使用:2步 步骤a、创建遍历API对象 var iterator = document.createNodeIterator( 开始的父节点对象, whatToShow, null,false ); whatToShow:NodeFilter.SHOW\_ELEMENT NodeFilter.SHOW\_ALL 步骤b、用while循环,反复调用iterator.nextNode()方法 强调:a、只要nextNode(),就向下一个移动一次 b、iterator.previousNode(),后退一次 (2)自有遍历:TreeWalker 3、查找API (1)var elem=document.getElementById("ID值") (2)var elems=parent.getElementByTagName("标签名") elems——动态集合,每使用一次,都重新查找 结构:for(var i=0,len=elems.length;i<len;i++) (3)var elems=document.getElementByName("name属性"); (4)var elems=parent.getElementByClassName("class属性"); (5)Selector API:jQuery的核心 var elems=parent.querySelector("任意选择器"); var elems=parent.querySelectorAll("任意选择器"); 只能从父节点向下找 找平级——x.parentNode.querySelector() elems——包含所有属性和方法的 4、总结: (1)DOM中一切都是节点对象:Node类型 元素节点对象:Element类型;文本节点对象:Text类型 三大属性:nodeName、nodeType、nodeValue 六个关系:parentNode、childNodes、firstChild、lastChild previousSibling、nextSibling 两种树:节点树、元素树 (2)遍历方式(4种——默认都是深度优先) a:遍历节点树——手写,带缩进 b:遍历元素树——手写,带缩进 c:NodeIterator:nextNode()、previousNode() d:TreeWalker (3)核心DOM原型链 (核心DOM) Node——>Node.prototype | | || Element————Element.prototype \_proto\_ || | | HTMLElement——HTMLElement.prototype \_proto\_ (HTML DOM) **注意——核心DOM与HTML DOM有什么区别呢?** a、核心DOM类型,可对XML、HTML文档中的所有元素节点进行增删查改等操作,但API相对繁琐 (实现增删查改) b、HTML DOM类型,专门针对HTML文档中HTML元素,简化操作HTML元素对象的标准特性或子元素。 (实现修改属性) (4)修改元素内容 innerHTML (5)元素属性 由于所有元素都有attributes属性,\[i\]访问每个属性 5-1:读取属性(4种) a、element.attributes\[下标\].value b、var value=element.attributes\["属性名"\] c、element.getAttributeNode("属性名").value \*\*\*d、var value=element.getAttribute("属性名");(用的最多) 5-2:修改属性(2种) \*\*\*a、element.setAttribute(name,value); 注意——IE8不支持, 只能element.attributes\["属性值"\]=value; b、element.setAttributeNode(attrNode); 5-3:删除属性(2种) \*\*\*a、element.removeAttribute("属性名"); b、element.setAttributeNode(attrNode); 5-4:判断是否包含(2种) \*\*\*a、element.hasAttribute("属性名"); b、element.hasAttributes(); 总结——读取(get)、设置/修改(set)、删除(remove)、判断是否包含(has) 5-5:如何区分Property VS Attribute Property:属性——对象在内存中存储的属性, 用“.”访问 Attribute:HTML特性——元素对象在开始标签中定义的HTML属性和自定义属性 访问HTML标准属性时,二者完全一致 比如:<a href="http://tmooc.cn"> a.href——属性——HTML DOM a.getAttribute("href")——特性——核心DOM
还没有评论,来说两句吧...