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

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

<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 Demotitle>
  head>
<body>

<h2>Finding HTML Elements Using document.titleh2>

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

<script>
function myFunction() {
  document.open("text/html","replace");
  document.write("Learning about the HTML DOM is fun!");
  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 itbutton>

<script>
function myFunction() {
  var w = window.open();
  w.document.open();
  w.document.write("Hello World!");
  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.anchorsh2>

<a name="html">HTML Tutoriala><br>
<a name="css">CSS Tutoriala><br>
<a name="xml">XML Tutoriala><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 Tutoriala><br>
<a name="css">CSS Tutoriala><br>
<a name="xml">XML Tutoriala><br>

<p>Click the button to display the innerHTML of the first anchor in the document.p>

<button onclick="myFunction()">Try itbutton>

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

<p>
<a href="/html/default.asp">HTMLa>
<br>
<a href="/css/default.asp">CSSa>
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.formsh2>

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

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

JavaScript

JavaScript DOM 示例

Learning about the HTML DOM is fun!

Hello World!

相关

javascript基础知识(29) 实现继承的方式

7个有用的JavaScript技巧

JavaScript跳出嵌套循环

JavaScript常用对象介绍

JavaScript学习day03

推荐12个最好的 JavaScript 图形绘制库

javascript模板字符串（反引号）

javascript 新版本的语法（ECS6）

javascript设计模式阅读后的感悟与总结

【译】理解JavaScript中的柯里化

javascript性能优化

图说js中的this——深入理解javascript中this指针

标签