今天整理一下有关dom学习的相关内容。
文档对象模型dom：document object model
为了方便javascript语言通过dom操作html比较方便，
把html标签的内容划分为各种节点：
文档节点(document)---body；
元素节点----标签；
文本节点---内容；
属性节点---属性；
注释节点---注释；
dom就是学习利用javascript如何实现对html标签内容的增、删、改、查等操作
元素节点获取具体操作方法：
document.getElementById(id属性值唯一);
document.getElementsByTagName(tag标签名称);
document.getElementsByName(name属性值);不推荐，有浏览器兼容问题,通常应用在form表单里边。
通过getElementsByTagName收集的元素节点以“集合、数组”（即时只有一个节点）的形式返回
文本节点获取
<div>hello</div>
需要借助div元素节点再获得其内部的文本节点.
var dvnode = document.getElementsByTagName(‘div’)[0];
dvnode.firstChild; (或调用lastChild)获得元素div内部的第一个子节点对象
firstChild、lastChild:父节点获得第一个/最后一个子节点
nextSibling:获得下个兄弟节点
previousSibling:获得上个兄弟节点
childNodes:父节点获得内部全部的子节点信息
console.log(ull.childNodes.length); //7（节点个数）
console.log(ull.firstChild); //第一个节点
console.log(ull.firstChild.nextSibling); //<li>red</li>第一个节点后面一个的节点
console.log(ull.lastChild); //<TextNode textContent="
">最后一个节点
console.log(ull.lastChild.previousSibling); //<li>green</li>最后一个节点前面一个的节点
父节点的获取
<body>
<h2>父节点获取</h2>
<ul>
<li>red</li>
<li>blue</li>
<li>green</li>
</ul>
</body>
<script type="text/javascript">
var blue = document.getElementsByTagName('li')[1];
console.log(blue);//<li>blue</li>
console.log(blue.parentNode);//<ul>
console.log(blue.parentNode.parentNode);//<body>
</script>
操作属性：
<body>
<h2>属性值操作</h2>
<a href="http://www.baidu.com" addr='beijing' target="_blank" class="apple">百度</a><br >
<input type="button" value="修改属性" onclick="f1()" ><br >
</body>
</html>
<script type="text/javascript">
var baidu = document.getElementsByTagName('a')[0];
① 获得属性的信息
getAttribute
console.log(baidu.href);
console.log(baidu.target);
console.log(baidu.className);//apple /className是class的一个别名，不可以直接访问class属性
console.log(baidu.addr);//undefined
console.log(baidu.getAttribute('href'));
console.log(baidu.getAttribute('addr'));
console.log(baidu.getAttribute('target'));
② 设置属性的信息
setAttributefunction f1(){
baidu.href = "http://www.163.com";
baidu.target = "_self";
baidu.addr = "tianjin";
属性修改 有就更新、没有就创建
baidu.setAttribute('addr','shanghai');
baidu.setAttribute('height','170'); //新创建
}