DOM和BOM-day21-个人学习笔记
一、DOM概述
1、DOM概述:
DHTML:动态网页技术的统称
DHTML=HTML+CSS+JS
HTML XHTML DHTML XML
HTML:超文本标记语言,专门编写网页内容的语言
XHTML:严格的HTML语言标准
DHTML:动态网页技术的统称,=HTML+CSS+JS
XML:可扩展的标记语言,可自定义标签,专门用来存储/传输自描述的结构化数据,逐渐被json替代了。
2、BOM VS DOM
BOM:浏览器对象模型(API),专门操作浏览器窗口的API,没标准!
DOM:文档对象模型(API),专门操作网页内容的API,可以对网页中任意对象,做任何修改!DOM是标准,90%以上浏览器都严格兼容
3、核心DOM和HTML DOM
核心DOM:操作所有结构化文档(XML,HTML)的通用API
HTML DOM:针对HTML文档的简化API
HTML DOM不能完成所有功能,实际开发中都是核心DOM与HTML DOM配合使用。
二、DOM树
1、DOM树:文档中的每一个元素,属性,文字,注释,都被看做一个节点对象--Node--所有节点对象的父类型
2、document:当网页被加载进内存时,浏览器会为网页创建一个document对象。所有节点对象都是document对象的子节点。
document封装了对网页中所有子节点的增加,删除,查找
3、Node类型定义了3个公共属性:
(1)nodeType:节点的类型的数值
何时使用:专门用于判断获得的节点类型。
如果是元素节点,返回1;如果是文本节点,返回3.
(2)nodeName:节点的名称
何时使用:专门用于判断获得的标签名。
如果是元素节点,返回标签名;如果是文本节点,返回#text
(3)nodeValue:节点的值
如果是元素节点,返回null;如果是文本节点,返回文本的内容。
4、childNodes:获得当前节点对象下的所有子节点
返回类数组对象,***动态集合***(自己不保存任何实际数据,每使用一次都重新查找一遍)
for(var i=0,len=tbody.childNodes.length;i<len;i++)
5、DOM树6种关系:6个属性
父子:4个:parentNode childNodes firstChild lastChild
兄弟:2个:previousSibling nextSibling
三、遍历:从指定父元素开始,按照深度优先的原则,遍历所有各级子节点
1、如何遍历:2步
(1)定义一个函数,查找任意父节点下的所有直接子节点
(2)以深度优先为原则,递归调用函数本身
2、何时使用递归调用:2个场景:
(1)遍历不确定层级深度的树形结构时。比如:网页中的元素,网盘的文件夹结构。
(2)不确定层级深度的多级管理结构时。
3、元素树:仅由元素节点组成的树结构,有一组和节点树6个属性对应的元素树属性
何时使用:只要仅希望遍历元素节点时,就用元素树
问题:IE8不兼容,children可用
节点树 | 元素树 | |
父对象 | parentNode | parentElementNode |
所有子对象 | childNodes | children |
第一个子对象 | firstChild | firstElementChild |
最后子对象 | lastChild | lastElementChild |
前一个兄弟 | previousSibling | previousElementSibling |
后一个兄弟 | nextSibling | nextElementSibling |
4、遍历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()方法
强调:只要nextNode(),就向下一个移动一次;iterator.previousNode(),后退一次
(2)自由遍历:
TreeWalker:使用几乎相同,只不过TreeWalker比Iterator多个别方法
四、查找:5个API
1、var elem=document.getElementById("id值");
2、var elems=parent.getElementsByTagName("标签名");
3、var elems=document.getElementsByName("name属性");
4、var elems=parent.getElementsByClassName("class属性");
elems:动态集合,每使用一次都重新查找
5、Selector API:jQuery的核心
var elem=parent.querySelector("任意选择器");
var elems=parent.querySelectorALL("任意选择器");
elems:包含所有属性和方法的完整对象的集合