前面简单学了javascript，但是大脑像浆糊一样，很不喜欢这种没有系统的感觉。。
文章目录
- 1.DOM概念
- 2.通过document对象获取节点
- 3.通过节点的层次关系获取节点
1.DOM概念
1.DOM：文档对象模型
用来将标记型文档封装成对象，并将标记型文档的所有内容（标签，文本，属性）都封装成对象，封装成对象的目的是为了更好的操作这些文档以及这些文档中的内容。
文档：标记型文档
对象：封装了属性和行为的实例，可以直接被调用
模型：所有标记型文档都具有一些共性特征
只要是标记型文档，DOM这种技术都可以对其进行操作
2.DOM这种技术如何对标记型文档进行操作呢？
要操作标记型文档，必须对其进行解析
3.DOM技术的解析方式：
将标记型文档解析一颗DOM树，并将树中的内容都封装成节点对象
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>div区域</div>
<dl>
<dt>上层项目</dt>
<dd>下层项目</dd>
</dl>
<table>
<tbody>
<tr>
<th>表头</th>
<td>单元格</td>
</tr>
</tbody>
</table>
<form>
<input type="text">
</form>
</body>
</html>
2.通过document对象获取节点
使用的是document对象中的三个方法
document对象最常见的操作就是获取节点中的对象：
getElementById()：通过标签的id属性值获取标签节点，返回该标签节点
getElementsByName()：通过标签的name属性获取节点，因为name有相同的，所以返回的是一个数组
getElementsByTagName(）：通过标签名称获取节点
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
function getNodeDemo() {
//演示getById()方法
var div1 = document.getElementById("divid");
//三个属性，节点名称，节点类型，节点值
alert(div1.nodeType+":"+div1.nodeName+":"+div1.nodeValue);
//获取div节点中的文本
var text = div1.innerHTML;
//改变div中的文本
div1.innerHTML="文本被我改了";
alert(div1.innerHTML);
}
//演示getElementByName()方法
function getNodeDemo2(){
var nodes = document.getElementsByName("user");
alert(nodes[0].value);
}
//演示getElementByTagName()方法
function getNodeDemo3(){
var nodes = document.getElementsByTagName("a");
for(var i=0;i<nodes.length;i++){
alert(nodes[i].innerHTML);
}
}
</script>
</head>
<body>
<!--
常见节点有三种：
1.标签型节点
2.属性节点
3.文本节点
标签型节点是没有值的，属性和文本节点有值
-->
<input type="button" value="演示document获取节点" onclick="getNodeDemo();">
<div id="divid">这是一个div区域</div>
<br>
<!--注意：不是所有节点都有name属性的-->
<input type="button" value="演示document获取节点" onclick="getNodeDemo2();">
<input type="text" name="user">
<br>
<!--标签既没有id，也没有name,可以通过标签名获取节点-->
<input type="button" value="演示document获取节点" onclick="getNodeDemo3();">
<a href="http://www.baidu.com">百度</a>
</body>
</html>案例：新闻链接在新窗口打开，网站链接在当前页面中打开
如何获取页面中的部分超链接?
只要获取到被操作的超链接的所属节点即可，再通过这个节点获取到它里面的所有的超链接
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
function getNodeDemo4(){
//获取超链接所属的div节点
var divNode = document.getElementById("div1");
//通过对div对象方法的查找发现它具备getElementsByTagName()方法
//记住：所有的容器型标签都具备这个方法，在该标签范围内获取指定名称的标签
var aNodes = divNode.getElementsByTagName("a");
for(var i=0;i<aNodes.length;i++){
aNodes[i].target="_blank";
}
}
</script>
</head>
<body>
<input type="button" value="演示document获取节点" onclick="getNodeDemo4();">
<a href="http://www.baidu.com">百度</a>
<a href="http://www.sina.com.cn">新浪</a>
<div id="div1">
<a href="http://www.163.com">新闻链接1</a>
<a href="http://www.164.com">新闻链接2</a>
<a href="http://www.165.com">新闻链接3</a>
</div>
</body>
</html>3.通过节点的层次关系获取节点
使用的是各个节点对象的属性，并且通过属性获得的是节点对象。
通过节点的层次关系获取节点对象
关系：
1.父节点：parentNode对应一个节点对象
2.子节点：childNodes对应一个节点集合
3.兄弟节点：
上一个兄弟节点：previousSibling
下一个兄弟节点：nextSibling
下面以div对象为例，看一下里面获取节点的方法：
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
function getNodeByLevel(){
//获取页面中的表格节点
var tableNode = document.getElementById("id1");
//获取父节点parentNode
var node = tableNode.parentNode;
alert(node.nodeName);//body
/*
注意：
下面两个方法在使用搜狗浏览器时，得出的结果都是#text
说明把空格都当成了节点元素，所以得到的是文本
解决方法：
1.让代码之间不留空格，但是太丑了
2.写去除空格的方法，但是很麻烦
所以这三个方法一般不用
*/
//获取子节点
var nodes = tableNode.childNodes;
alert(nodes[0].nodeName);//tbody因为table节点下面默认的是tbody节点，不写也存在
alert(nodes[0].childNodes[0].nodeName);//tr
//获取兄弟节点
var node1 = tableNode.previousSibling;
alert(node1.nodeName);
var node2 = tableNode.nextSibling;
alert(node2.nodeName);
}
</script>
</head>
<body>
<!--
通过节点的层次关系获取节点对象
关系：
1.父节点：parentNode对应一个节点对象
2.子节点：childNodes对应一个节点集合
3.兄弟节点：
上一个兄弟节点：previousSibling
下一个兄弟节点：nextSibling
-->
<input type="button" value="通过节点层次关系获取节点" onclick="getNodeByLevel();">
<div>div区域</div>
<table id="id1">
<tr>
<td>单元格一</td>
<td>单元格二</td>
</tr>
</table>
<dl id="id2"><dt>上层目录</dt><dd>下层目录</dd></dl>
<a href="">超链接</a>
</body>
</html>
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
