dom操作补充
s5.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="i1">
你好
<a>百<span>度</span></a>
</div>
<input type="text" id="i2"/>
<select id="i3">
<option value="11">北京</option>
<option value="12">上海</option>
<option value="13">广州</option>
</select>
<textarea id="i4"></textarea>
</body>
</html>
obj=document.getElementById('i1')
obj.innerText 只获取标签的文本
obj.innerHTML 获取标签里面的所有的，包括子标签
obj=document.getElementById('i1');
obj.innerHTML="<a href='http://www.qq.com'>腾讯</a>";
value 获取input标签中的值
obj=document.getElementById('i2');
obj.value="hyhskdk"
select:获取修改选中的value值
obj=document.getElementById('i3');
obj.value
obj.value=12
obj.selectedIndex=0 修改成第几个选项
textarea:多行文本操作
obj=document.getElementById('i4');
obj.value
obj.value=1233
s6.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="width: 600px;margin: 0 auto;">
<input id="i1" onfocus="Focus();" onblur="Blur();" type="text" value="请输入关键字">
<input type="text" placeholder="请输入关键字">
</div>
<script>
function Focus() {
var tag=document.getElementById('i1');
var val= tag.value;
if(val=="请输入关键字"){
tag.value="";
}
}
function Blur() {
var tag=document.getElementById('i1');
var val= tag.value;
if(val.length==0){
tag.value="请输入关键字";
}
}
</script>
</body>
</html>
对样式进行操作
obj=document.getElementById('i1');
obj.className="c1 c2"; 添加样式
obj.className 查询样式
obj.classList 查询样式并以列表的形式显示
obj.classList.add('c3') 添加样式
obj.classList.remove("c2") 移除样式
<div class="c1 c2" style="font-size: 16px";></div>
obj.style.fontSize='16px'; //更细致的某一个样式操作
obj.style.backgroundColor='red';
obj.style.color='green';
对属性进行操作
obj=document.getElementById("i1");
obj.setAttribute("name","alex"); 添加属性
obj.removeAttribute("value"); 删除属性
obj.attributes 获取所有的属性
创建标签并添加到html中
s8.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="button" onclick="AddEle1();" value="+">
<input type="button" onclick="AddEle2();" value="+">
<div id="i1">
<p><input type="text"></p>
<!--<hr/> 分隔线标签-->
</div>
<script>
function AddEle1() {
//创建一个标签
//将标签添加到i1里面
var tag="<p><input type='text'/></p>";
document.getElementById('i1').insertAdjacentHTML("beforeEnd",tag);
}
function AddEle2() {
//创建一个标签
//将标签添加到i1里面
var tag=document.createElement('input'); //创建一个input标签
tag.setAttribute('type','text')
tag.style.fontSize="16px";
tag.style.color='red';
var p=document.createElement('p'); //创建p标签
p.appendChild(tag)
document.getElementById('i1').appendChild(p) //添加p标签
}
</script>
</body>
</html>
创建标签的两种形式:
AddEle1:字符串的形式
AddEle2:对象的方式
document.createElement('div') 创建div标签
