DOM简介
“Document Object Model”
1.HTML DOM:网页被加载时,浏览器会创建文档对象模型
2.DOM操作HTML:改变HTML的元素、属性、CSS样式、对所有事件作出反应
节点层次
基本方法
getElementById()
返回给定id属性值的元素节点(唯一的)相对应的对象
getElementsByTagName()
返回一个对象数组,每个对象分别对应给定标签的元素
//通配符(*)与乘号区分,要加""号
//想知道文档总共有多少个元素节点
alert (document.getElementsByTagName("*").length);
getAttribute()
1.查询元素的各种属性
2.不能用ducument对象调用,和getElementsTagName()结合
var paras=document.getElementsByTagName("p");
for (var i=0;i<paras.length;i++){
var title_text=paras[i].getAttribute("title");
if(title_text)
alert(title_text);
}
setAttribute()
1.对属性节点的值做修改
2.与getAttribute()一样,只能通过元素节点对象调用的函数
3.需要传递两个参数(attribute,value)
var shopping=document.getElementById("purchase");
alert(shopping.getAttribute("title"));//空白或者null
shopping.setAttribute("title","a list of goods");//相当于完成了两个操作,创建一个不存在的"title"属性,再设置值
/*如果属性原来存在,则值会被覆盖*/
alert(shopping.getAttribute("title"));//显示“a list of goods”
DOM操作HTML
1.改变HTML输出流
不要在文档加载完成后使用document.write()
2.寻找元素
(1)通过id
(2)通过标签名
3.改变HTML内容
innerHTML
<p id="pid">hello</p>
<p id="pid">hello</p>
<button onclick="demo()">按钮</button>
<script>
function demo(){
var nv=document.getElementById("pid").innerHTML="HELLO";
document.getElementByTagName("p");//同类元素中的第一个
}
</script>
4.改变HTML属性
attribute
<a id="aid" href="http://www.a.com">hello</a>
<button onclick="demo()">按钮</button>
<script>
function demo(){
document.getElementById("aid").href="http://www.b.com";
}
</script>
DOM操作CSS
<div class="div" id="div">Hello</div>
<button onclick="demo()">按钮</button>
<script>
function demo(){
document.getElementById("div").style.background="#fff";
</script>
DOM EventListener
addEventListener():向指定元素添加事件句柄
removeEventListener():移除方法添加的事件句柄
<button id="btn">按钮</button>
<script>
document.getElementById("btn").addEventListener("click",function(){
alert("HELLO")
});
</script>
<button id="btn">按钮</button>
<script>
var x=document.getElementById("btn");
x.addEventListener("click",hello);//添加句柄
x.addEventListener("click",world);
x.removeEventListener("click",world);//移除句柄
function hello(){
alert("hello");
}
function world(){
alert("world");
}
</script>