零基础学习HTML之JS篇DOM文档对象模型属性文本元素节点
DOM 文档对象模型
DOM (document object model) 文档对象模型，它定义了操作文档对象的接口。
DOM 把一份html文档表示为一棵家谱树，使用parent(父), child(子), sibling(兄弟)等记号来表明家庭成员之间的关系。
节点
节点（node) 一词来自于网络理论，这代表着网络中一个个的连接点，网络是由节点构成的。对于html文档也是一样，文档是由节点构成的集合。
1.元素节点
元素节点如 <body> <p> <div> 之类的元素，这些元素在文档中的布局形成了文档的结构。
2.文本节点
文本节点指的是元素节点中的内容，但并非所有的元素节点都包含有文本节点。
3.属性节点
元素都或多或少有一些属性，属性的作用是对元素作出更具体的描述。属性节点总是被包含在元素节点当中。
html:
<body>
<p title="这里显示提示信息">这是一个段落</p>
</body>
p ： 元素节点。
title="这里显示提示信息"： 属性节点。
这是一个段落： 文本节点
获取文档对象
一、直接引用节点
1.getElementById()
这个方法返回一个与给定id属性值的元素节点相对应的对象。
例：document.getElementById(‘ha’);
2.getElementsByTagName()
这个方法返回一个对象数组。每个对象分别对应着文档里给定标签的一个元素。
例：document.getElementsByTagName(‘li’);
3.getElementsByName()
通过 name 获取一个对象数组
二、间接引用节点
除了可以直接引用节点，还可以通过节点间的关系来引用相对节点。
1.引用子节点
每个节点都有一个childNodes集合属性，类型是数组对象，表示该节点的所有子节点的集合。这些子节点按照其在文档中出现的顺序排列，因此可以通过索引来依次访问各个子节
点。
例：document.childNodes[0];//引用文档的根节点
document.childNodes[0].childNodes[0]//引用<head>节点
document.childNodes[0].childNodes[1]//引用<body>节点
除了使用childNodes属性，还有两个属性可以用于引用子节点，分别是：
element.firstChild;
element.lastChild;
它们分别表示第一个子结点和最后一个子结点。
2.引用父节点
html的节点层次是一个树状结构，除了根节点外，每个节点都仅有一个父节点，可以由parentNode属性来引用
element.parentNode;//引用父节点
3.引用兄弟节点
属于同一个文档层次的节点称为兄弟节点，有两个属性可以用于兄弟节点间引用，分别是：
element.nextSibling; //引用下一个兄弟节点
element.previousSibling;//引用上一个兄弟节点
三、获取节点信息
在获得一个节点的引用后，有一些方法可以获得该节点的信息。
1.nodeName 获取节点名称
语法：Node.nodeName;
不同的类型的节点，nodeName的返回值有所差异：
元素节点：返回标记名称;
属性节点：返回属性名称;
文本节点：返回文本 #text
2.nodeType 获取节点类型
语法： Node.nodeType;
元素节点：返回 1
属性节点：返回 2
文本节点：返回 3
3.nodeValue 获取节点的值
语法： Node.nodeValue;
元素节点：返回null
属性节点：返回节点值
文本节点：返回文本内容
四、处理属性节点
1. getAttribute 获取节点属性值
object.getAttribute(attribute)
例： var a = document.getElementsByTagName(‘a’);
for(var i=0; i<a.length; i++){
alert(a[i].getAttribute(‘title’));
}
2.setAttribute() 设置节点属性值
object.setAttribute(attribute, value)
例：var link = document.getElementById(‘link’);
link.setAttribute(‘title’, ‘链接提示信息’);
DOM 总结：
一份文档就是一棵树;
节点分为不同的类型，分别是：元素节点，属性节点，文本节点;
每个节点都是一个对象;
getElementById()方法将返回一个对象，该对象对应着文档里的一个元素节点;
getElementsByTagName()方法返回一个对象数组，它们分别对应着文档里的元素
节点;
下一节将讲到事件及表单对象等。
评论列表 共有 0 条评论
热门产品
php编程基础教程.pptx
历史上的今天：04月28日
猜你喜欢
热门专题
大理科技管理学校
卓越综合高中
天麻的功效与作用吃法
易捷尔单招
自考本科
云南高职单招
大理科技管理学校
发表评论 取消回复