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>
|
