JavaScript DOM 示例
一. 文档对象
1.1 显示文档中所有cookie的名称/值
<!DOCTYPE html> <html> <body> <p id="demo">Click the button to display the cookies associated with this document.</p> <button onclick="myFunction()">Try it</button> <script> function myFunction() { document.getElementById("demo").innerHTML = "Cookies associated with this document: " + document.cookie; } </script> </body> </html>
1.2 显示加载文档的服务器的域名
<!DOCTYPE html> <html> <body> <p>Click the button to display the domain name of the server that loaded this document.</p> <button onclick="myFunction()">Try it</button> <p id="demo"></p> <script> function myFunction() { document.getElementById("demo").innerHTML = document.domain; } </script> </body> </html>
1.3 显示上次修改文档的日期和时间
<!DOCTYPE html> <html> <body> <p>This document was last modified <span id="demo"></span>.</p> <script> document.getElementById("demo").innerHTML = document.lastModified; </script> </body> </html>
1.4 显示文档的标题
<!DOCTYPE html> <html> <head> <title>W3Schools Demo</title> </head> <body> <h2>Finding HTML Elements Using document.title</h2> <p id="demo"></p> <script> document.getElementById("demo").innerHTML = "The title of this document is: " + document.title; </script> </body> </html>
1.5 显示文档的完整URL
<!DOCTYPE html> <html> <body> <p>The full URL of this document is: <br><span id="demo"></span>.</p> <script> document.getElementById("demo").innerHTML = document.URL </script> </body> </html>
1.6 替换文档的内容
<!DOCTYPE html> <html> <body> <p id="demo">Click the button to replace this document with new content.</p> <button onclick="myFunction()">Try it</button> <script> function myFunction() { document.open("text/html","replace"); document.write("<h2>Learning about the HTML DOM is fun!</h2>"); document.close(); } </script> </body> </html>
1.7 打开一个新窗口，并添加一些内容
<!DOCTYPE html> <html> <body> <p>Click the button to open a new window and add some content.</p> <button onclick="myFunction()">Try it</button> <script> function myFunction() { var w = window.open(); w.document.open(); w.document.write("<h2>Hello World!</h2>"); w.document.close(); } </script> </body> </html>
1.8 显示具有特定名称元素的数量
<!DOCTYPE html> <html> <head> <script> function getElements() { var x = document.getElementsByName("x"); document.getElementById("demo").innerHTML = x.length; } </script> </head> <body> <p> Cats: <input name="x" type="radio" value="Cats"> Dogs: <input name="x" type="radio" value="Dogs"> </p> <p> <input type="button" onclick="getElements()" value="How many elements named x?"> </p> <p id="demo"></p> </body> </html>
1.9 显示具有特定标签元素的数量
<!DOCTYPE html> <html> <head> <script> function getElements() { var x = document.getElementsByTagName("input"); document.getElementById("demo").innerHTML = x.length; } </script> </head> <body> <input type="text" size="20"><br> <input type="text" size="20"><br> <input type="text" size="20"><br> <p> <input type="button" onclick="getElements()" value="How many input elements?"> </p> <p id="demo"></p> </body> </html>
二. 锚系列
2.1 查找文档中瞄点数量
<!DOCTYPE html> <html> <body> <h2>Finding HTML Elements Using document.anchors</h2> <a name="html">HTML Tutorial</a><br> <a name="css">CSS Tutorial</a><br> <a name="xml">XML Tutorial</a><br> <p id="demo"></p> <script> document.getElementById("demo").innerHTML = "Number of anchors are: " + document.anchors.length; </script> </body> </html>
2.2 查找文档中第一个瞄点innerHTML
<!DOCTYPE html> <html> <body> <a name="html">HTML Tutorial</a><br> <a name="css">CSS Tutorial</a><br> <a name="xml">XML Tutorial</a><br> <p>Click the button to display the innerHTML of the first anchor in the document.</p> <button onclick="myFunction()">Try it</button> <p id="demo"></p> <script> function myFunction() { document.getElementById("demo").innerHTML = document.anchors[0].innerHTML; } </script> </body> </html>
三. 链接集合
3.1 显示文档中的链接数
<!DOCTYPE html> <html> <body> <h2>Finding HTML Elements Using document.links</h2> <p> <a href="/html/default.asp">HTML</a> <br> <a href="/css/default.asp">CSS</a> </p> <p id="demo"></p> <script> document.getElementById("demo").innerHTML = "Number of links: " + document.links.length; </script> </body> </html>
3.2 显示文档中第一个链接的href属性
<!DOCTYPE html> <html> <body> <form name="Form1"></form> <form name="Form2"></form> <form name="Form3"></form> <p id="demo"></p> <script> document.getElementById("demo").innerHTML = "The name of the first for is " + document.forms[0].name; </script> </body> </html>
四. 表格集合
4.1 查找文档中的表格数量
<!DOCTYPE html> <html> <body> <h2>Finding HTML Elements Using document.forms</h2> <form action=""> First name: <input type="text" name="fname" value="Donald"> <input type="submit" value="Submit"> </form> <p id="demo"></p> <script> document.getElementById("demo").innerHTML = "Number of forms: " + document.forms.length; </script> </body> </html>
4.2 查找文档中第一个表单的名称
<!DOCTYPE html> <html> <body> <form name="Form1"></form> <form name="Form2"></form> <form name="Form3"></form> <p id="demo"></p> <script> document.getElementById("demo").innerHTML = "The name of the first for is " + document.forms[0].name; </script> </body> </html>
五. 图片集
5.1 返回文档中的图像数量
<!DOCTYPE html> <html> <body> <h2>Finding HTML Elements Using document.images</h2> <img src="pic_htmltree.gif" width="486" height="266"> <img src="pic_navigate.gif" width="362" height="255"> <p id="demo"></p> <script> document.getElementById("demo").innerHTML = "Number of images: " + document.images.length; </script> </body> </html>
5.2 返回文档中的第一张图片的ID
<!DOCTYPE html> <html> <body> <img id="img1" src="pic_htmltree.gif"> <img id="img2" src="pic_navigate.gif"> <p id="demo"></p> <script> document.getElementById("demo").innerHTML = "The id of the first image is " + document.images[0].id; </script> </body> </html>
六. CSS操作
6.1 更改HTML元素的可见性
<!DOCTYPE html> <html> <body> <p id="p1"> This is a text. This is a text. This is a text. </p> <input type="button" value="Hide text" onclick="document.getElementById('p1').style.visibility='hidden'"> <input type="button" value="Show text" onclick="document.getElementById('p1').style.visibility='visible'"> </body> </html>
6.2 更改HTML元素的背景颜色
<!DOCTYPE html> <html> <head> <script> function bgChange(bg) { document.body.style.background = bg; } </script> </head> <body> <h2>Change background color</h2> <p>Mouse over the squares!</p> <table style="width:300px;height:100px"> <tr> <td onmouseover="bgChange(this.style.backgroundColor)" onmouseout="bgChange('transparent')" style="background-color:Khaki"> </td> <td onmouseover="bgChange(this.style.backgroundColor)" onmouseout="bgChange('transparent')" style="background-color:PaleGreen"> </td> <td onmouseover="bgChange(this.style.backgroundColor)" onmouseout="bgChange('transparent')" style="background-color:Silver"> </td> </tr> </table> </body> </html>
