web前端之JavaScript DOM编程艺术之DOM

来源：互联网发布：it行业云计算编辑：程序博客网时间：2024/05/01 16:31

web前端之JavaScript DOM编程艺术之DOM

5个常用DOM方法:getElementById,getElementsByTagName,getElementsByClassName,getAttribute和setAttribute
文档:DOM中的”D”:
如果没有document(文档),DOM无从谈起。
对象:DOM中的”O”:
用户定义对象(user-defined object):有程序员自行创建的对象
内建对象(native object):内建在JavaScript语言里的对象,如Array、Math、Date等
宿主对象(host object):由浏览器提供的对象,如window
模型:DOM中的”M”:
DOM代表着加载到浏览器窗口的当前网页,浏览器提供了网页的模型,我们就通过JavaScript去读取这个模型

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head>    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">    <title>Shopping list</title></head><body>    <h1>What to buy</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 important">Milk</li>    </ul></body></html>

html:为整个程序的根目录
head,body:为整个程序的子目录
……
综上,html文档可以看成”节点树”

节点:

元素节点:
html、p、ul等都属于元素节点
文本节点:

<p>这中间的文字就是文本节点</p>

属性节点:

<p title="reminder">这中间的文字就是文本节点</p>

title=”reminder”就是p的属性节点
CSS:
CSS(层叠样式表)告诉浏览器应该如何显示一份文档的内容,也是一种节点

获取元素:
getElementById:
document.getElementById(‘purchases’);用这个就可以调用id名为purchases的元素

getElementsByTagName:
getElementsByTagName方法返回一个对象数组,每个对象数组分别对应着文档里有着给定标签的一个元素,类似于getElementById
document.getElementsByTagName(‘li’);
这个调用li的对象数组

var items=document.getElementsByTagName('li');for(var i=0;i<items.length;i++){    alert(typeof items[i]);}

getElementsByClassName: HTML5 DOM新增的方法.这个方法可以通过class属性中的类名来访问元素.
document.getElementsByClassName(“sale”);来获取那些带有多个类名的元素。

获取和设置属性：
getAttribute：
getAttribute不属于document,所以不能通过document来进行调用,只能通过元素节点对象调用.例如,可以与getElementsByTagName方法合用:

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

setAttribute：
setAttribute方法允许我们对属性节点的值作出修改。与getAttribute一样,setAttribute也只能用于元素节点对象.
object.setAttribute(attribute,value);

var shopping=document.getElementsByTagName('p');shopping.setAttribute("title","this is a good job");

注:setAttribute只能改变显示状态,却改变不了内在状态

1 0