javascript之DOM初探

一、 HTML DOM（文档对象模型）

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。
HTML DOM模型被构造为对象的树。
这里写图片描述
通过可编程的对象模型，javascript获得了足够的能力来创建动态的HTML。

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

二、查找HTML元素

为了实习对HTML的元素和属性，CSS样式的改变以及对页面中事件做出响应，需要先找到相应的元素。可以通过以下三种方法进行获取。

1. 通过id查找HTML元素

var postId = document.getElementById("postId");

2. 通过标签名查找HTML元素

var p = document.getElementByTagName("p");

3. 通过类名查找HTML元素

var postClass = document.getElementByClassName("postClass");

三、改变HTML

1.改变HTML输出流

document.write(Date()); //在 JavaScript 中，document.write() 可用于直接向 HTML 输出流写内容。

2.改变HTML内容

document.getElementById("p1").innerHTML="新文本!";

3.改变HTML属性

//document.getElementById(id).attribute=新属性值
document.getElementById("image").src="landscape.jpg";

四、改变CSS

1.改变HTML样式

//document.getElementById(id).style.property=新样式
doucment.getElementById("p2").style.color="blue";
doucment.getElementById("p2").style.fontSize="18px";

2.使用事件

例如以下事件：

元素被点击
页面加载完成
输入框被修改
…

<body>
    <h1 id="id1">我的标题1</h1>
    <button type="button" onclick="changeStyle()">click me!</button>
</body>
<script>
    function changeStyle() {
     
     
        document.getElementById('id1').style.color="red";
    }
</script>

五、DOM事件

HTML DOM 使 JavaScript 有能力对 HTML 事件做出反应。

1.对事件做出反应

HTML事件的例子：

当用户点击鼠标时
当网页已加载时
当图像已加载时
当鼠标移动到元素上时
当输入字段被改变时
当提交 HTML 表单时
当用户触发按键时

<h1 onclick="this.innerHTML='Ooops!'">点击文本！</h1>
//或从事件处理器调用一个函数
<h1 onclick="changetext(this)">点击文本！</h1>
<script>
    function changetext(id) {
     
     
        id.innerHTML="Ooops!";
    }
</script>

2.HTML事件属性

<button onclick="displayDate()">click me！</button>

3.使用HTML DOM来分配事件

<scrirpt>
    document.getElementById("myBtn").onclick = function(){
    
    displayDate()};
</script>

4.onload和onunload事件

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

onload 事件可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确版本。

onload 和 onunload 事件可用于处理 cookie。

<body onload = "checkCookies()">
<script>
    function checkCookies() {
     
     
        if(navigator.cookieEnabled==true){
            alert("cookies可用");
        } else {
            alert("cookies不可用");
        }
    }
</script>

5.onchange事件

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

<input type="text" id="fname" onchange="upperCase()">
<script>
    function upperCase() {
     
     
        var x=document.getElementById("fname");
        x.value=x.value.toUpperCase();
    }
</script>

6.onmouseover和onmouseout事件

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

<div onmouseover="mOver(this)" onmouseout="mOut(this)" style="background:red;">Mouse over me</div>
<script>
    function mOver(obj) {
     
     
        obj.innerHTML="Thank you";
    }
    function mOut(obj) {
     
     
        obj.innerHTML="Mouse over me";
    }
</script>

7.onmousedown、onmouseup以及onclick事件

onmousedown, onmouseup 以及 onclick 构成了鼠标点击事件的所有部分。

首先当点击鼠标按钮时，会触发 onmousedown 事件，当释放鼠标按钮时，会触发 onmouseup 事件，最后，当完成鼠标点击时，会触发 onclick 事件。

<div onmousedown="mDown(this)" onmouseup="mUp(this)" style="background-color:red; width:100px; height:100px;">thank you</div>
    <script>
      function mDown(obj) {
     
     
        obj.innerHTML = "Release me";
        obj.style.backgroundColor="blue";
      }
      function mUp(obj) {
     
     
        obj.innerHTML = "thank you";
        obj.style.backgroundColor="red";        
      }
    </script>

六、DOM EventListener

1.addEventListener()方法

addEventListener() 方法用于向指定元素添加事件句柄。
addEventListener() 方法添加的事件句柄不会覆盖已存在的事件句柄。
可以向一个元素添加多个事件句柄。
可以向同个元素添加多个同类型的事件句柄，如：两个 “click” 事件。
可以向任何 DOM 对象添加事件监听，不仅仅是 HTML 元素。如： window 对象。
addEventListener() 方法可以更简单的控制事件（冒泡与捕获）。
当使用 addEventListener() 方法时, JavaScript 从 HTML 标记中分离开来，可读性更强，在没有控制HTML标记时也可以添加事件监听。
可以使用 removeEventListener() 方法来移除事件的监听。

<button id="myBtn">click me</button>
<p id="demo"></p>
<script>
    document.getElementById("myBtn").addEventListener("click", displayDate);
    function displayDate() {
     
     
        document.getElementById("demo").innerHTML=Date();
    }
</script>

2.语法

element.addEventListener(event, function, useCapture);

第一个参数是事件的类型 (如 “click” 或 “mousedown”).
第二个参数是事件触发后调用的函数。
第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的。

3.向原元素添加事件句柄

element.addEventListener("click", function(){
    
     alert("Hello World!"); });
//或使用函数名，引用外部函数：
element.addEventListener("click", myFunction);
function myFunction() {
    
    
    alert ("Hello World!");
}

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

//addEventListener()方法允许向同一个元素添加多个事件，且不会覆盖已存在事件
element.addEventListener("click", myFunction);
element.addEventListener("click", mySecondFunction);

//向同一个元素添加不同类型的事件
element.addEventListener("click", myFunction);
element.addEventListener("click", mySecondFunction);

5.向Window对象添加事件句柄

addEventListener()方法允许你在HTML DOM对象添加事件监听，HTML DOM对象如：HTML元素，HTML文档，window对象。或者其他支出的事件对象如：xmlHttpRequest对象。

window.addEventListener("resize", function(){
    
    
    document.getElementById("demo").innerHTML = sometext;
});

6.传递参数

//当传递参数值时，使用"匿名函数"调用带参数的函数：
element.addEventListener("click", function() {
    
    myFunction(p1, p2);});

7.事件冒泡或事件捕获

事件传递有两种方式：冒泡与捕获。
事件传递定义了元素事件触发的顺序。如果你将<p>元素插入到<div>元素中，用户点击<p>元素，哪个元素的“click”事件先被触发呢？
在冒泡中，内部元素的事件会先被触发，然后再触发外部元素，即：<p>元素的点击事件先触发，然后会触发<div>元素的点击事件。
在捕获中，外部元素的事件会先被触发，然后才会触发内部元素的事件，即：<div>元素的点击事件先触发，然后再触发<p>元素的点击事件。

//addeventListener()方法可以指定"useCapture"参数来设置传递类型：
addEventListener(event, function, useCapture);
//默认值是false，即冒泡传递，当值为true时，事件使用捕获传递。

8.removeEventListener()方法

//removeEventListener() 方法移除由 addEventListener() 方法添加的事件句柄:
element.removeEventListener("mousemove", myFunction);

9.浏览器支持

IE 8 及更早 IE 版本，Opera 7.0及其更早版本不支持 addEventListener() 和 removeEventListener() 方法。对于不兼容的浏览器，可以使用以下方法来替代：

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);
}

七、DOM 元素

1.创建新的HTML元素

<div id="div1">
    <p id="p1">这是一个段落</p>
    <p id="p2">这是另一个段落</p>
</div>
<script>
    var para = document.createElement("p");
    var node = document.createTextNode("这是一个新段落");
    para.appendChild(node);

    var element = document.getElementById("div1");
    element.appendnChild(para);
</script>

2.删除已有的HTML元素

<div id="div1">
    <p id="p1">这是一个段落</p>
    <p id="p2">这是另一个段落</p2>
</div>
<script>
    var parent = document.getElementById("div1");
    var child = document.getElementById("p1");
    parent.removeChild(child);
</script>