零基础学习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) 打赏

评论列表 共有 0 条评论

暂无评论

热门产品

历史上的今天:03月29日

热门专题

综合高中|云南综合高中,昆明综合高中,综合高中能考本一吗,综合高中和普通高中的区别,综合高中是什么意思,综合高中能参加全国统一高考吗,综合高中可以考哪些大学,综合高中的学籍是什么
综合高中
天麻的功效与作用吃法|天麻的功效与作用,天麻的功效与作用吃法,天麻炖什么治头痛最好,天麻的功效与作用禁忌,天麻多少钱一斤,天麻的功效与作用吃法及禁忌,天麻怎么吃效果最好,天麻粉的功效与作用,天麻怎么吃
天麻的功效与作用吃法
昆明网站建设|昆明网站建设,昆明网站开发,昆明网站建设公司,昆明网站建设价格,昆明网站设计,昆明网站制作,网页设计,高端网站建设,高端网站设计
昆明网站建设
易捷尔高职单招|易捷尔高职单招,易捷尔高职单招培训,单招分数线,单招录取分数线,高职单招学校分数线
易捷尔高职单招
卓越综合高中|卓越综合高中
卓越综合高中
金诺幼儿园(春城路金诺幼儿园)|昆明官渡区幼儿园,幼儿园报名,官渡区幼儿园,春城路幼儿园,幼儿园招生,学前班,昆明幼儿园,金诺幼儿园,环城南路幼儿园,石井路幼儿园
金诺幼儿园(春城路金诺幼儿园)
云南巨榕教育投资集团有限公司|云南巨榕教育投资集团有限公司,巨榕教育集团,巨榕教育
云南巨榕教育投资集团有限公司
云南网站建设|云南网站制作,网站建设,云南网站开发,云南网站设计,云南网页设计,云南网站建设公司,云南网站建设
云南网站建设

微信小程序

微信扫一扫体验

立即
投稿

微信公众账号

微信扫一扫加关注

发表
评论
返回
顶部