知识总结：
<pre>
1.document获取元素对象：
直接方式：
第一种：通过元素id
document.getElementById("id名");
第二种：通过name属性
document.getElementsByName("name名");返回数组NodeList
第三种：通过标签名
document.getElementsByTagName("标签名");返回数组 HTMLCollection
</br>
间接方式：
父子关系：获取父元素，根据属性childeNodes获取所有的子元素
子父关系：获取子元素，根据属性parentNode获取父元素
兄弟关系：先获取元素，使用属性previousSibling、nextSibling获取元素
</br>
在js中获取到的html元素是转化后的对象，使用对象存储方便。
间接方式中，获取子元素和获取兄弟元素需要注意某些浏览器会将空行作为对象元素的问题。
</br>
2.document操作元素属性：（先要获取元素对象）：
获取元素属性值：
固有属性：元素对象名.属性名
自定义属性：元素对象名.getAttribute("属性名");
</br>
注意：固有属性方式不能获取自定义属性
自定义属性方式可以获取固有属性值，但对于value属性获取的是默认值
修改元素属性值：
修改固有属性：对象名.属性名="属性名"，注意name属性和id属性的值不要轻易更改
修改自定义属性值：对象名.setAttribute("属性名","属性值");
</br>
3.document操作元素内容：
innerHTML：
获取元素内容：获取全部内容包括HTML标签
修改元素内容：原有值被覆盖，HTML标签会被解析
</br>
innerText:
获取元素内容：获取的是元素中的文本内容，不包括HTML标签
修改元素内容：原有内容会被覆盖，但是HTML标签不会被解析
</br>
4.document操作元素样式：
使用style属性：
增加元素样式：对象名.style.样式名="样式值"；//样式名如果存在"-"，把"-"删除改成驼峰
删除元素样式：对象名.style.样式名="";
</br>
使用className：
增加样式：对象名.className="类选择器名"
删除样式：对象名.className="";
</pre>
代码示例：
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
function getBy(){
var myid=document.getElementById("mytext");
var myname=document.getElementsByName("btn");
var mytag=document.getElementsByTagName("input");
alert("getElementById返回值："+myid);
alert("getElementsByName返回数组类型："+myname);
alert("getElementsByTagName返回数组类型："+mytag);
}
function getParent(){
var son=document.getElementById("son");
var parent=son.parentNode;
alert(parent);
}
function getSib(){
var son2=document.getElementById("son2");
var nextsib=son2.nextSibling.nextSibling;
var presib=son2.previousSibling.previousSibling;
alert(presib.value+"————"+nextsib.value);
}
function myAttr(){
var thetxt=document.getElementById("txt");
var myspan=document.getElementById("myspan");
thetxt.setAttribute("abc","这是自定义属性值");
myspan.innerHTML="输入框的id："+thetxt.id+"</br>输入框的name："+thetxt.name+"</br>输入框の自定义属性："+thetxt.getAttribute("abc");
}
function innert(){
var mydiv02=document.getElementById("div02");
alert(mydiv02.innerText);
mydiv02.innerText="<input type='text' name='txt' id='txt' value='this is txt.' abc='123' />萌萌哒";
}
function innerh(){
var mydiv02=document.getElementById("div02");
alert(mydiv02.innerHTML);
mydiv02.innerHTML="<input type='text' name='txt' id='txt' value='this is txt.' abc='123' />萌萌哒";
}
</script>
<style type="text/css">
.mydiv{
width: 200px;
height: 200px;
border: 1px solid;
background-color: aliceblue;
}
</style>
</head>
<body onload="getBy();myAttr();">
<div id="">
<input type="text" name="mytext" id="mytext" value="text" />
<input type="button" name="btn" id="btn1" value="button" />
<input type="button" name="btn" id="btn2" value="button" />
</div>
<hr />
<div class="mydiv" name="mydiv">
<input type="button" name="son" id="son" value="获取父元素" onclick="getParent()" />
<input type="button" name="" id="son2" value="获取兄弟元素" onclick="getSib();"/>
<input type="text" name="" id="" value="兄弟" />
</div>
<hr />
<div id="div02">
<input type="text" name="txt" id="txt" value="this is txt." abc="123" />
<br />
呵呵哒
<br />
<span id="myspan">
</span>
</div>
<div id="">
<input type="button" name="" id="" value="测试innerText" onclick="innert();"/>
<input type="button" name="" id="" value="测试innerText" onclick="innerh();"/>
</div>
</body>
</html>
网友评论