JS HTM DOM

通过可编程的对象模型,JavaScript 获得了足够的能力来创建动态的 HTML。

  • JavaScript 能够改变页面中的所有 HTML 元素
  • JavaScript 能够改变页面中的所有 HTML 属性
  • JavaScript 能够改变页面中的所有 CSS 样式
  • JavaScript 能够对页面中的所有事件做出反应

查找 HTML 元素

通常,通过 JavaScript,您需要操作 HTML 元素。

为了做到这件事情,您必须首先找到该元素。有三种方法来做这件事:

  • 通过 id 找到 HTML 元素
  • 通过标签名找到 HTML 元素
  • 通过类名找到 HTML 元素

1.通过id查找HTML元素

如果找到该元素,则该方法将以对象(在 x 中)的形式返回该元素。

如果未找到该元素,则 x 将包含 null。

var x=document.getElementById("intro");

2.通过标签查找

var x=document.getElementById("main");
var y=x.getElementsByTagName("p");

通过类名查找 HTML 元素在 IE 5,6,7,8 中无效。

 

 

改变HTML输出流

在 JavaScript 中,document.write() 可用于直接向 HTML 输出流写内容。

绝不要使用在文档加载之后使用 document.write()。这会覆盖该文档。

 

改变HTML内容

修改 HTML 内容的最简单的方法时使用 innerHTML 属性。

语法:

document.getElementById(id).innerHTML=new HTML;

 1 <body>
 2 <p id="first">自认惊叹的桥段终沦为老生常谈</p>
 3 <h1 id="second">mine mine~</h1>
 4 <button onclick="myfunction()">change</button>
 5 <script type="text/javascript">
 6 function myfunction(){
 7     document.getElementById("first").innerHTML="石楠小札";
 8     var x=document.getElementById("second");
 9     x.innerHTML="new txt";
10 }
11 
12 </script>
13 </body>

 

改变HTML属性

语法:

document.getElementById(id).attribute=new value

 1 <body>
 2 
 3 <img src="../example/cut/images/img1.jpg" id="img"><br/>
 4 <button onclick="myfunction()">change</button>
 5 <script type="text/javascript">
 6 
 7     document.getElementById("img").src="../example/cut/images/icon.jpg";
 8 }
 9 
10 </script>

 

改变HTML样式

语法:

document.getElementById(id).style.property=new style

 1 <body>
 2 <p id="first">自认惊叹的桥段终沦为老生常谈</p>
 3 <h1 id="second">mine mine~</h1>
 4 <hr/>
 5 <img src="../example/cut/images/img1.jpg" id="img"><br/>
 6 <button onclick="myfunction()">change</button>
 7 <script type="text/javascript">
 8 function myfunction(){
 9 
10     document.getElementById("first").style.color="blue";
11 }
12 
13 </script>
14 </body>

 

显示/隐藏文本

 1 <body>
 2 <p id="first">自认惊叹的桥段终沦为老生常谈</p>
 3 <h1 id="second">mine mine~</h1>
 4 <hr/>
 5 <img src="../example/cut/images/img1.jpg" id="img"><br/>
 6 <button onclick="myfunction()">隐藏文本</button>
 7 <button onclick="myfunction2()">显示文本</button>
 8 <script type="text/javascript">
 9 function myfunction(){
10 
11     document.getElementById("first").style.visibility="hidden";
12 }
13 function myfunction2(){
14 
15     document.getElementById("first").style.visibility="visible";
16 }
17 
18 </script>
19 </body>

 

 

对事件做出反应

HTML 事件的例子:

  • 当用户点击鼠标时
  • 当网页已加载时
  • 当图像已加载时
  • 当鼠标移动到元素上时
  • 当输入字段被改变时
  • 当提交 HTML 表单时
  • 当用户触发按键时
1 <body>
2 <hr/>
3 <h1 onclick="myfunction3(this)">change</h1>
4 <script type="text/javascript">
5 function myfunction3(id){
6     id.innerHTML="谢谢!";
7 }
8 </script>
9 </body>

onload 和 onunload 事件

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

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

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

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 
 5 <script>
 6 function mymessage()
 7 {
 8 alert("这段消息由 onload 事件触发");
 9 }
10 </script>
11 </head>
12 
13 <body onload="mymessage()">
14 </body>
15 
16 </html>

 

 1 <body onload="myfunction()">
 2 <script type="text/javascript">
 3 function myfunction(){
 4     if(navigator.cookieEnable==true){
 5         alert("已经启用cookie");
 6     }
 7     else{
 8         alert("未启用cookie");
 9     }
10 }
11 </script>
12 </body>

onchange 事件

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

类似于焦点移除?

 1 <body >
 2 请输入英文字符:<input type="text" id="fname" onchange="myfunction2()">
 3 <script type="text/javascript">
 4 
 5 function myfunction2(){
 6     var x=document.getElementById("fname");
 7     x.value=x.value.toUpperCase();
 8 
 9 }
10 
11 </script>
12 </body>

onmouseover 和 onmouseout 事件

onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数。

 1 <body>
 2 <div onmouseover="mOver(this)" onmouseout="mOut(this)" style="background-color:lightgray;height:20px;color:gray;padding:40px;width:120px;font-size:14px;">请把鼠标移到上面</div>
 3 <script type="text/javascript">
 4 
 5 function mOver(obj){
 6    obj.innerHTML="谢谢";
 7 }
 8 function mOut(obj){
 9   obj.innerHTML="请把鼠标移到上面";
10 }
11 </script>
12 </body>

 

onmousedown、onmouseup 以及 onclick 事件

onmousedown, onmouseup 以及 onclick 构成了鼠标点击事件的所有部分。首先当点击鼠标按钮时,会触发 onmousedown 事件,当释放鼠标按钮时,会触发 onmouseup 事件,最后,当完成鼠标点击时,会触发 onclick 事件。

 

 1 <!DOCTYPE html>
 2 <html>
 3 <body>
 4 
 5 <div onmousedown="mDown(this)" onmouseup="mUp(this)" style="background-color:green;color:#ffffff;width:90px;height:20px;padding:40px;font-size:12px;">请点击这里</div>
 6 
 7 <script>
 8 function mDown(obj)
 9 {
10 obj.style.backgroundColor="#1ec5e5";
11 obj.innerHTML="请释放鼠标按钮"
12 }
13 
14 function mUp(obj)
15 {
16 obj.style.backgroundColor="green";
17 obj.innerHTML="请按下鼠标按钮"
18 }
19 </script>
20 
21 </body>
22 </html>
 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <script>
 5 function lighton()
 6 {
 7 document.getElementById('myimage').src="/i/eg_bulbon.gif";
 8 }
 9 function lightoff()
10 {
11 document.getElementById('myimage').src="/i/eg_bulboff.gif";
12 }
13 </script>
14 </head>
15 
16 <body>
17 <img id="myimage" onmousedown="lighton()" onmouseup="lightoff()" src="/i/eg_bulboff.gif" />
18 <p>按住鼠标不放可以点亮这盏灯!</p>
19 </body>
20 </html>

onfocus

 

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <script>
 5 function myFunction(x)
 6 {
 7 x.style.background="yellow";
 8 }
 9 </script>
10 </head>
11 <body>
12 
13 请输入英文字符:<input type="text" onfocus="myFunction(this)">
14 
15 <p>当输入字段获得焦点时,会触发改变背景颜色的函数。</p>
16 
17 </body>
18 </html>

 

 常用事件

除了刚才提到的 onclick 事件,还有这些常用的事件:

onclick 单击
ondblclick 双击
onfocus 元素获得焦点
onblur 元素失去焦点
onmouseover 鼠标移到某元素之上
onmouseout 鼠标从某元素移开
onmousedown 鼠标按钮被按下
onmouseup 鼠标按键被松开
onkeydown 某个键盘按键被按下
onkeyup 某个键盘按键被松开
onkeypress 某个键盘按键被按下并松开

 

JS HTML 元素(节点)

1.创建HTML元素

 1 <!DOCTYPE html>
 2 <html>
 3 <body>
 4 
 5 <div id="div1">
 6 <p id="p1">这是一个段落。</p>
 7 <p id="p2">这是另一个段落。</p>
 8 </div>
 9 
10 <script>
11 var para=document.createElement("p");//这段代码创建新的 <p> 元素
12 var node=document.createTextNode("这是新段落。");//如需向 <p> 元素添加文本,您必须首先创建文本节点。这段代码创建了一个文本节点
13 para.appendChild(node);//然后您必须向 <p> 元素追加这个文本节点
14 //最后您必须向一个已有的元素追加这个新元素
15 var element=document.getElementById("div1");//这段代码找到一个已有的元素
16 element.appendChild(para);//这段代码向这个已有的元素追加新元素
17 </script>
18 
19 </body>
20 </html>

删除HTML元素

 1 <!DOCTYPE html>
 2 <html>
 3 <body>
 4 
 5 <div id="div1">
 6 <p id="p1">这是一个段落。</p>
 7 <p id="p2">这是另一个段落。</p>
 8 </div>
 9 
10 <script>
11 var parent=document.getElementById("div1");//找到 id="div1" 的元素
12 var child=document.getElementById("p1");//找到 id="p1" 的 <p> 元素
13 parent.removeChild(child);//从父元素中删除子元素
14 </script>
15 
16 </body>
17 </html>

这是常用的解决方案:找到您希望删除的子元素,然后使用其 parentNode 属性来找到父元素

var child=document.getElementById("p1");
child.parentNode.removeChild(child);