DOM(Document Object Model)——文档对象模型
一个网页是一个文档。这个文档可以被显示在浏览器窗口中,也可以以html源码的形式显示。
DOM提供了另一种方式来表示,存储,操作这个文档。DOM是网页的一种完全的面向对象的表示方法,可以通过脚本语言(比如说JavaScript)来改变。
DOM与BOM的关系?——BOM包含DOM
document对象有三个强大的方法,可以获取页面的任何元素
1.
2.
2.1 getElementsByTagName还可以使用通配符*来获取所有的元素
2.2更强大的是,getElementsByTagName不但可以在document对象上调用,也可以在其它HTML元素上调用
3.
4.获取和设置元素属性——getAttribute与setAttribute方法
一个网页是一个文档。这个文档可以被显示在浏览器窗口中,也可以以html源码的形式显示。
DOM提供了另一种方式来表示,存储,操作这个文档。DOM是网页的一种完全的面向对象的表示方法,可以通过脚本语言(比如说JavaScript)来改变。
DOM与BOM的关系?——BOM包含DOM
document对象有三个强大的方法,可以获取页面的任何元素
1.
var p1 = document.getElementById("p1");
//获取ID为p1的那个元素
//在一个文档中ID必须是唯一的,getElementById方法只会返回一个元素 alert(p1.tagName);
2.
var allP = document.getElementsByTagName("p");
//获取文档中所有p标签
//因为页面中标签相同的元素很多,所以即使页面中只有一个p素,getElementsByTagName也会返回一个集合
for (var i=0;i < allP.length;i++) {
alert(allP[i].innerHTML);//像数组一样访问其中的每个元素
}
2.1 getElementsByTagName还可以使用通配符*来获取所有的元素
var allTags = document.getElementsByTagName("*");
alert(allTags.length);
2.2更强大的是,getElementsByTagName不但可以在document对象上调用,也可以在其它HTML元素上调用
var p2 = document.getElementById("p2");
var p2ps = p2.getElementsByTagName("em");//将获取p2下面的em元素,而不获取p2之外的em
//还有一个通过name来获取元素的方法:getElementsByName
3.
var radios = document.getElementsByName("check");
//获取所有name为check的元素
4.获取和设置元素属性——getAttribute与setAttribute方法
var p1 = document.getElementById("p1");
alert(p1.getAttribute("id"));
p1.setAttribute("title","Value");