HTML DOM

简介

• 当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。

• HTML DOM 独立于平台和编程语言。它可被任何编程语言诸如 Java、JavaScript 和 VBScript 使用。如：

  • 改变页面中的所有 HTML元素
  • 改变页面中的所有 HTML 属性
  • 改变页面中的所有 CSS 样式
  • 对页面中的所有事件做出反应

• HTML DOM 模型被构造为对象的树：
  

查找HTML元素

有四种方式查找：

• 通过id查找，var x=document.getElementById("myid");如果找到该元素，则该方法将以对象（在 x 中）的形式返回该元素；如果未找到该元素，则 x 将包含 null
• 通过name查找，var x=document.getElementsByName("myname");，以数组形式返回，若不存在则返回长度为0的空数组
• 通过标签名查找，var x = document.getElementsByTagName("p");，以数组形式返回，若不存在则返回长度为0的空数组
• 通过类名查找，var x=document.getElementsByClassName("myclass");，以数组形式返回，若不存在则返回长度为0的空数组

改变HTML内容

• 改变HTML输出流

document.write(xxx)，可用于直接向HTML输出流写内容。
**注意：**绝对不要在文档加载完成之后使用 document.write()。这会覆盖该文档。

• 改变HTML内容

• 使用innerHTML属性，语法如下：document.getElementById(id).innerHTML=new HTML
• 使用value属性，语法如下：document.getElementById(id).value=new HTML

• 改变HTML属性

语法如下：document.getElementById(id).attribute=new value
示例如下：

	document.forms;//获取所有表单
	document.forms[0].name;//获取第一个表单的name
	document.title;//获取标题
	document.getElementById("image").src="/xxx/xx.png";
	document.getElementById("image").width = "300";//在300后不能加 px;
	document.getElementById("image").name;//获取名字
	document.getElementById("image").value;//获取值
	document.getElementById("buttonId").disabled = true;//使按钮不可用
	document.getElementById("frm1").reset();//重置表单
	document.getElementById("frm1").submit();//提交表单
	document.getElementById("myframe").scrolling="no";//设置scrolling属性
	document.getElementById("mySelect").options;//获取下拉框中的所有项
	document.getElementById("mySelect").selectedIndex;//获取下拉框中被选中的id
	document.getElementById("mySelect").selectedOptions[0].innerHTML;//获取下拉框中被选中的文本
	document.getElementById('myTable').rows[0].cells[0].innerHTML;//获取表格中一个单元格的内部html
	document.getElementById('myTable').deleteRow(2);//删除表格的第三行
	//在表格中添加一行
	var x=document.getElementById('myTable').insertRow(0);
	var y=x.insertCell(0);
	var z=x.insertCell(1);
	y.innerHTML="NEW CELL1";
	z.innerHTML="NEW CELL2";

改变CSS

• 改变HTML样式

语法如下：document.getElementById(id).style.property=new styl
示例如下：

	document.getElementById("p2").style.color="blue";
	document.getElementById("p2").style.fontSize="larger";//这边的属性都需要转换成驼峰式写法
	document.getElementById("div1").style.backgroundColor="#ff0000";
	document.getElementById('p1').style.visibility='hidden';//使元素不可见，visible使元素可见
	document.getElementById('p1').style.display='none';//使元素不可见，block等，使元素可见

HTML DOM 事件

• 对事件做出反应的写法

  • 在标签中直接书写

         <h1 onclick="this.innerHTML='Ooops!'">点击文本!</h1> 
    

  • 从事件处理器调用一个函数

      <h1 onclick="changetext(this)">Click on this text!</h1>
    

  • 使用JavaScript来向HTML元素分配事件

      function myFun(){
      	alert("hello");
      } 
      //例一
      document.getElementById("myid").onclick=function(){alert("hello")}; 
      //例二
      document.getElementById("myid").onclick=function(){myFun()};
      //例三，与例一、例二执行的效果不同，该写法myFun()方法会直接被执行
      document.getElementById("myid").onclick=myFun();
      //例四，使用该写法，相同元素，后面的事件会覆盖前面的事件
      document.getElementById("myid").onclick=myFun();
      document.getElementById("myid").onclick=function(){alert("hello")}; 
    

• onload和onunload事件

onload 和 onunload 事件会在用户进入或离开页面时被触发

• onchange 事件

onchange 事件常结合对输入字段的验证来使用，如：

	<input type="text" id="fname" onchange="upperCase()">

• onmouseover 和 onmouseout 事件

onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数，如：

	<div onmouseover="mOver(this)" onmouseout="mOut(this)" 
	     style="background-color:#D94A38;width:120px;height:20px;padding:40px;">
	Mouse Over Me
	</div>

• onmousedown、onmouseup 以及 onclick 事件

onmousedown, onmouseup 以及 onclick 构成了鼠标点击事件的所有部分。首先当点击鼠标按钮时，会触发 onmousedown 事件，当释放鼠标按钮时，会触发 onmouseup 事件，最后，当完成鼠标点击时，会触发 onclick 事件。如：

	<div onmousedown="mDown(this)" onmouseup="mUp(this)" 
	     style="background-color:#D94A38;width:90px;height:20px;padding:40px;">
	Click Me//方法中的this为当前元素的对象
	</div>

HTML DOM EventListener

• addEventListener()方法

该方法用于向指定元素添加事件句柄。
方法添加的事件句柄不会覆盖已存在的事件句柄。
可以向一个元素添加多个事件句柄
可以向同个元素添加多个同类型的事件句柄，如：两个 “click” 事件（他们被触发的顺序是，谁的代码写在前面，谁先触发）
语法：element.addEventListener(event, function, useCapture);
* 第一个参数是事件的类型 (如 “click” 或 “mousedown”)
**注意：**不要使用 “on” 前缀。 例如，使用 “click” ,而不是使用 “onclick”
* 第二个参数是事件触发后调用的函数
* 第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的


事件传递定义了元素事件触发的顺序。 如果你将 <p> 元素插入到 <div> 元素中，用户点击 <p> 元素, 哪个元素的 “click” 事件先被触发呢？
在冒泡中，内部元素的事件会先被触发，然后再触发外部元素，即： <p> 元素的点击事件先触发，然后会触发 <div> 元素的点击事件。
在捕获中，外部元素的事件会先被触发，然后才会触发内部元素的事件，即： <div> 元素的点击事件先触发 ，然后再触发 <p> 元素的点击事件。
默认值为 false, 即冒泡传递，当值为 true 时, 事件使用捕获传递

• 向原元素添加事件句柄

    //例一
    element.addEventListener("click", function(){ alert("Hello World!"); });
    //例二，使用函数名，来引用外部函数，myFunction不会被立即执行
    element.addEventListener("click", myFunction); 
    function myFunction() { 
    	alert ("Hello World!"); 
    }
  

• 向同一个元素中添加多个事件句柄

    //同一元素添加多个相同事件句柄
    element.addEventListener("click", myFunction); 
    element.addEventListener("click", mySecondFunction); 
    //同一元素添加多个不同类型的事件句柄
    element.addEventListener("mouseover", myFunction); 
    element.addEventListener("click", mySecondFunction); 
    element.addEventListener("mouseout", myThirdFunction);
    //当传递参数值时，使用"匿名函数"调用带参数的函数
    element.addEventListener("click", function(){ myFunction(p1, p2); });
  

• removeEventListener()方法

该方法移除由 addEventListener() 方法添加的事件句柄，如：

//mousemove，在区域内移动鼠标触发的事件
element.removeEventListener("mousemove", myFunction);//移除 区域内移动鼠标触发myFunction方法的事件

**注意：**IE 8 及更早 IE 版本，Opera 7.0及其更早版本不支持 addEventListener() 和 removeEventListener() 方法。但是，对于这类浏览器版本可以使用 detachEvent() 方法来移除事件句柄：

	element.attachEvent(event, function);
	element.detachEvent(event, function); 
	//跨浏览器解决方案
	var x = document.getElementById("myBtn"); 
	if (x.addEventListener) {                    // 所有主流浏览器，除了 IE 8 及更早版本 
	    x.addEventListener("click", myFunction); 
	} else if (x.attachEvent) {                  // IE 8 及更早版本 
	    x.attachEvent("onclick", myFunction); 
	}

HTML DOM 元素

• 在文档对象模型 (DOM) 中，每个节点都是一个对象。DOM 节点有三个重要的属性：1. nodeName : 节点的名称；2. nodeValue ：节点的值；3. nodeType ：节点的类型

• 以下是对节点元素的一些操作

    var para=document.createElement("p");//创建元素p
    var node=document.createTextNode("This is new.");//创建文本节点
    para.appendChild(node);//向<p>元素追加文本节点
    //删除元素，方法一
    var parent=document.getElementById("div1");//获取父元素
    var child=document.getElementById("p1");//获取子元素
    parent.removeChild(child);//从父元素中删除子元素
    //删除元素，方法二
    var child=document.getElementById("p1");//获取需要删除的元素
    child.parentNode.removeChild(child);	//通过parentNode找到其父元素再进行删除