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
    10
    11
    12
    <html>
    <body>

    <p id="p1">Hello World!</p>

    <script>
    document.getElementById("p1").innerHTML="New text!";
    //将上面的"Hello WOrld!"的文本改为"New text"
    </script>

    </body>
    </html>
  2. getElementsByTagName() : 通过标签名称访问DOM节点(结果是集合)

  3. 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>
请点击这里