Dom--屬性以及建立標籤

時間 2019-11-06

標籤 dom 屬性以及建立標籤欄目 HTML 简体版

原文原文鏈接

1、Dom屬性

　　1.1 設置屬性(setAttribute)html

　　設置某個標籤的屬性，setAttribute(key,value)　app

<body>
    <div>
        <input id="i1" type="text">
    </div>
</body>

　　設置value屬性：　htm

var obj = document.getElementById("i1")

obj.setAttribute("value", "輸入關鍵字")

　　1.2 刪除屬性，removeAttribute(key)　對象

obj.setAttribute("value", "輸入關鍵字")

obj.removeAttribute('value')  // 刪除屬性

　　1.3 獲取全部屬性(attributes)　　blog

obj.attributes
NamedNodeMap {0: id, 1: type, id: id, type: type, length: 2}

　　1.4 獲取某個屬性(getAttribute)　ip

obj.getAttribute('type')
"text

2、建立標籤

　　2.1 字符串形式rem

　　把須要添加的標籤，直接以字符串形式寫入　　字符串

<body>
    <div>
        <input type="button" onclick="addEle();" value=" + "/>
    </div>
    <div id="i1">
        <input type="text" />
        <br />
    </div>

    <script>
        function addEle() {
            var add_tag = "<p><input type='text' /></p>"; // 建立一個標籤
            var tag = document.getElementById('i1');
            tag.insertAdjacentHTML("beforeEnd", add_tag);  // 把標籤添加到i1中
        }
    </script>
</body>

　　效果，點擊「+」增長輸入框：get

　　注：insertAdjacentHTML，第一個參數只能是'beforeBegin'、 'afterBegin'、 'beforeEnd'、 'afterEnd'，他們分別指的什麼，如圖：input

　　2.2 對象方式添加

<body>
    <div>
        <input type="button" onclick="addEle();" value=" + "/>
    </div>
    <div id="i1">
        <input type="text" />
        <br />
    </div>

    <script>
        function addEle() {
            var add_tag = document.createElement("input"); //建立input標籤
            add_tag.setAttribute('type', 'text'); //爲input標籤添加屬性
            add_tag.style.fontSize = '16px'; //爲input標籤增長樣式
            add_tag.style.color = 'red';
            var p_tag = document.createElement('p'); //建立p標籤
            p_tag.appendChild(add_tag); // 將input標籤添加到p標籤中
            var tag = document.getElementById('i1');
            tag.appendChild(p_tag); // 將p標籤添加到i1中
        }
    </script>
</body>

　　效果以下：

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。