<DOM title="Document Object Model">
<DOM中的D>
既是HTML中的内容,包括文本、图片、表格、表单及其属性(包括CSS)
</DOM中的D>
<DOM中的O>
对象,东西。将Document实物化
</DOM中的O>
<DOM中的M>
模型,或地图(Map),Document实物化得到的Object的结构图。理解为family tree最佳,应用此树来锁定HTML中的节点从而进行操作
<节点 title="Node">
<元素节点 title="element node">
就是组成HTML的基本元素,如<p><br><img>等标签元素,一般认为元素节点是构成HTML的基本元素
其实在DOM中,元素节点可分为 文本节点 和 属性节点
</元素节点>
<文本节点>
<p>这里是文本节点</p>
</文本节点>
<属性节点>
<p title="a dog">Pat</p> <!--类似于(title="a dog")的是元素节点-->
</属性节点>
并非所有的元素节点都包含属性节点,但是属性节点一定是包含在元素节点里
注意:虽然这三者有包含关系,但是在DOM中都叫节点,是同一类东西
</节点>
<getElementById>
getElementById()方法:这是与document对象相关联的函数。顾名思义,根据元素节点的Id属性得到该元素节点,返回一个对象引用
<example>
document.getElementById('purchases');//得到Id为‘purchases’的元素节点,如:<p id="purchases">...</p>
</example>
</getElementById>
<getElementsByTagName>
getElementsByTagName()方法:与getElementById()相似,只不过TagName(标签名)通常会出现很多次,会查找到多个Elements
返回一个包含对象引用的数组
<example>
var items = document.getELementsByTagName('p'); //将包含引用的数组传给items
alert(items.length); //array.length ,得到数组长度
for (key in items){ //类似于PHP的foreach,遍历数组很方便
alert( typeof items[key]); //typeof: 节点的类型,会看到满眼的Object,即每个元素都是一个对象
}
</example>
</getELementsByTagName>
</DOM中的M>
<小节>
1.一份文档就是一个节点家族树
2.节点分为不同的三种类型
3.getElementById() 返回一个对象引用,对应文档里的一个特定的元素节点(element node)
4.getElementsByTagName() 返回一个对象引用的数组,对应文档里的一些特定的元素节点
5.这些节点都是对象
</小节>
<还有两个方法>
getAttribute() 与 setAttribute() :得到一个节点的属性值 与 设置/修改一个节点的属性值
不同于上面的两个方法,这两个方法不是document的方法,而是与对象关联的方法
不能通过docuemnt.来调用,要通过某一对象来调用
<example>
var paras = document.getElementsByTagName('p');
for (key in paras){
var title_text = paras[key].getAttribute('title'); //输出<p>标签的title的值,如果有的<p>不含title属性,则返回NULL
if (!title_text) { //如果为空的话
paras[key].setAttribute('title', 'New title comes up'); //设置title属性
title_text = paras[key].getAttribute('title');
}
alert(title_text);
}
</example>
</还有两个方法>
</DOM>
javaScript学习笔记 No.1 -- DOM
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.