JavaScript_DOM

2024-04-27 15:03:43

字体：大中小

来源：转载

供稿：网友

DOM(document object model) 即文档对象模型。 DOM中共有三种类型的节点，元素节点、文本节点、属性节点。

getElementsById()

通过ID获取元素 一个ID只能使用一次，所以，该方法会返回一个唯一的对象 注：可以使用typeof判断变量的类型

typedof + 变量名

以下面这段代码为例：

<html lang="en"> <head> <meta charset="utf-8"/> <title>Shopping list</title> </head> <body> <h1>What to by</h1> <p title="a gentle reminder">Don't forget to buy this stuff</p> <ul id="purchases"> <li>A tin of beans</li> <li class="sale">Cheese</li> <li class="sale implement">Milk</li> </ul> <script src="JS/test1.js"></script> </body></html>var temp = document.getElementById("purchases");alert(typeof temp);

结果为object

getElementsByTagName()

根据标签名返回一个对象数组

使用以下javaScript语句：

var temp = document.getElementsByTagName("li");alert(temp.length);

结果是3 ，表示一个长度为3的数组。也可以将函数参数改为通配符*，这样表示获取DOM中的所有标签。

getElementsByClassName()

通过类名获取元素，返回一个数组。参数为类名，类名可以不唯一，多个类名表示同时含有多个类名的元素，类名顺序可以不固定 这个方法比较新，不是所有浏览器都支持

获取/更改标签中的属性值

可以通过getAttribute(attribute)获取元素中的属性值，通过setAttribute(attribute,value)来更改属性的值，如果一个元素原来没有这个属性，使用setAttribute会先创建这个属性在给这个属性赋值，虽然创建了这个属性，但是网页的源码并不会因此发生任何改变，

var temp = document.getElementsByTagName("p");for(var i = 0 ; i < temp.length; i++){ alert(temp[i].getAttribute("title")); temp[i].setAttribute("title","s"); alert(temp[i].getAttribute("title"));}

结果是先弹出a gentle reminder，再弹出s，因为title的值被更改为s。

上一篇：bound-once

下一篇：Bootstrap 3的box-sizing样式导致UEditor控件的图片无法正常缩放