JS 07 Dom_ZenDei技術網路在線

DOM（Document Object Model）：結點的概念：整個文檔就是由層次不同的多個節點組成，可以說結點代表了全部內容。結點類型 1.元素結點 2.屬性結點 3.文本結點結點的註意點： 1.文本節點和屬性結點都看作元素結點的子結點 2.我們一般所說的結點指的就是元素結點，將html標 ...

DOM（Document Object Model）：結點的概念：整個文檔就是由層次不同的多個節點組成，可以說結點代表了全部內容。結點類型 1.元素結點 2.屬性結點 3.文本結點結點的註意點： 1.文本節點和屬性結點都看作元素結點的子結點 2.我們一般所說的結點指的就是元素結點，將html標簽看作是一個對象，並用“結點”稱呼它 3.結點的關係有：父子關係、兄弟關係 1.獲取元素結點 1)直接獲取 ① document.getElementById() ② document.getElementsByName() ③ document.getElementsByTagName() 2)間接獲取父子關係 firstChild lastChild childNodes 子父關係 parentNode 兄弟關係 nextSibling previousSibling 2.操作屬性結點 1)通過對象“.”屬性，來操作屬性優：可以動態獲取用戶修改的屬性值缺：不能獲取自定義屬性的值 2)getAttribute("key") setAttribute("key","value") removeAttribute("key") 優：可以獲取自定義屬性的值缺：不能動態獲取用戶修改的屬性值 3.處理文本結點 1) 通過對象.innerText 獲取標簽內部的文本信息 2) 通過對象.innerHTML 獲取標簽內部的HTML代碼 4.動態改變DOM結構 1)創建一個結點對象 document.createElement("標簽名") 2)（父結點）追加子結點對象 fatherNode.appendChild(子結點對象) 3)（父結點）在指定結點前添加子結點 fatherNode.insertBefore(新結點對象，參考結點對象) 4)（父結點）替換舊的子結點對象 fatherNode.replaceChild(新結點對象，舊結點對象) 5)（父結點）刪除舊子結點對象 fahterNode.removeChild(舊結點對象) 5.動態改變元素的CSS樣式（不重要） 1)我們通過對象.style屬性操作對象的css樣式：樣式名稱中有“-”將“-”去掉，並將“-”後一個字母改為大寫來作為樣式的新名稱 2)我們希望通過class為一個對象添加一個class樣式，添加屬性名是className，而並非class（class是js的關鍵字，並能作為屬性名存在）

<script type="application/javascript">
       //1.獲取元素結點
       //1)直接獲取
//        ① document.getElementById()
        function getEle1(){
            var obj=document.getElementById("userid")
            console.log(obj)
        }
//        ② document.getElementsByName()
        function getEle2() {
            // 獲取的是一個數組
            var obj = document.getElementsByName("fav");
            console.log(obj)
        }
//        ③ document.getElementsByTagName()
        function getEle3(){
            var obj = document.getElementsByTagName("input");
            console.log(obj);
        }


        function getEle4(){
            var father = document.getElementById("regForm");
            var sons = father.childNodes;
//                獲取指定位置
            console.log(sons[1]);
//              firstChild   獲取第一個
            console.log(father.firstChild);
//             lastChild   獲取最後一個
            console.log(father.lastChild);
        }

//      子父關係  parentNode
        function getEle5(){
            var son = document.getElementById("userid");
            console.log(son.parentNode)
        }
//       兄弟關係 nextSibling 下一個對象  
//previousSibling當前結點的前一個結點返回緊鄰當前元素之前的元素
        function getEle6(){
            var bro = document.getElementById("userid");
            console.log(bro.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling);
            bro.previousSibling

        }

        function getField1(){
            var obj = document.getElementById("nickid");
            //console.log(obj.type);
            //將昵稱的樣式改為password
            //obj.type = "password"; 

            var objval = obj.getAttribute("name");
            console.log(objval);
            obj.setAttribute("abcd","5678");
            obj.removeAttribute("type");

//            可以獲取改變後的屬性
            console.log(obj.value)
//            只能獲取初始定義的屬性
            console.log(obj.getAttribute("value"));
        }

        //        1) 通過對象.innerText 獲取標簽內部的文本信息
        function getText1(){
            var myDiv = document.getElementById("myDiv");
            console.log(myDiv.innerText);
        }
//        2) 通過對象.innerHTML 獲取標簽內部的HTML代碼
        function getText2(){
            var myDiv = document.getElementById("myDiv");
            console.log(myDiv.innerHTML);
        }

//        添加文本
        function getText3(){
            var myDiv = document.getElementById("myDiv");
            myDiv.innerText = "<img src='1.jpg' />";
        }
//        添加代碼
        function getText4(){
            var myDiv = document.getElementById("myDiv");
            myDiv.innerHTML = "<img src='1.jpg' />";
        }




    </script>
</head>
<body>

<button onclick="getEle1();">點我測試1</button>
<button onclick="getEle2();">點我測試2</button>
<button onclick="getEle3();">點我測試3</button>
<button onclick="getEle4();">點我測試4</button>
<button onclick="getEle5();">點我測試5</button>
<button onclick="getEle6();">點我測試6</button>
<hr/>

<button onclick="getField1();">屬性測試1</button>
<hr/>
<button onclick="getText1();">文本測試1</button>
<button onclick="getText2();">文本測試2</button>
<button onclick="getText3();">文本測試3</button>
<button onclick="getText4();">文本測試4</button>

<hr/>
<form id="regForm">
    用戶名：<input id="userid" type="text" name="username"><br/>
    密碼：<input type="password" name="password"><br/>
    昵稱：<input id="nickid" type="text" name="nickname" value="大名鼎鼎" abcd="1234" ><br/>
    性別：男<input type="radio" name="gender" value="nan">&nbsp;&nbsp;
    女<input type="radio" name="gender" value="nv"><br/>
    愛好：狗<input type="checkbox" name="fav" value="dog">
    貓<input type="checkbox" name="fav" value="cat">
    羊駝<input type="checkbox" name="fav" value="yt"><br/>
    <input type="submit" value="註冊">
</form>
<div id="myDiv"><b>hello</b></div>
</body>

4.動態改變DOM結構 1)創建一個結點對象 document.createElement("標簽名")

<script type="application/javascript">
    function changeDom1(){
        var ipt=document.createElement("input");
    }
</script>
<button onclick="changeDom1();">創建結點對象</button>

2)（父結點）追加子結點對象 fatherNode.appendChild(子結點對象)

function changeDom2() {
    var father = document.getElementById("regForm");

    var ipt = document.createElement("input");
    ipt.type = "text";

    father.appendChild(ipt);
}
<button onclick="changeDom2();">追加子結點對象</button>

3)（父結點）在指定結點前添加子結點 fatherNode.insertBefore(新結點對象，參考結點對象)

function changeDom3() {
    var father = document.getElementById("regForm");
    var refChild = document.getElementById("brid");
    var newChild = document.createElement("input");
    newChild.type = "text";
    father.insertBefore(newChild, refChild);
}
<button onclick="changeDom3();">插入子結點對象</button>

4)（父結點）替換舊的子結點對象 fatherNode.replaceChild(新結點對象，舊結點對象)

function changeDom4() {
    var father = document.getElementById("regForm");
    var refChild = document.getElementById("brid");
    var newChild = document.createElement("input");
    newChild.type = "text";
    father.replaceChild(newChild, refChild);
}
<button onclick="changeDom4();">替換子結點對象</button>

5)（父結點）刪除舊子結點對象

function changeDom5() {
            var father = document.getElementById("regForm");
            var refChild = document.getElementById("nickid");
            father.removeChild(refChild);
        }
<button onclick="changeDom5();">刪除子結點對象</button>

5.動態改變元素的CSS樣式（不重要）

<style type="text/css">
        .addstyle{
            color: red;
            font-size: 72px;
            text-decoration: underline;
        }
    </style>
    <script type="application/javascript">

        /*
         5.動態改變元素的css樣式
         1)我們通過對象.style屬性操作對象的css樣式：樣式名稱中有“-”將“-”去掉，並將“-”後一個字母改為大寫來作為樣式的新名稱
         2)我們希望通過class為一個對象添加一個class樣式，添加屬性名是className，而並非class（class是js的關鍵字，並能作為屬性名存在）
         */
        function fontGreater(){
            var myDiv = document.getElementById("myDiv");
            console.log(myDiv);
            myDiv.style.fontSize = "36px";
            myDiv.style.fontFamily = "宋體";
        }

        function changeFont(){
            var myDiv = document.getElementById("myDiv");
            myDiv.className = "addstyle";
            //myDiv.setAttribute("class","addstyle");
        }
    </script>
</head>
<body>
<button onclick="fontGreater()">放大字體</button>
<button onclick="changeFont()">添加樣式</button>

<div id="myDiv" >你好世界！</div>
</body>