JavaScript+DOM编程艺术 第三章 DOM

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>