当页面加载时,浏览器会创建页面的文档对象模型(Document Object Model)。文档对象模型定义访问和处理HTML文档的标准方法。DOM 将HTML文档呈现为带有元素、属性和文本的树结构,即节点树。通过DOM,JS可创建动态的HTML,可以使网页显示动态效果并实现与用户的交互功能。JS能够改变页面中所有的HTML元素、属性和CSS样式,并对页面中所有事件做出响应。所以学习JS的起点就是处理网页,处理网页就需要使用DOM进行操作。
2、DOM获取元素。
JS要想操作HTML元素,那么首先就必须先找到该元素。通常使用以下几种方法完成:
通过元素设置的id找到HTML元素。
通过标签名找到HTML元素。
通过元素设置的名称(name)找到HTML元素。
所谓的DOM,实际上就是document,获取元素就是操作document。
(1)、通过id找到元素
方法:document.getElementById('id');
网页是由标签将信息组合起来的,id属性值是唯一的,就像身份证一样,通过一个身份证可以找到相对应的人,所以通过该方法,可以获取到与之相对应的标签,而获取的元素在JS中是一个对象,若想对元素进行操作,则需要通过他的属性或方法。
(2)、通过标签名找到元素
方法:document.getElementsByTagName('Tagname');
通过该方法,返回的是带有指定标签名的对象的集合,也就是以数组的形式返回,返回的顺序是他们在文档中的顺序。
(3)、通过name找到元素
方法:document.getElementsByName('name');
该方法与getElementById()方法有点相似,都是通过设置的属性值找到元素,只不过该方法是通过设置的name属性值查找元素。name属性在文档中可能不唯一,所以该方法返回的也是元素的数组,而不是一个元素。
HTML文档可以说是由节点构成的集合,常见的DOM节点有三种,即元素节点、属性节点和文本节点。元素节点就是HTML标签,标签的属性就是属性节点,文本节点就是页面可以浏览的内容。
在文档对象模型中,每一个节点都是一个对象,DOM节点有三个重要的属性:节点的名称,节点的值和节点的类型。
(1)、nodeName:节点的名称
nodeName属性返回节点的名称。元素节点的名称与标签名相同(大写),属性节点的名称是属性的名称,文本节点的名称永远都是#text,文档节点的名称永远都是#document。
(2)、nodeValue:节点的值
nodeValue属性返回节点的值。元素节点的值是undegined或null,属性节点的值是属性的值,文本节点的值是文本自身。
(3)、nodeType:节点的类型
nodeType属性返回节点的类型。以下是常见的节点类型:
声明:本网页内容旨在传播知识,若有侵权等问题请及时与本网联系,我们将在第一时间删除处理。TEL:177 7030 7066 E-MAIL:11247931@qq.com
JavaScriptDOM学习总结(五)_javascript技巧
JavaScriptDOM学习总结(五)_javascript技巧:1、DOM简介。 当页面加载时,浏览器会创建页面的文档对象模型(Document Object Model)。文档对象模型定义访问和处理HTML文档的标准方法。DOM 将HTML文档呈现为带有元素、属性和文本的树结构,即节点树。通过DOM,JS可创建动态的HTML,可以使网页显示推荐度:
- 热门焦点