您的位置：首页 > 其它

DOM（一）

2017-01-12 00:00 260 查看
识别了JS中的对象后，我们来看一虾DOM对象，即Document Object Model，文档对象模型。

1、该模型定义如何访问和处理HTML对象，DOM把HTML呈现为带有元素、属性和文本的树结构（节点树）。节点分为三种：

元素节点：即标签<html><body><p>等；

文本节点：向用户展示的内容，如<li></li>中的javascript、DOM、CSS等文本；

属性节点：元素的属性，例如<a>标签的href属性；

关于节点自身的属性和操作如下ABC三个：

A、节点属性：



B、遍历节点树：



C、节点的DOM操作：



注意：a、前两个是document方法；

b、.style.display="";需要加双/单引号，style的内容都要加双/单引号。

2、获取节点的方法（获取节点还有几种，在续中补充）：

getElementByID、getElementsByName、getElementsByTagName；三者区别：

以人来举例说明，人有能标识身份的身份证，有姓名，有类别(大人、小孩、老人)等。

A. ID 是一个人的身份证号码，是唯一的。所以通过getElementById获取的是指定的一个人。

B. Name 是他的名字，可以重复。所以通过getElementsByName获取名字相同的人集合。

C. TagName可看似某类，getElementsByTagName获取相同类的人集合。如获取小孩这类人， getElementsByTagName("小孩")。

总结如下：



3、操作属性值：getAttribute()、setAttribute()；

getAttribute()：

elementNode.getAttribute(name)

elementNode使用getElementById()、getElementByTagName()等方法，获取到的元素节点
name想要查询的元素节点的属性名字
setAttribute()：

elementNode.setAttribute(name,value

name要设置的属性名
value要设置的属性值
Tips：

a、把指定的属性设置为指定的值。如果不存在具有指定名称的属性，该方法将创建一个新属性。

b、.类似于getAttribute()方法，setAttribute()方法只能通过元素节点对象调用的函数。

4、节点属性

在DOM中，每个节点都是一个对象，DOM节点有三个重要属性：nodeName（节点名称）、nodeValue（节点值）、nodeType（节点类型）。

元素类型：

nodeName节点名称是只读的；
1. 元素节点的 nodeName 与标签名相同
2. 属性节点的 nodeName 是属性的名称
3. 文本节点的 nodeName 永远是 #text
4. 文档节点的 nodeName 永远是 #document
nodeValue1. 元素节点的 nodeValue 是 undefined 或 null
2. 文本节点的 nodeValue 是文本自身
3. 属性节点的 nodeValue 是属性的值
nodeType节点的类型，是只读的。下表是常见的几种节点类型
元素1
属性2
文本3
注释4
文档5
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  DOM DOM对象
相关文章推荐
新的分享
章节导航