html dom基础知识一、什么是dom?1、html dom 定义了访问和操作html文档的标准方法。
2、html dom 把 html 文档呈现为带有元素、属性和文本的树结构(节点树)。
3、通过 javascript,您可以重构整个 html 文档。您可以添加、移除、改变或重排页面上的项目。要改变页面的某个东西,javascript 就需要获得对 html 文档中所有元素进行访问的入口。这个入口,连同对 html 元素进行添加、移动、改变或移除的方法和属性,都是通过文档对象模型来获得的(dom)。dom 可被 javascript 用来读取、改变 html、xhtml 以及 xml 文档。
4、dom 被分为不同的部分(核心、xml及html)和级别(dom level 1/2/3):
*core dom:定义了一套标准的针对任何结构化文档的对象*xml dom:定义了一套标准的针对 xml 文档的对象 *html dom:定义了一套标准的针对 html 文档的对象。
二、html dom节点及节点树1、节点
根据 dom,html 文档中的每个成分都是一个节点。
dom 是这样规定的:
整个文档是一个文档节点每个 html 标签是一个元素节点包含在 html 元素中的文本是文本节点每一个 html 属性是一个属性节点注释属于注释节点2、node 层次
节点彼此都有等级关系。
html 文档中的所有节点组成了一个文档树(或节点树)。html 文档中的每个元素、属性、文本等都代表着树中的一个节点。树起始于文档节点,并由此继续伸出枝条,直到处于这棵树最低级别的所有文本节点为止。
下面这个图片表示一个文档树(节点树):
3、节点树
1 html>2 head>3 title>dom tutorialtitle> 4 head> 5 body> 6 h1>dom lesson oneh1> 7 p>hello world!p> 8 body> 9 html>
上面所有的节点彼此间都存在关系。
*除文档节点之外的每个节点都有父节点。举例,
和 的父节点是 节点,文本节点 hello world! 的父节点是 节点。
*大部分元素节点都有子节点。比方说,
节点有一个子节点: 节点。 节点也有一个子节点:文本节点 dom tutorial。*当节点分享同一个父节点时,它们就是同辈(同级节点)。比方说,
和 是同辈,因为它们的父节点均是
节点。*节点也可以拥有后代,后代指某个节点的所有子节点,或者这些子节点的子节点,以此类推。比方说,所有的文本节点都是 节点的后代,而第一个文本节点是
节点的后代。*节点也可以拥有先辈。先辈是某个节点的父节点,或者父节点的父节点,以此类推。比方说,所有的文本节点都可把 节点作为先辈节点。
三、html dom访问节点的方法1.查找并访问节点
你可通过若干种方法来查找您希望操作的元素:
通过使用 getelementbyid() 和 getelementsbytagname() 方法通过使用一个元素节点的 parentnode、firstchild 以及 lastchild 属性 2.getelementbyid() 和 getelementsbytagname()
(1)getelementbyid() 可通过指定的 id 来返回元素,语法:
document.getelementbyid(id);
(2)getelementsbytagname() 方法会使用指定的标签名返回所有的元素(作为一个节点列表),这些元素是您在使用此方法时所处的元素的后代。getelementsbytagname() 可被用于任何的 html 元素:
语法:
document.getelementsbytagname(标签名称);
或者:
document.getelementbyid('id').getelementsbytagname(标签名称);
<访问节点列表时,索引号从0开始>
3.parentnode、firstchild以及lastchild
这三个属性 parentnode、firstchild 以及 lastchild 可遵循文档的结构,在文档中进行“短距离的旅行”。对 firstchild 最普遍的用法是访问某个元素的文本;parentnode 属性常被用来改变文档的结构;
4.根节点
有两种特殊的文档属性可用来访问根节点:
document.documentelementdocument.body第一个属性可返回存在于 xml 以及 html 文档中的文档根节点。
第二个属性是对 html 页面的特殊扩展,提供了对
标签的直接访问。
四.节点信息每个节点都拥有包含着关于节点某些信息的属性。这些属性是:
nodename(节点名称)nodevalue(节点值)nodetype(节点类型) 1.nodename
nodename 属性含有某个节点的名称。
元素节点的 nodename 是标签名称属性节点的 nodename 是属性名称文本节点的 nodename 永远是 #text文档节点的 nodename 永远是 #document注释:nodename 所包含的 xml 元素的标签名称永远是大写的
2.nodevalue
对于文本节点,nodevalue 属性包含文本。
对于属性节点,nodevalue 属性包含属性值。
nodevalue 属性对于文档节点和元素节点是不可用的。
3.nodetype
nodetype 属性可返回节点的类型。