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