Web前端复习——JavaScript复习(DOM)

xiaoxiao2021-02-28  25

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

转载请注明原文地址: https://www.6miu.com/read-200134.html

最新回复(0)