day16-Dom属性以及创建标签
一、前言
我们今天来研究一下，利用Dom来设置标签的属性和用dom去创建标签。
二、Dom属性
2.1、设置属性(setAttribute)
说明：设置某个标签的属性，用法：setAttribute(key,value)
>>>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)
>>>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
>>>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)
>>>tag
<input id="i1" type="text" value="请输入用户名" style="color: red;" name="sgg">
>>>tag.getAttribute("name"); //获取name标签的属性
"sgg"
小结：
- setAttribute 设置标签属性
- removeAttribute 删除标签属性
- attributes 获取标签所有属性
- getAttribute 获取标签属性的值
三、创建标签
3.1、字符串的形式添加
说明：把需要的添加的标签，直接添加成字符串
var add_tag = "<p><input type='text'/></p><hr />"; //创建一个标签
var tag = document.getElementById("i1");
tag.insertAdjacentHTML("beforeEnd",add_tag); //把标签添加到i1里面
完整的代码如下：
<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的封装的函数，来创建标签
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);
完整的代码如下：
<body>
<input type="button" onclick="addEle();" value="+">
<div id="i1">
<input type="text">
<hr />
</div>
<script>
function addEle(){
var add_tag = document.createElement("input");
add_tag.setAttribute("type","text");
add_tag.style.fontSize = "16px";
add_tag.style.color = "red";
var p_tag = document.createElement("p");
p_tag.appendChild(add_tag);
var hr_tag = document.createElement("hr");
var tag = document.getElementById("i1");
tag.appendChild(p_tag);
tag.appendChild(hr_tag);
}
</script>
</body>
小结：
创建标签，并添加到HTML中：
- 以字符串的形式
- 以对象的形式
