DOM(一)DOM简介及查找元素的几个方法、操作特性

一、概念:
DOM即稳当对象模型,是针对HTML和XML文档的一个API(应用程序接口)
D:可以理解为整个web加载的网页文档
O:(对象)类似window对象,可调用属性和方法
M:(模型)网页文档的树形结构
节点层次:数据结构中描述的树形结构可以很好的解释HTML的节点之间的关系。节点可分为三类:
元素节点:
文本节点:标签内的纯文本
属性节点:其实就是标签的属性,如:id=”box”
二、查找元素的几个方法详解
1、getElementById():
括号里传递一个元素的id值,这样便可以获取该元素的节点(此处id值需注意大小写!)
PS:如果设置了这个但是查找不到元素,先别慌,看看是不是文档还没有加载便执行了js代码(DOM操作必须等待HTML文档加载完毕才可以获取元素节点的!!!)
解决方法:把js标签移到文档后面或者使用onload加载事件
具体使用方法如下:

window.onload=function(){
    var box=document.getElementById("box");     //  !节点元素属性
    alert(box.tagName); //获取这个元素节点的标签名(此处打印大写DIV)
    alert(box.innerHTML);//获取元素节点里的内容(文本包含HTML的标签),非W3C DOM规范(纯文本不包含标签)文本内容
    alert(box.id);//获取这个元素的id属性值
    alert(box.title);//获取title属性的值
    alert(box.style.color);//[object CSS2Properties]即style属性对象
    alert(box.className); //获取class属性的值
    alert(box.aaa); //自定义的属性获取不到undefined
    box.innerHTML="你是谁"; //可替换内容  可以解析html
    alert(box.innerHTML);  
};     

2、getElementsByTagName()
括号里填写需要查找的元素名称,一般返回一个数组集合
如果括号里是*则返回所有元素

//HTML代码
  • 1
  • 2
  • 3
//js代码 window.onload=function(){ var i= document.getElementsByTagName('li'); alert(i); //[object HTMLCollection] 返回一个数组集合 元素 alert(i.length); //3个 alert(i[0]);//[object HTMLLIElement] alert(i.item[0]); alert(i[0].tagName);//大写的LI } var body=document.getElementByTagName('*');//返回所有

3、getElementsByName()
该 方法可以获取相同名称(name)的元素,返回一个对象数组HTMLCollection(NodeList)。
三、操作特性
1、getAttribute()方法将获取元素中某个属性的值。它和直接使用.属性获取属性值的方法有一定区别。

 document.getElementById('box').getAttribute('mydiv');//获取元素的自定义属性值
          document.getElementById('box').mydiv      //获取元素的自定义属性值,非IE不支持

这里需要注意的是,有两类特殊的特性,虽然它们有对应的属性名,但是属性的值与通过getAttribute()返回的值并不相同,即style和onclick。
style用于通过css为元素指定样式,通过getAttribute()访问返回的style特性值包含的是CSS文本,而通过属性访问它则返回一个对象。
onclick该特性中包含的是js代码,通过getAttribute()访问返回相应的代码,但是通过属性访问则返回一个js函数。
一般为避免这些差别,尽量使用对象的属性。
2、setAttribute()方法将设置元素中某个属性和值。
它需要接受两个参数:属性名和值。如果属性本身已存在,那么就会被覆盖。若不存在,则创建一个。(推荐使用属性来设置特性)
3、removeAttribute()方法 用于彻底删除元素的特性(会从元素中完全删除特性!)

你可能感兴趣的