在js中我们可以找到元素并更改属性和样式或者添加或删除元素
我也可以绑定和去除绑定事件或去除绑定事件
也可以更改元素内容和样式
DOM操作
1.js操作HTML查找元素
- 通过 id 找到 HTML 元素
- 通过标签名找到 HTML 元素
- 通过类名找到 HTML 元素
通常情况下我们用id查找
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<p id="intro">Hello World!</p>
<p>本例演示 <b>getElementById</b> 方法！</p>
<script>
x = document.getElementById("intro");
document.write('<p>id="intro" 的段落中的文本是：' + x.innerHTML + '</p>');
//结果
// Hello World!
// 本例演示 getElementById 方法！
// id="intro" 的段落中的文本是：Hello World!
</script>
如果找到该元素，则该方法将以对象（在 x 中）的形式返回该元素。
如果未找到该元素，则 x 将包含 null
通过标签名查找
通过标签名找到的是一个集合,我们必须知道这个集合中的具体情况才能准确的获得我们想要的元素
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<p>Hello World!</p>
<div id="main">
<p>The DOM is very useful.</p>
<p>本例演示 <b>getElementsByTagName</b> 方法。</p>
</div>
<script>
var x=document.getElementById("main");
//这里的 y 是一个集合有两个元素 y[0] 和 y[1]
var y=x.getElementsByTagName("p");
document.write('id 为 "main" 的 div 中的第一段文本是：' + y[0].innerHTML);
// 结果
// Hello World!
// The DOM is very useful.
// 本例演示 getElementsByTagName 方法。
// id 为 "main" 的 div 中的第一段文本是：The DOM is very useful.
</script>
通过类名查找
通过类名查找 HTML 元素在 IE 5,6,7,8 中无效。
1
2
3
4
5
6
7
8
9
10
11
12
13
<div class="cls">
hello-0
</div>
<div class="cls">hello-1</div>
<script>
//我们发现getElementsByClassName和getElementsByTagName都是getElements 有个s表示他们都是集合
var oCls=document.getElementsByClassName("cls");
console.log(oCls[0].innerText) //hello-0
console.log(oCls[1].innerHTML) //hello-1
</script>
2.js操作HTML更改内容和属性and属性
修改 HTML 内容的最简单的方法时使用 innerHTML 属性。
1
2
3
4
5
6
7
8
9
10
<div id="cls">
<h1>wuuuuuuuu...</h1>
</div>
<script>
var oCls=document.getElementById("cls");
var oClsH1=oCls.getElementsByTagName("h1")[0]; //这里的[0] 表示虽然只有一个但是它还是一个集合
oClsH1.innerHTML="wahhhhhhh..."; //结果是wahhhhhhh...
</script>
如需改变 HTML 元素的属性，请使用这个语法：document.getElementById(id).attribute=new value
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<input id="ip" type="text" value="wuuuuuuuu...">
<button onclick="f()">变变变</button>
<img id="img" src="123" alt="xxx">
<script>
var oCls=document.getElementById("ip");
function f(){
oCls.value="wahhhhhhh...";
document.getElementById("img").src="456"; //点击按钮后 这些值都会改变
document.getElementById("img").alt="yyy";
}
</script>
如需改变 HTML 元素的样式，请使用这个语法：document.getElementById(id).style.property=new style
1
2
3
4
5
6
7
8
9
10
11
<h1 id="h1">123</h1>
<button onclick="f()">Change</button>
<script>
var oCls=document.getElementById("h1");
function f(){
oCls.style.color="red";
}
</script>
3.js操作HTML添加新元素
如需向 HTML DOM 添加新元素，您必须首先创建该元素（元素节点），然后向一个已存在的元素追加该元素。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<div id="div1">
<p id="p1">这是一个段落</p>
<p id="p2">这是另一个段落</p>
</div>
<script>
//创建心得 p 元素
var para=document.createElement("p");
//如需向 p 元素添加文本，您必须首先创建文本节点。这段代码创建了一个文本节点：
var node=document.createTextNode("这是新段落。");
//然后您必须向 p 元素追加这个文本节点：
para.appendChild(node);
//最后您必须向一个已有的元素追加这个新元素。这段代码找到一个已有的元素：
var element=document.getElementById("div1");
//这段代码向这个已有的元素追加新元素：
element.appendChild(para);
</script>
4.js操作HTML删除已有元素
如需删除 HTML 元素，您必须首先获得该元素的父元素：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>
<script>
//找到想要删除元素的父元素
var parent=document.getElementById("div1");
//找到想要删除的元素
var child=document.getElementById("p1");
//从父元素中删除这个元素
parent.removeChild(child);
//我们可以用这种方式不需要您明确的知道他的父节点就可以删除他(但是删除元素不需要通过他的父元素)
var child=document.getElementById("p1");
child.parentNode.removeChild(child);
</script>
DOM事件
一般事件 onclick 鼠标点击时触发此事件
ondblclick 鼠标双击时触发此事件
onmousedown 按下鼠标时触发此事件
onmouseup 鼠标按下后松开鼠标时触发此事件
onmouseover 当鼠标移动到某对象范围的上方时触发此事件
onmousemove 鼠标移动时触发此事件
onmouseout 当鼠标离开某对象范围时触发此事件
onkeypress 当键盘上的某个键被按下并且释放时触发此事件.
onkeydown 当键盘上某个按键被按下时触发此事件
onkeyup 当键盘上某个按键被按放开时触发此事件
还有许多事件 参考 DOM事件参考手册
绑定事件三种方式
为什么绑定事件：为了让行为，样式，内容分离
1.直接在html标签内绑定
<div id="school" onclick="t();">
这种写法最古老,兼容性最强.属于DOM的lev0级的标准.这个效果,等同于在点击div的时候,执行”t();”这一语句,
在全局范围内执行,因此,t函数内部的this指代全局对象–>window 想操作被点击的DOM对象,用this就不行了.
2.在脚本中针对DOM对象绑定
DOM对象.onclick = function () {}
在这种绑定方式中,只能给一个事件,绑定一个处理函数
3.事件监听
关于事件监听，W3C规范中定义了3个事件阶段，依次是捕获阶段、目标阶段、冒泡阶段。
W3C规范了两种事件机制，分为捕获阶段、目标阶段、冒泡阶段。IE8以前IE一直坚持自己的事件机制（前端人员一直头痛的兼容性问题），IE9以后IE也支持了W3C规范。
1.事件监听的优点 可以绑定多个事件。2.可以解除相应的绑定
绑定事件的另一种方法是用 addEventListener() 或 attachEvent() 来绑定事件监听函数。下面详细介绍，事件监听。
element.addEventListener(event, function, useCapture)
IE8以下不支持。
event : （必需）事件名，支持所有DOM事件。
function：（必需）指定要事件触发时执行的函数。
useCapture：（可选）指定事件是否在捕获或冒泡阶段执行。true，捕获。false，冒泡。默认false。
1
2
3
4
5
6
7
8
9
<button id="btn">Change</button>
<script>
var oCls=document.getElementById("btn").addEventListener("click",f);
function f(){
alert("addEventListener监听事件")
}
</script>
IE标准
element.attachEvent(event, function)
event：（必需）事件类型。需加“on“，例如：onclick。
function：（必需）指定要事件触发时执行的函数。
1
2
3
4
5
6
7
8
9
<input type="button" value="click me" id="btn2">
<script>
document.getElementById("btn2").attachEvent("onclick",hello);
function hello(){
alert("hello world!");
}
</script>
目前我电脑上没有ie8一下的,我在Google上和ie9测试这个没办法实现
所以我们最好就用addEventListener
事件监听的优点——可以绑定多个事件 and 事件监听的优点——可以解除相应的绑定
为了节省就一块儿讲了
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<button id="btn">Change</button>
<script>
var oCls=document.getElementById("btn");
/*
oCls.onclick = function(){
alert("hello1") //不执行
}
oCls.onclick = function(){
alert("hello2") //执行 会把事件一覆盖掉
}*/
oCls.addEventListener("click",f1);
oCls.addEventListener("click",f2);
oCls.removeEventListener("click",f3);
//当点击按钮时先弹出事件一再弹出事件二
//不会弹出事件二 因为被移除了
function f1(){
alert("addEventListener事件一")
}
function f2(){
alert("addEventListener事件二")
}
function f3(){
alert("addEventListener事件三")
}
</script>
封装监听事件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<input type="button" value="click me" id="btn5">
<script>
//绑定监听事件
function addEventHandler(target,type,fn){
if(target.addEventListener){
target.addEventListener(type,fn);
}else{
target.attachEvent("on"+type,fn); //这样就可以解决兼用的问题了
}
}
//移除监听事件
function removeEventHandler(target,type,fn){
if(target.removeEventListener){
target.removeEventListener(type,fn);
}else{
target.detachEvent("on"+type,fn); //这样就可以解决兼用的问题了
}
}
//测试
var btn5 = document.getElementById("btn5");
addEventHandler(btn5,"click",hello1);//添加事件hello1
addEventHandler(btn5,"click",hello2);//添加事件hello2
removeEventHandler(btn5,"click",hello1);//移除事件hello1
</script>
事件的委托
提高JavaScript性能。事件委托可以显著的提高事件的处理速度，减少内存的占用
动态的添加DOM元素，不需要因为元素的改动而修改事件绑定
提高JavaScript性能。事件委托可以显著的提高事件的处理速度，减少内存的占用
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<ul id="list">
<li id="item1" >item1</li>
<li id="item2" >item2</li>
<li id="item3" >item3</li>
</ul>
<script>
var oUl=document.getElementById("list");
var item1 = document.getElementById("item1");
var item2 = document.getElementById("item2");
var item3 = document.getElementById("item3");
// item1.onclick = function(){
// alert("hello item1");
// }
// item2.onclick = function(){
// alert("hello item2");
// }
// item3.onclick = function(){
// alert("hello item3");
// }
//相比上面的代码委托减少了内存的占用
oUl.addEventListener("click",function(event){
var target = event.target; //event.target 经常用来实现事件委托 指向所点击的DOM元素
if(target == item1){
alert("hello item1");
}else if(target == item2){
alert("hello item2");
}else if(target == item3){
alert("hello item3");
}
})
</script>
动态的添加DOM元素，不需要因为元素的改动而修改事件绑定
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<ul id="list">
<li id="item1" >item1</li>
<li id="item2" >item2</li>
<li id="item3" >item3</li>
</ul>
<script>
var oUl=document.getElementById("list");
var item1 = document.getElementById("item1");
var item2 = document.getElementById("item2");
var item3 = document.getElementById("item3");
//点击item1到item3都有事件响应，但是点击item4时，没有事件响应。说明传统的事件绑定无法对动态添加的元素而动态的添加事件。
for(var i=0;i<item.length;i++){
(function(i){
item[i].onclick = function(){
alert(item[i].innerHTML);
}
})(i)
}
//当点击item4时，item4有事件响应。说明事件委托可以为新添加的DOM元素动态的添加事件。
oUl.addEventListener("click",function(event){
var target = event.target;
if(target.ondeName="li"){
alert(target.innerHTML);
}
})
var node = document.createElement("li");
var textnode = document.createTextNode("item4");
//给li节点创建内容
node.appendChild(textnode)
//在父节点下创建新的li节点
oUl.appendChild(node)
//玄学发现
//list.appendChild(node) 也可以啊 不知道为什么
</script>
