Day13:操作HTML （四）

第 12 屆 iThome 鐵人賽

DAY 13

Modern Web

小白的JavaScript讀書日記系列第 13 篇

12th鐵人賽

q20038848

2020-09-14 08:34:42

819 瀏覽

分享至

Day12的練習:
Try1

<body>
        <h1>最喜歡的速食店</h1>
    <form>
        <label><input type="radio" name="food" value="麥當勞">麥當勞</label>
        <label><input type="radio" name="food" value="肯德基">肯德基</label>
        <label><input type="radio" name="food" value="丹丹漢堡">丹丹漢堡</label>
        <input type="button" value="送出" id="btn">
    </form>
        <script>
            document.addEventListener('DOMContentLoaded',function(){
                let getRadioValue = function(name){
                    let result =""
                    let elems =document.getElementsByName(name);
                    for(let i=0,len=elems.length;i<len;i++){
                        let elem =elems.item(i);
                        if(elem.checked){
                            result = elem.value;
                        }
                    }
                    return result;
                }
                    document.getElementById('btn').addEventListener('click',function(){
                    window.alert(getRadioValue('food'));
                })
            });  
        </script>
</body>

Try2

<body>
    <h1>最喜歡的速食店</h1>
    <form>
        <label><input type="radio" name="food" value="麥當勞">麥當勞</label>
        <label><input type="radio" name="food" value="肯德基">肯德基</label>
        <label><input type="radio" name="food" value="丹丹漢堡">丹丹漢堡</label>
        <input type="button" value="送出" id="btn">
    </form>
        <script>
            document.addEventListener('DOMContentLoaded',function(){
                let setRadioValue = function(name, value){
                    let elems = document.getElementsByName('food')
    
                    //檢查CheckBox找出相同的元素
                    for(let i=0,len=elems.length;i<len;i++){
                        let elem = elems.item(i);
                        
                        //將帶入的value參數設定為被選擇的狀態
                        if(elem.value===value){
                            elem.checked= true;
                        }
                    }
                }
                setRadioValue('food','丹丹漢堡');
            });
        </script>
</body>

以上~
今天要聊的是既之前提過的取的節點之外，還可以對文件樹做這新增，取代，移除線有節點等功能，我們開始吧!

建立新節點

以下範例是依據表單輸入內容，產生對應的超連結:

<body>
    <form>
        <div>
            <label for="name">網站名稱:</label><br />
            <input type="text" name="name" id="name" size="30">
        </div>
        <div>
            <label for="url">URL:</label><br />
            <input type="url" name="url" id="url" size="50">
        </div>
        <div>
            <input type="button" value="新增" id="btn">
        </div>
    </form>
    <div id="list"></div>
        <script>
          document.addEventListener('DOMContentLoaded',function(){
            document.getElementById('btn').addEventListener('click',function(){
                //取得TextBox
                let name = document.getElementById('name');
                let url = document.getElementById('url');

                //建立<a>元素
                let anchor = document.createElement('a');

                //設定<a>元素的href屬性
                anchor.href =url.value;

                //建立字串節點，加到<a>元素下
                let text =document.createTextNode(name.value);
                anchor.appendChild(text);

                //建立<br>元素
                let br = document.createElement('br');

                //取得 <div id="list">
                let list = document.getElementById('list');

                list.appendChild(anchor);
                list.appendChild(br);
            })
          })
        </script>
</body>

上述我們用到了createElement()方法，建立<a>元素；以及createTextNode()方法建立字串節點，最後再用appendChild()方法插入節點，這三種方法的語法如下:
document.createElement(name): name=元素名稱。
document.createTextNode(text): text=字串。
elem.appendChild(node): elem=元素物件、node=新增的節點。
這邊要注意的是createNode方法建立的字串節點，只是一般字串，所以如果你打上google，整段會被視為字串，可以試看看!
下列也附上w3c的連結，可以參考參考
https://www.w3schools.com/JSREF/dom_obj_document.asp

取代/移除已存在的節點

取代節點 replaceChild()方法
語法:
elem.replaceChild(after,before)
elem:元素物件
after:取代之後的節點
before:取代目標
附上w3c的練習:
https://www.w3schools.com/jsref/met_node_replacechild.asp

刪除節點 removeChild()方法
語法:
elem.removeChild(node)
elem:元素物件
node:要刪除的點
附上w3c的練習
https://www.w3schools.com/JSREF/met_node_removechild.asp

刪除屬性節點 removeAttribute()
屬性並不是元素的子節點，因此要刪除屬性不適合用removeChild()方法，
可以用專屬的removeAttribute()方法。
語法:
元素物件.removeAttribute(屬性名稱)
附上w3c的練習
https://www.w3schools.com/JSREF/met_element_removeattribute.asp