[JS] 002_dom基础增强

1dom的解读

DOM:对文档的内容进行抽象和概念化的方法。代表被加载到浏览器窗口的当前网页。

D: 当创建了一个网页并加载到web浏览器中之时,DOM就会根据你所编写的网页创建一个文档对象。而这个文档对象是由多个元素对象所组成的。

O: 对象分为三类【自定义对象/内建对象/宿主对象】其中最基础的宿主对象是window对象,他对应着浏览器窗口本身。

   但我们更应该关注的是浏览器的内部而不是浏览器的窗口,因此我们将着重讨论如何对网页的内容进行处理,因此,重点应该把握的是document对象

M:浏览器向我们提供了当前网页的模型,我们可以通过JS去读取这个模型。而在DOM里,这个模型通常是一棵节点树

 

2)节点的概念

DOM是由节点构成的集合。

节点类型:元素节点/文本节点/属性节点

 

例子:<p title="a gentle reminder">Don't forgot to buy this stuff</p> 

元素节点:<p></p>【每一个元素节点都有一个title属性】

 

文本节点:Don't forgot to buy this stuff

属性节点:title="a gentle reminder"

 

 

3)getElementById()方法

作用:按id属性值检索特定元素节点

Id属性就像是一个挂钩,一边连着文档里的某个元素,另一边连着JS脚本里的某个函数

getElementById()方法与document相关联,只有一个参数,就是想获得的那个元素的id属性值。这个属性值要用双引号括起来。

getElementById()方法将返回一个与给定的id属性元素节点相应的对象。对应着document对象里独一无二的一个元素。文档中的每一个元素都对应一个对象。

 

 

4)getElementByTagName()方法

作用:按标签名检索特定元素节点

getElementByTagName()也和document相关联,参数也只有一个,就是HTML标签的名字,方法将返回一个对象数组,数组里的每一个元素都是一个对象,每个对象分别对应着文档里有给定标签的一个元素。

如:想知道一个文档里有多少元素节点[通配符]

alert(document.getElementByTagName("*").length);

 

5)在检索到特定的元素节点后,我们可以利用getAttibute()方法把他的各种属性的值查找出来。还可以利用setAttibute()方法对特定元素节点的属性的值做修改。

setAttibute("title","a list of goods")

getAttibute("title")

 

 

 

原文地址:https://www.cnblogs.com/avivaye/p/2773549.html