Web前端基础（6）浏览器对象模型DOM

发表于 | 分类于 ， | 评论数：

JavaScript组成

JavaScript由三部分组成

  1. ECMAscript – 欧洲计算机制造商协会，描述了javascript的语法和基本对象。
  2. DOM – 文档对象模型，处理网页内容的方法和接口。
  3. BOM – 浏览器对象模型，与浏览器交互的方法和接口。

DOM的定义

DOM为文档提供了结构化表示，并定义了如何通过脚本来访问文档结构，目的其实就是为了能让javascript操作html元素而定制的一个规范。

DOM树如下

由结构图中我们可以看到，整个文档就是一个文档节点。而每一个HMTL标签都是一个元素节点。

访问DOM节点的方法

  1. getElementById()：通过id访问DOM节点
1
2
3
4
5
6
7
8
9
<html>
    <body>
        <p id="p1">Hello World!</p>
        <script>
            document.getElementById("p1").innerHTML="New text!";
            //将上面的"Hello WOrld!"的文本改为"New text"
        </script>
    </body>
</html>
  1. getElementsByTagName()：通过标签名称访问DOM节点(结果是集合)
  2. getElementsByClassName()：通过class类名访问DOM节点（有兼容性问题）

我们可以封装自己的class类来解决兼容性问题：取出所有盒子，利用遍历的方法找出className.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
window.onload = function(){
   //封装自己class类名
    function getClass(classname){
        //如果浏览器支持，则直接返回
        if(document.getElementsByClassName)
        {
            return document.getElementsByClassName(classname);
        }
        // 不支持的 浏览器
        var arr = []; // 用于存放满足的数组
        var dom = document.getElementsByTagName("*");
        //alert(dom.length);
        for(var i=0;i<dom.length;i++)
        {
            if(dom[i].className == classname)
            {
                arr.push(dom[i]);
            }
        }
        return arr;
    }
    console.log(getClass("demo").length);
}

DOM节点的访问关系

节点的访问关系，是以属性的方式存在的。DOM的节点并不是孤立的，因此可以通过DOM节点之间的相对关系对它们进行访问。

父节点

parentNode：调用者就是节点。一个节点只有一个父节点。调用方式就是节点.parentNode.

1
2
3
4
5
6
7
window.onload = function(){
    var x = document.getElementById("x");
    x.onclick = function(){
        this.parentNode.style.display = "none";
        // 关掉的是他的父亲节点
    }
}

兄弟节点

  • nextSibling：下一个节点（包括空文档和换行节点）。（注：IE678中指下一个元素节点（标签））
  • nextElementSibling：下一个元素节点。
  • previousSibling：前一个节点（包括空文档和换行节点）。（IE678中指前一个元素节点（标签））
  • previousElementSibling：前一个元素节点。

单个子节点

  • firstChild：调用者是父节点。第一个子节点（包括空文档和换行节点）。（IE678中指第一个子元素节点（标签））
  • firstElementChild：在火狐谷歌IE9都指的第一个元素节点。
  • lastChild：调用者是父节点。最后一个子节点（包括空文档和换行节点）。（IE678中指最后一个子元素节点（标签））
  • lastElementChild：最后一个元素节点。

所有子节点

  • childNodes：它是标准属性，它返回指定元素的子元素集合，包括HTML节点，所有属性，文本节点。
    nodeType == 1 表示的是元素节点，元素就是标签
    nodeType == 2 表示是属性节点
    nodeType == 3 是文本节点

  • children：非标准属性，它返回指定元素的子元素集合。但它只返回HTML节点，甚至不返回文本节点，虽然不是标准的DOM属性，但它和innerHTML方法一样，得到了几乎所有浏览器的支持。

平常我们需要获取的只是元素节点，所以可以用children, children只获取元素节点，而且没有兼容性问题，但是在IE678中会包含注释节点，所以使用前要避免写注释。（通常使用children）

DOM节点的操作

创建节点

1
var div = document.creatElement(“li”);

插入节点

appendChild()：后面追加节点
insertBefore(插入的节点， 参照节点)：放到参照节点的前面，如果参照节点为null,默认放到最后。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div id="div1">
    <p id="p1">This is a paragraph.</p>
    <p id="p2">This is another paragraph.</p>
</div>

<script>
    var para = document.createElement("p");
    var node = document.createTextNode("This is new.");
    para.appendChild(node);

    var element = document.getElementById("div1");
    var child = document.getElementById("p1");
    element.insertBefore(para, child);
</script>

删除节点

1
2
3
4
5
6
7
8
9
10
<div id="div1">
    <p id="p1">This is a paragraph.</p>
    <p id="p2">This is another paragraph.</p>
</div>

<script>
    var parent = document.getElementById("div1");
    var child = document.getElementById("p1");
    parent.removeChild(child);
</script>

替换节点

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div id="div1">
    <p id="p1">This is a paragraph.</p>
    <p id="p2">This is another paragraph.</p>
</div>

<script>
    var para = document.createElement("p");
    var node = document.createTextNode("This is new.");
    para.appendChild(node);

    var parent = document.getElementById("div1");
    var child = document.getElementById("p1");
    parent.replaceChild(para, child);
</script>

克隆节点

cloneNode() 括号里面可以跟参数，如果是true深层复制，除了复制盒子本身外还复制子节点，如果为false只复制本节点。

设置节点属性

获取节点属性 getAttribute

1
alert(demo.getAttribute("title"));

设置节点属性 setAttribute(“属性”, “值”)

1
2
3
div.setAttribute(“class”,”demo”);

document.getElementById("p2").style.color = "blue";

删除某个属性 removeAttribute(“属性”)

DOM事件

HTML DOM 允许 JavaScript 对 HTML 事件作出响应。

onclick事件

1
<h1 onclick="this.innerHTML='hello!'">请点击这段文本!</h1>

onload 和 onunload 事件

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

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

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

1
<body onload="checkCookies()">

onchange 事件

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

1
2
3
4
5
6
7
8
<script>
	function upperCase(){
        var x = document.getElementById("testfname");
        x.value = x.value.toUpperCase();
	}
</script>

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

onmouseover 和 onmouseout 事件

1
2
3
4
5
6
7
8
9
10
11
12
13
<div onmouseover="mOver(this)" onmouseout="mOut(this)" style="background-color:green;width:120px;height:20px;padding:40px;color:#ffffff;">把鼠标移到上面</div>

<script>
    function mOver(obj)
    {
        obj.innerHTML="谢谢"
    }

    function mOut(obj)
    {
        obj.innerHTML="把鼠标移到上面"
    }
</script>

onmousedown、onmouseup事件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div onmousedown="mDown(this)" onmouseup="mUp(this)" style="background-color:green;color:#ffffff;width:90px;height:20px;padding:40px;font-size:12px;">请点击这里</div>

<script>
function mDown(obj)
{
obj.style.backgroundColor="#1ec5e5";
obj.innerHTML="请释放鼠标按钮"
}

function mUp(obj)
{
obj.style.backgroundColor="green";
obj.innerHTML="请按下鼠标按钮"
}
</script>