js 節點 document html css 表單節點操做

js 節點 document html css 表單節點操做

節點操做：訪問、屬性、建立
（1）節點的訪問：firstChild、lastChild、childNodes、parentChild(父子節)
        可使用元素對象的方法進行代替：getElementById()、getElementsByTagName()
（2）節點屬性的操做：setAttribute()、removeAttribute()、getAttribute()
（3）節點的建立、刪除、追加：
建立節點：document.createElement(tagName)
        刪除節點(必須父節點下的子節點才能被刪除)：parentObj.removeChild(nodeObj)
        追加節點：parentObj.appendChild(nodeObj);

CSS DOM
核心：就是給一個元素對象，增長樣式(外觀)。
概述：每個HTML標記都有一個style屬性，它對應元素元素的style屬性，該style屬性是一個對象。
    Style對象有哪些屬性：style對象的屬性，與CSS中的屬性一一對應。
    obj.style.border = 「1px solid #FF0000」
    obj.style.width = 「400px」;  //CSS必定要加單位
    obj.style.position = 「absolute」;
    

<img id=「img」  />是一個HTML標記，它的屬性有：src、 width、height、alt、border、style、title等
每個標記都對應一個元素對象，元素對象的屬性與標記的屬性如出一轍。
var obj = document.getElementById(「img」);
obj.src = 「images/bg.gif」;
obj.width = 400;
obj.border = 1;
obj.style = 「padding:20px;」

CSS屬性與style對象的屬性的轉換問題
（1）若是是一個單詞的屬性，CSS與style屬性如出一轍；如：obj.style.width = 「400px」
（2）若是是多個單詞的屬性，轉成style對象屬性時，轉換規則是：第一個單詞全小寫，後面的單詞首字母大寫，而且去掉中間的鏈接線（-）
    舉例：
            background-color   轉換後     obj.style.backgroundColor = 「#FF0000」
            font-size          轉換後     obj.style.fontSize = 「18px」
            
    //獲取id=box的對象
    var obj = document.getElementById("box");
    //給id=box的對象增長樣式
    obj.style.width = "400px";
    obj.style.height = "300px";
    obj.style.border = "2px dotted #ccc";
    obj.style.backgroundColor = "#f0f0f0";
    obj.style.margin = "50px auto";
    obj.style.fontSize = "24px";
    obj.style.color = "#FF0000";


HTML DOM
1、HTML DOM的特性
    （1）每個HTML標記，都對應一個元素對象。每一個標記，都是一個對象，是一個節點。例如：<img>對應一個img對象，一個<table>標記，對應一個table對象，一個<form>標記，對就form對象等。
    （2）HTML標記的屬性，與元素對象的屬性如出一轍。
        <img>標記屬性：src、width、border、height等
        imgObj.src = 「images/bg.gfi」;
        imgObj.width = 400;
        imgObj.height = 300;
        imgObj.border = 2;


2、訪問HTML元素的方法總結
一、經過document對象的getElementById()方法來訪問，返回一個對象
    <div id=」box」></div>
    var obj = document.getElementById(「box」);   //獲取對象
    var img = document.createElement(「img」);    //  建立節點
    img.src = 「images/img01.jpg」;   //使用元素對象的屬性
    img.border = 2;
    img.style.padding = 「10px」;  //使用style對象來增長樣式
    img.style.float = 「left」;
    obj.appendChild(img);  //將img節點，追加到id=box中去
二、經過父元素的getElementsByTagName()方法來訪問，返回一個數組對象
    語法結構：var arrObj = document.getElementsByTagName(「li」)
    功能描述：取得標記爲<li>的一個數組(標記列表)。
    舉例：取得一個<ul>標記中的全部的<li>標記
        //獲取id=ul的對象
        var ulObj = document.getElementById("ul");
        //取得全部的li對象的一個數組
        var arrLi = ulObj.getElementsByTagName("li");
        //修改第二個和第四個li的樣式
        arrLi[1].style = "font-size:24px;color:#ff0000;";
        arrLi[3].style.textDecoration = "underline";

三、經過name屬性來訪問（通常用於表單元素）
    onsubmit事件：當單擊「提交按鈕」時，發生的事件。事件的返回值，直接決定默認動做的執行。
    onsubmit的返回值，若是爲true或空，則表單提交；若是爲false，則阻止表單提交。
<form name="form1" action="login.php" method="post" onsubmit="return checkForm()">
    用戶名：<input type="text" name="username" />
    密碼：<input type="password" name="password" />
    <input type="submit" value="提交表單" />
</form>
<script type="text/javascript">
function checkForm()
{
    //取到表單中各元素
    if(document.form1.username.value == "")
    {
        window.alert("用戶名不能爲空");
        return false;
    }else if(document.form1.password.value.length == 0)
    {
        window.alert("密碼不能爲空");
        return false;
    }else
    {
        return true;
    }
}