DOM解釋

      文檔對象模型（Document Object Model，DOM）是一種用於HTML和XML文檔的編程接口。它給文檔提供了一種結構化的表示方法，可以改變文檔的內容和呈現方式。DOM把網頁和腳本以及其他的編程語言聯繫了起來。DOM屬於瀏覽器，而不是JavaScript語言規範裏的規定的核心內容。

 

documentManager 是什麼 java_獲取標籤

一、查找元素

1、直接查找

　　1）document.getElementById 根據ID獲取一個標籤　

<body>
    <div id="id_1">
    </div>
    
    <script type="text/javascript">
        var i = document.getElementById('id_1'); //查找指定的id
        i.innerText = '456'; //innerText修改指定的字符串
    </script>
</body>


2）document.getElementsByName 根據name屬性獲取標籤集合　

<body>
    <div name="name_1">
    </div>

    <script type="text/javascript">
        var i = document.getElementsByName('name_1'); //查找指定的name,這裏和ID不一樣name可以有多個
        for (var item in i) {
            i[item].innerText = '456'; //innerText修改指定的字符串
        };
    </script>
</body>

 

 　　3）document.getElementsByClassName 根據class屬性獲取標籤集合


　　4）document.getElementsByTagName 根據標籤名獲取標籤集合

<body>
    <div>
    </div>
    <div>
    </div>
    <script type="text/javascript">
        var i = document.getElementsByTagName('div'); //查找指定的標籤類型,這裏同樣和ID不一樣標籤比如<div>標籤可以有多個
        for (var item in i) {
            i[item].innerText = '456'; //innerText表示獲取文本； 這整句是修改指定的字符串
        };
    </script>
</body>

 

&

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title id="2">Title</title>
</head>
<body>

<div>
    <h2>ok</h2>
    <form action="#" id="1" class="form1" name="form1">
        <input type="text">
        <input type="text">
        <p>男:<input id=3 type="checkbox" name="男" value="nan"></p>
        <input type="submit">
    </form>
    <h1>hao</h1>
    <input type="datetime-local">
</div>
<script>
    //選擇器
//    var names = document.getElementsByClassName('form1'); // 根據class屬性獲取標籤集合； 得到的是一個列表對象
//    var names = document.getElementsByName('form1');  //根據name屬性獲取標籤集合；得到的是一個列表對象
//    var names = document.getElementsByTagName('FORM'); // 根據標籤名獲取集合；得到的是一個列表對象
     var names = document.getElementById('1');  //根據ID獲取一個標籤，得到一個普通對象
//    var names = document.querySelector('*');  //得到一個最先找到的對象,可以使用通配符*

    console.log(names);
</script>

</body>
</html>

 

2、間接查找

　　標籤包含文本：

parentNode // 父節點
 
childNodes // 所有子節點
 
firstChild // 第一個子節點
 
lastChild // 最後一個子節點
 
nextSibling // 下一個兄弟節點
 
previousSibling // 上一個兄弟節點

標籤：

parentElement // 父節點標籤元素
 
　children // 所有子標籤
 
　firstElementChild // 第一個子標籤元素
 
　lastElementChild // 最後一個子標籤元素
 
　nextElementtSibling // 下一個兄弟標籤元素
 
　previousElementSibling // 上一個兄弟標籤元素

documentManager 是什麼 java_標籤屬性_02

documentManager 是什麼 java_標籤屬性_03

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
        <div>
            <div class="c1">asdf</div>
            <div class="c1" id="i1">
                <p>asdf</p>
                <div name="n1">
                    <span>asd</span>
                </div>
                <div name="n1">
                    <a>1</a>
                    <a>11111</a>
                </div>
            </div>
            <div class="c1">asdf</div>
        </div>
        <script>
            var i1 = document.getElementById('i1');
            var p1_text = i1.parentNode;
            var p1 = i1.parentElement;

            var eles_node = p1_text.childNodes;    // 含文本所有標籤
            for(var j=0;j<eles_node.length;j++){
                var current_node = eles_node[j];
                if(current_node.nodeType == 1){
                    console.log(eles_node[j])
                }

            }

            var eles = p1.children;            // 不含文本所有標籤
            for(var i=0;i<eles.length;i++){
                console.log(eles[i]);
            }

        </script>
</body>
</html>

View Code

documentManager 是什麼 java_標籤屬性_02

documentManager 是什麼 java_標籤屬性_03

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title id="2">Title</title>
</head>
<body>

<div>
    <h2>ok</h2>
    <form action="#" id="1">
        <input type="text">
        <input type="text">
        <p>男:<input id=3 type="checkbox" name="男" value="nan"></p>
        <input type="submit">
    </form>
    <h1>hao</h1>
</div>
<script>
//    var names = document.getElementById('1').childElementCount; //查詢子元素個數
//var names = document.getElementById('1').firstElementChild; //查詢第一個元素
//var names = document.getElementById('1').getAttribute('action'); //獲取該元素屬性對應的值,不存在則為null
//var names = document.getElementById('1').hasAttribute('name'); //查詢元素是否設置了name屬性
//var names = document.getElementById('1').lastElementChild; //查詢最後一個元素,如果查詢的元素內沒有包含其它元素,則返回null
//var names = document.getElementById('1').nextElementSibling; //查詢下一個同級別元素
//var names = document.getElementById('1').previousElementSibling; //查詢同級別的上一個元素
//var names = document.getElementById('1').querySelector('H1'); //在子元素裏查詢找到的第一個子元素標籤
//var names = document.getElementById('1').querySelectorAll('INPUT'); //查詢子元素內所有INPUT的標籤,如果設置了ID則會將ID一併返回
//var names = document.getElementById('1').removeAttribute('action'); //移除存在的屬性
//var names = document.getElementById('1').setAttribute('method','post'); //添加屬性,並設置屬性值
//var names = document.getElementById('1').tagName; //查詢元素的標籤名
//var names = document.getElementById('1').attributes; //查詢元素所有屬性
//var names = document.getElementById('1').baseURI; //查詢元素所屬url
//var names = document.getElementById('1').id; //查詢元素ID
//var names = document.getElementById('2').innerText ="hhh"; //設置元素內文本屬性
//var names = document.getElementById('1').innerHTML; //查詢元素內的html及文本內容
var names = document.getElementById('1').innerText; //查詢元素內文本屬性

    console.log(names);
</script>

</body>
</html>

實例

實例

 

二、操作


1、內容

innerText   獲取文本
 
outerText
 
innerHTML   獲取標籤、文本信息
  
value       值

 

documentManager 是什麼 java_標籤屬性_02

documentManager 是什麼 java_標籤屬性_03

<!DOCTYPE html>
<html>
<body>

<h1 id="header">Old Header</h1>

<script>
var element=document.getElementById("header");
element.innerHTML="New Header";
</script>

</body>
</html>

innerHTML

innerHTML

documentManager 是什麼 java_標籤屬性_02

documentManager 是什麼 java_標籤屬性_03

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <a href="http://www.etiantian.org">老男人<span>666</span> </a>
    <input id="txt" type="text" />
    <select id="sel">
        <option value="1">上海</option>
        <option value="2">北京</option>
    </select>
    <script>
        var obj = document.getElementsByTagName('a')[0]; // [a,]
//        alert(obj.innerText);  獲取文本
//        alert(obj.innerHTML)   獲取標籤、文本信息
          // value
        var val = document.getElementById("txt").value;
        console.log(val);
        obj.innerText = '123';
        obj.innerHTML = '<p>123</p>';


    </script>
</body>
</html>

View Code

 

2、屬性　　

attributes                // 獲取所有標籤屬性
 
setAttribute(key,value)   // 設置標籤屬性
 
getAttribute(key)         // 獲取指定標籤屬性
var atr = document.createAttribute("class");
 
atr.nodeValue="democlass";
 
document.getElementById('n1').setAttributeNode(atr);
修改屬性
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title id="2">Title</title>
</head>
<body>

<div>
    <h2>ok</h2>
    <form action="#" id="1" class="form1" name="form1">
        <input id =5 type="text">
        <input type="text">
        <p>男:<input id=3 type="checkbox" name="男" value="nan"></p>
        <input type="submit">
    </form>
    <h1 id="h1">hao</h1>
    <input type="datetime-local">
</div>
<script>
     var names = document.getElementById('5');  //得到一個普通對象
     names.id = 'newid'; //修改設置新標籤屬性ID
     names.className = "form";  //設置或修改標籤css
     names.style.fontSize = '20px'; //設置標籤樣式
     names.setAttribute('txt','mydefine');  //添加新屬性
     names.setAttribute('txt','mydefine');  //添加新屬性,存在則忽略不報錯
     names.removeAttribute('txt'); //移除屬性
     names = names.getAttribute('id');  //獲取屬性值
    console.log(names);
</script>

</body>
</html>

修改屬性

documentManager 是什麼 java_標籤屬性_02

documentManager 是什麼 java_標籤屬性_03

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <input type="button" value="全選"  onclick="CheckAll();"/>
    <input type="button" value="取消" onclick="CancelAll();"/>
    <input type="button" value="反選" onclick="ReverseCheck();"/>

    <table border="1" >
        <thead>

        </thead>
        <tbody id="tb">
            <tr>
                <td><input type="checkbox" /></td>
                <td>111</td>
                <td>222</td>
            </tr>
            <tr>
                <td><input type="checkbox" /></td>
                <td>111</td>
                <td>222</td>
            </tr>
            <tr>
                <td><input type="checkbox" /></td>
                <td>111</td>
                <td>222</td>
            </tr>
            <tr>
                <td><input type="checkbox" /></td>
                <td>111</td>
                <td>222</td>
            </tr>
        </tbody>
    </table>
    <script>
        function CheckAll(ths){
            var tb = document.getElementById('tb');
            var trs = tb.childNodes;
            for(var i =0; i<trs.length; i++){

                var current_tr = trs[i];
                if(current_tr.nodeType==1){
                    var inp = current_tr.firstElementChild.getElementsByTagName('input')[0];
                    inp.checked = true;
                }
            }
        }

        function CancelAll(ths){
            var tb = document.getElementById('tb');
            var trs = tb.childNodes;
            for(var i =0; i<trs.length; i++){

                var current_tr = trs[i];
                if(current_tr.nodeType==1){
                    var inp = current_tr.firstElementChild.getElementsByTagName('input')[0];
                    inp.checked = false;
                }
            }
        }

        function ReverseCheck(ths){
            var tb = document.getElementById('tb');
            var trs = tb.childNodes;
            for(var i =0; i<trs.length; i++){
                var current_tr = trs[i];
                if(current_tr.nodeType==1){
                    var inp = current_tr.firstElementChild.getElementsByTagName('input')[0];
                    if(inp.checked){
                        inp.checked = false;
                    }else{
                        inp.checked = true;
                    }
                }
            }
        }

    </script>
</body>
</html>

Demo

實例

實例

 

3、class操作

className                // 獲取所有類名
 
classList.remove(cls)    // 刪除指定類
 
classList.add(cls)       // 添加類

 

 

4、標籤操作

a、創建標籤

documentManager 是什麼 java_標籤屬性_02

documentManager 是什麼 java_標籤屬性_03

var tag = document.createElement('a')

tag.innerText = "wupeiqi"

tag.className = "c1"

tag.href = ""

 

// 方式二

var tag = "<a class='c1' href=''>wupeiqi</a>"

方式

創建標籤

 

b、操作標籤

 

documentManager 是什麼 java_標籤屬性_02

documentManager 是什麼 java_標籤屬性_03

// 方式一

var obj = "<input type='text' />";

xxx.insertAdjacentHTML("beforeEnd",obj);

xxx.insertAdjacentElement('afterBegin',document.createElement('p'))

 

//注意：第一個參數只能是'beforeBegin'、 'afterBegin'、 'beforeEnd'、 'afterEnd'

 

// 方式二

var tag = document.createElement('a')

xxx.appendChild(tag)

xxx.insertBefore(tag,xxx[1]) 

方式

操作標籤

documentManager 是什麼 java_標籤屬性_02

documentManager 是什麼 java_標籤屬性_03

實例
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div>
        <div>
            <input type="text" />
            <input type="button" value="添加" onclick="AddElement(this);" />
        </div>
        <div style="position: relative;">
            <ul id="commentList">
                <li>alex</li>
                <li>eric</li>
            </ul>
        </div>
    </div>
    <script>
        function AddElement(ths) {
            // 獲取輸入的值
            var val = ths.previousElementSibling.value;
            ths.previousElementSibling.value = "";
            var commentList = document.getElementById('commentList');
            //第一種形式，字符串方式
            //var str = "<li>" + val + "</li>";
            // 'beforeBegin'、 'afterBegin'、 'beforeEnd'、 'afterEnd'
            // beforeEnd內部最後
            // beforeBegin 外部上邊
            //afterBegin  內部貼身
            //afterEnd    外部貼牆
            //commentList.insertAdjacentHTML("beforeEnd",str);
            //第二種方式，元素的方式
            var tag = document.createElement('li');
            tag.innerText = val;
            var temp = document.createElement('a');
            temp.innerText = '百度';
            temp.href = "http://etiantian.org";
            tag.appendChild(temp);
            // commentList.appendChild(tag);
            commentList.insertBefore(tag,commentList.children[1]);
        }
    </script>
</body>
</html>

實例

實例

 

5、樣式操作

 

var obj = document.getElementById('i1')


obj.style.fontSize = "32px";

obj.style.backgroundColor = "red";
//Hello World!樣式改變
<!DOCTYPE html>
<html>
<body>

<p id="p1">Hello World!</p>
<p id="p2">Hello World!</p>

<script>
document.getElementById("p2").style.color="blue";
document.getElementById("p2").style.fontFamily="Arial";
document.getElementById("p2").style.fontSize="larger";
</script>


</body>
</html>
// 點擊後修改樣式
<!DOCTYPE html>
<html>
<body>

<h1 id="id1">My Heading 1</h1>
<button type="button" 
onclick="document.getElementById('id1').style.color='red'">
點擊這裏！</button>

</body>
</html>

 

6、位置操作

總文檔高度  document.documentElement.offsetHeight
 
當前文檔佔屏幕高度 document.documentElement.clientHeight
  
自身高度 tag.offsetHeight
 
距離上級定位高度 tag.offsetTop
   
父定位標籤 tag.offsetParent
   
滾動高度 tag.scrollTop

 

documentManager 是什麼 java_標籤屬性_18

clientHeight -> 可見區域：height + padding
    clientTop    -> border高度
    offsetHeight -> 可見區域：height + padding + border
    offsetTop    -> 上級定位標籤的高度
    scrollHeight -> 全文高：height + padding
    scrollTop    -> 滾動高度
    特別的：
        document.documentElement代指文檔根節點

documentManager 是什麼 java_標籤屬性_18

 

documentManager 是什麼 java_標籤屬性_02

documentManager 是什麼 java_標籤屬性_03

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body style="margin: 0;">
    <div style="height: 20px;"></div>
    <div style="padding: 8px;margin: 20px;position: relative;">
            <div id="i1" style="height:200px;border: 40px solid green;padding: 10px; margin: 90px;">asdf</div>
    </div>
    <script>
        var t1 = document.getElementById('i1');
        console.log(t1.clientTop); // 邊框高度
        console.log(t1.clientHeight); // height + padding上 + padding下

        console.log(t1.offsetTop);     //可見內容距離頂部高度；單純距離頂端高度，從邊框外部開始計算
        console.log(t1.offsetHeight); //可見內容高度；自身高度  height + padding上 + padding下 + border上 + border下

        console.log(t1.scrollTop);
        console.log(t1.scrollHeight); // 內容高度，height + padding上 + padding下
    </script>
</body>
</html>

示例

View Code

 

7、修改標籤內容

 

可以通過找到的對象obj，修改標籤內容

 


obj.innerText = "ok"

 

obj.innerHtml = "<h1>ok</h1>"

　　

對於特殊的標籤

　　input系列

　　textarea標籤

　　select標籤

需要通過obj.value = 'ok'形式修改內容

 

8、插入標籤　　

documentManager 是什麼 java_標籤屬性_02

documentManager 是什麼 java_標籤屬性_03

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title id="2">Title</title>
</head>
<body>

<div>
    <h2>ok</h2>
    <form action="#" id="1" class="form1" name="form1">
        <input id =5 type="text">
        <input type="text">
        <p>男:<input id=3 type="checkbox" name="男" value="nan"></p>
        <input type="submit">
    </form>
    <h1 id="h1">hao</h1>
    <input type="datetime-local">
</div>
<script>
     var names = document.getElementById('5');  //得到一個普通對象
//    var names = document.querySelector('*');  //得到一個最先找到的對象,可以使用通配符*
    names.value = "ok";
    var newtag = document.createElement('a');
    newtag.href = "http://www.forts.cc";
//    newtag.innerText = "堡壘";

    var container = document.getElementsByTagName('form')[0]; // 找到第一個H1標籤
//    container.appendChild(newtag);  //將新標籤放到該標籤裏面,作為H1標籤的子標籤

//    container.insertBefore(newtag,container.firstChild); //將新標籤插到H1標籤第一個子標籤位置
//     container.innerHTML = "<input type='text' />"; //這種方式會直接把container裏面的所有元素覆蓋
     //'beforeBegin', 'afterBegin','beforeEnd','afterEnd'
//     container.insertAdjacentHTML('beforeEnd', "<a href='#'>Hello</a>"); // 插在容器末尾最後一個子元素
//     container.insertAdjacentHTML('beforeBegin', "<a href='#'>Hello</a>"); //插在容器前,同級插入
     container.insertAdjacentHTML('afterBegin', "<a href='#'>Hello</a>"); //插在容器內,成為容器的第一個兒子
//     container.insertAdjacentHTML('afterEnd', "<a href='#'>Hello</a>");  //同級插入,在容器標籤的後面
    console.log(names);
</script>

</body>
</html>

示例

View Code

 

9、提交表單

document.getElementById('form').submit();

　　

documentManager 是什麼 java_標籤屬性_02

documentManager 是什麼 java_標籤屬性_03

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
 
    <form id="form_1" action="https://www.sogou.com/">
        <div>
            <input type="text" name="query"/>
        </div>
 
        <!--第一個submit是可以提交的這個肯定沒問題-->
        <input type="submit" value="submit">
        <!--第二個button可以提交-->
        <input type="button" value="button" onclick="go()">
    </form>
 
    <script type="text/javascript">
        function go() {
            document.getElementById('form_1').submit();  //提交表單
        }
    </script>
 
</body>
</html>

View Code

 

　　


10、其他操作

1

2

3

 
console.log                 輸出框
alert                       彈出框
confirm                     確認框

confirm() ，彈出消息提示框，顯示“確定”或“取消”，根據用户的選擇返回True 或者 Flase　　

1

2

3

4

5

6

7

8

9

10

11

12

13

 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script type="text/javascript">
var result = confirm('是否繼續');
console.log(result);
</script>
</body>
</html>　

 

1

2

3

4

 
// URL和刷新
location.href               獲取URL
location.href = "url"       重定向
location.reload()           重新加載

 

documentManager 是什麼 java_標籤屬性_02

documentManager 是什麼 java_標籤屬性_03

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div>
        網頁跳轉
    </div>
    <div>
        <!--在同一個標籤內打開-->
        <input type="button" onclick="jump()" value="跳轉至校花網" />
        <!--新起一個標籤打開-->
        <input type="button" onclick="jump_new()" value="跳轉至百度" />
    </div>
    <script type="text/javascript">
        function jump() {
            window.location.href = 'http://www.xiaohuar.com/'
        }
        function jump_new() {
            window.open('https://www.baidu.com')
        }
    </script>
</body>
</html>

實例

實例

 

1

2

3

4

5

 
// 定時器
setInterval                 多次定時器
clearInterval               清除多次定時器
setTimeout                  單次定時器
clearTimeout                清除單次定時器

setInterval;設置定時器

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script type="text/javascript">
function f1() {
console.log("Hello world!")
}
setInterval('f1()',1000);//設置定時器
</script>
</body>
</html>

clearInterval;關閉計時器

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

 
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script type="text/javascript">
function f1() {
console.log("Hello world!");
clearInterval(obj);  //關閉計時器，需要一個全局的句柄，這裏obj就是全局的句柄。
}
obj = setInterval('f1()',1000);   //函數要加''，第二個參數是時間毫秒。
</script>
</body>
</html>

setTimeout();    clearTimeout(obj) 也是計時器它和setinterval的區別就是，它只執行一次。　　

　　

 

 三、事件

 

事件列表 

屬性

此事件什麼時候發生（什麼時候被觸發

onabort　　　　

圖象的加載被中斷

onblur　　　　

元素失去焦點

onchange　　　

區域的內容被修改

onclick

當用户點擊某個對象時調用的事件句柄（比點擊input標籤時執行上面的代碼例子）

ondblclick

當用户雙擊某個對象時調用的事件句柄

onerror　　

在加載文檔或圖像時發生錯誤

onfocus

元素獲得焦點

onkeydown

某個鍵盤按鍵被按下

onkeypress

某個鍵盤按鍵被按下並鬆開

onkeyup

某個鍵盤被鬆開

onload

一張頁面或一副圖片完成加載

onmousedown

鼠標按鈕被按下 

onmousemove

鼠標移動過來後

onmouseout

鼠標從某個元素移開

onmouseover

鼠標移動到某個元素之上

onmouseup

鼠標按鍵被鬆開

onreset 

 重置按鈕被點擊

onresize

 窗口或框架被重新調整大小

onselect

 文本被選中

onsubmit

 確認按鈕被點擊

onunload

 用户退出頁面

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 ps：一個標籤可以綁定多個事件。

1

 
<input type="button" onmouseover="edit()" onmouseout="rollback()" value="修改&回滾" />

對於事件需要注意的要點：

  • this
  • event
  • 事件鏈以及跳出

this標籤當前正在操作的標籤，event封裝了當前事件的內容

this 表示當前標籤

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div onmouseover="Func(this);" onmouseout="Out(this);">123</div>
<input type="text" onkeydown="Down(this,event);" />
<script>
 
function Down(ths,e) {
console.log(e.keyCode);
}
 
function Func(ths) {
ths.style.color = 'red';
}
function Out(ths) {
ths.style.color = 'black';
}
</script>
</body>
</html>

　　

onunload 有差異，寫在javascript裏面，執行完成後才執行這個。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script type="text/javascript">
//        這裏的onload是,當整個頁面加載完成之後才執行的,整個頁面包含的元素加載完成之後才執行的.
window.onload = function () {
alert("The page Load complete")
};
function edit() {
var i = document.getElementById('id_1');
i.className = 'color_red';
}
function rollback() {
var i = document.getElementById('id_1');
i.className = ''; //給他設置為空即可
}
</script>
</body>
</html>

　　

默認事件

組織後面的事件發生：

1

2

3

4

5

 
return func();
 
function func(){
return false;
}

實例：

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

 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<a href="http://etiantian.org" onclick="return Func();">揍你</a>
<form action="s2.html">
<div id="form1">
<input type="text" />
</div>
<input type="submit"  value="提交" onclick="return SubmitForm();" />
</form>
<script>
function Func() {
alert(123);
return true;
}
function SubmitForm() {
var inputs = document.getElementById('form1').getElementsByTagName('input');
for(var i =0;i<inputs.length;i++){
var currentInput = inputs[i];
var val = currentInput.value;
if(val.trim().length == 0){
alert('請輸入內容');
return false;
}
}
return true
 
}
</script>
</body>
</html>