代码语言:javascript复制
一、DOM概念
代码语言:javascript复制 "D":Docment,指的是文档“O”:Object,指的是对象,在javascript有三种对象:用户定义对象、内建对象(JavaScript语言对象。如Math,Array)、宿主对象(浏览器对象)"M":Model,值得是Model,某种事物的表现形式二、节点
代码语言:javascript复制 元素节点 :<body> <p> <ul>等文本节点:<p>文本节点</p>、<li>文本节点</li>等属性节点:title id class 等三、获取元素 三种方法:通过元素ID、通过标签名字、通过类名字来获取
请看下面实例:
<h1>What do you want to buy</h1>
<p title="a gentle reminder">Donnot 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>
1、getElementsById(id) 返回一个对象var obj=document.getElementById("purchases");
2、 getElementsByTagName() 返回一个对象数组var obj=document.getElementsByTagName('li')
alert(typeof obj);
alert(obj.length);
for(var i=0;i<obj.length;i ){
alert(typeof obj[i]);
}3、getElementsByClassName() 返回一个对象数组var obj=document.getElementsByClassName('sale');
alert("具有sale类的元素个数:" obj.length);
//important sale顺序颠倒不影响 ----getElementsByClassName('sale important')
var obj_1=document.getElementsByClassName(' important sale');
alert("同时具有important 和sale类的元素个数:" obj_1.length);
四、获取和设置属性1、getAttribue(attribute) var pa=document.getElementsByTagName('p');
for(var i=0;i<pa.length;i ){
var text=pa[i].getAttribute('title');
if(text) alert(text);
}
2、serAttribute(attribue,value)
var shoppping=document.getElementById('purchases');
shoppping.setAttribute('title','A list of goods');
alert(shoppping.getAttribute('title'));
五、小结
getElementById
getElementsByTagNamegetElementsByClassNamegetAttributesetAttribute上面5个常见方法是编写DOM脚本的基石