JavaScript组成
JavaScript由三部分组成
- ECMAscript – 欧洲计算机制造商协会,描述了javascript的语法和基本对象。
- DOM – 文档对象模型,处理网页内容的方法和接口。
- BOM – 浏览器对象模型,与浏览器交互的方法和接口。
DOM的定义
DOM为文档提供了结构化表示,并定义了如何通过脚本来访问文档结构,目的其实就是为了能让javascript操作html元素而定制的一个规范。
DOM树如下

由结构图中我们可以看到,整个文档就是一个文档节点。而每一个HMTL标签都是一个元素节点。
访问DOM节点的方法
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>
|
getElementsByTagName()
:通过标签名称访问DOM节点(结果是集合)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>
|