JS DOM操作
Dom
Dom：文档对象模型（Document Object Model，简称DOM）是一种用于HTML和XML文档的编程接口。它给文档提供了一种结构化的表示方法，可以改变文档的内容和呈现方式。
1、document
它指的是HTML（显示数据）或XML标签（传输数据）
例如：<body></body> <div></div><p></p> 这样的标签。
2、object 对象
注：使用js操作html就需要先将html结果转成js对象。
转成对象的四种形式
（1）标签名【多个】
var objs = document.getElementsByTagName(“div”) //获取文档中的所有div
（2）id【1个】//若有多个重复id默认获取第一个
var obj = document.getElementById("one");
（3） name 【多个】
var objs = document.getElementsByName("two");
（4） class name【多个】
var objs = document.getElementsByClassName("three");
<!-- 获取对象 -->
<div></div>
<div id="one">one</div>
<div name="two">two</div>
<div class="three">three</div>
<script>
var obj1 = document.getElementsByTagName("div");
var obj2 = document.getElementById("one");
var obj3 = document.getElementsByName("two");
var obj4 = document.getElementsByClassName("three");
console.log(obj1);
console.log(obj2);
console.log(obj3);
console.log(obj4);
</script>
转换成对象便可进行3种操作
（1）操作属性
对象名.属性名 = “值”
（2）修改内容
innerText //修改文本内容
innerHTMl //修改html
也可以使用对象名.innerText 获取文本值
注：表单（input text area）取值时不可以使用innerText得使用value
（3）修改样式
（1）对象名.style.css样式名 = “值”
（2）使用对象名. className = “值” 添加新的class名来修改样式
使用对象名. className+ = “ ” + “值” 添加新的class名来修改样式
<a id = "link" href="http://www.baidu.com" target = "_blank" title = "this is title">test </a>
<script>
/*修改属性*/
var link = document.getElementById("link");
link.href = "http://www.hteis.cn";
link.title = "new title"
/*修改内容*/
link.innerText="恒泰能联"; //修改文本内容
link.innerText="<b>恒泰能联</b>";
link.innerHTML = "<h1>hteis</h1>" //修改html
/*修改样式*/
link.style.color ="red";
link.className = "test";
link.className += " " + "test1";
</script>
3、Modal
（1）将文档想像成一个倒树，每一部分（元素，内容，属性，注释）都是节点
（2）只要找到一个节点按照关系就可以找到所有的节点
父节点 ：parentNode
子节点（第一个，最后一个）：childNodes firstNode lastNode
兄弟节点（上一个(左边),下一个(右边)）: previoussibling nextsibling
（3）节点有
节点类型nodeType
节点名nodeName
节点值nodeValue
<!-- modal -->
<div>
<b>eddd</b>
<p id="pp">
ff
<a href="#">agf</a>
<span>fdigig</span>
</p>
<button onclick="myFunction()">试一下</button>
<input type ="text" value ="abg" />
</div>
<script>
/*modal*/
var pp = document.getElementById("pp");
console.log(pp);
console.log(pp.parentNode.nodeName);
console.log(pp.previousSibling.previousSibling);
console.log(pp.nextSibling.nextSibling);
console.log(pp.childNodes);
console.log(pp.firstChild.nodeType);//节点类型
console.log(pp.firstChild.nodeValue);//节点值
console.log(pp.lastChild.nodeName);//节点名
function myFunction()
{
var c=document.getElementsByTagName("button")[0];
console.log(c.childNodes[0].nodeValue);
}
</script>
若有错误欢迎留言指正
作者：BlancheWang
出处：http://www.cnblogs.com/hhw3
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接。
