Web前端复习——JavaScript复习（DOM）

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