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：包含所有属性和方法的完整对象的集合

DOM和BOM-day21-个人学习笔记

猜你喜欢