day16-Dom属性以及创建标签

一、前言

　　我们今天来研究一下，利用Dom来设置标签的属性和用dom去创建标签。

二、Dom属性

2.1、设置属性(setAttribute)

说明：设置某个标签的属性，用法：setAttribute(key,value)

1
2
3
4
5
6
>>>tag = document.getElementById("i1");
<input id=​"i1" type=​"text" value=​"请输入用户名">​
>>>tag.setAttribute("name","sgg");  //设置name属性，值为sgg
undefined
>>>tag
<input id=​"i1" type=​"text" value=​"请输入用户名" name=​"sgg">​  //已经成功设置name属性

2.2、删除属性(removeAttribute)

说明：删除某个标签的属性，用法：removeAttribute(key)

1
2
3
4
5
6
>>>tag
<input id=​"i1" type=​"text" value=​"请输入用户名" name=​"sgg">​
>>>tag.removeAttribute("name"); //删除name属性
undefined
>>>tag
<input id=​"i1" type=​"text" value=​"请输入用户名" style=​"color:​ red;​">​ //已经成功删除name属性

2.3、标签所有属性(attributes)

说明：获取标签的所有的属性，用法：对象.attributes

1
2
3
4
>>>tag
<input id=​"i1" type=​"text" value=​"请输入用户名" style=​"color:​ red;​">​
>>>tag.attributes; //获取标签的所有属性
NamedNodeMap {0: id, 1: type, 2: value, 3: style, id: id, type: type, value: value, style: style, length: 4}

2.4、获取指定标签的某个属性(getAttribute)

说明：获取指定标签的某个属性，用法：getAttribute(key)

1
2
3
4
>>>tag
<input id=​"i1" type=​"text" value=​"请输入用户名" style=​"color:​ red;​" name=​"sgg">​
>>>tag.getAttribute("name"); //获取name标签的属性
"sgg"

小结：

  1. setAttribute   设置标签属性
  2. removeAttribute   删除标签属性
  3. attributes    获取标签所有属性
  4. getAttribute  获取标签属性的值

三、创建标签

3.1、字符串的形式添加

说明：把需要的添加的标签，直接添加成字符串

1
2
3
var add_tag = "<p><input type='text'/></p><hr />"; //创建一个标签
var tag = document.getElementById("i1");
tag.insertAdjacentHTML("beforeEnd",add_tag); //把标签添加到i1里面

完整的代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<body>
    <input type="button" onclick="addEle();" value="+">
    <div id="i1">
        <input type="text">
        <hr />
    </div>
 
    <script>
        function addEle(){
            var add_tag = "<p><input type='text'/></p><hr />";
            var tag = document.getElementById("i1");
            tag.insertAdjacentHTML("beforeEnd",add_tag);
        }
    </script>
</body>

注意：insertAdjacentHTML，第一个参数只能是'beforeBegin'、 'afterBegin'、 'beforeEnd'、 'afterEnd'，他们分别指的什么，如图：

3.2、对象的方式添加

说明：用dom的封装的函数，来创建标签

1
2
3
4
5
6
7
8
9
10
var add_tag = document.createElement("input"); //创建input标签
add_tag.setAttribute("type","text"); //设置属性
add_tag.style.fontSize = "16px";
add_tag.style.color = "red";
var p_tag = document.createElement("p");  //创建p标签
p_tag.appendChild(add_tag);
var hr_tag = document.createElement("hr");
var tag = document.getElementById("i1");
tag.appendChild(p_tag);  //添加p标签
tag.appendChild(hr_tag);

 完整的代码如下：

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title></title>
 6 </head>
 7 <body>
 8     <input type="button" value="+" onclick="addEle();">
 9     <div id="i1">
10         <input type="text" />
11         <hr />
12 
13     </div>
14     <script>
15         function addEle(){
16             var add_tag=document.createElement("input");
17             add_tag.setAttribute("type","text");
18             add_tag.style.fontSize="16px";
19             add_tag.style.color="red";
20             add_tag.setAttribute("value","niubi");
21             var p_tag=document.createElement("p");
22             p_tag.appendChild(add_tag);
23             var hr_tag=document.createElement("hr");
24             var tag=document.getElementById("i1");
25             tag.appendChild(p_tag);
26             tag.appendChild(hr_tag);
27         }
28 
29     </script>
30 </body>
31 </html>
 


小结：


　　创建标签，并添加到HTML中：


    

      

    • 以字符串的形式
      • 

    • 以对象的形式
      • 

    







            

            
posted @ 
2018-05-23 09:42 
东郭仔 
阅读(122) 
评论(0) 
 
收藏 
举报