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>

　　效果以下：