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
一、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;


二、訪問HTML元素的方法總結
1、通過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中去
2、通過父元素的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";

3、通過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;
    }
}