每天一点JavaScript-03
2016-06-24 本文已影响64人
启LS
1.DOM（Document Object Model）
定义访问和处理HTML文档的标准方法
2.DOM将html文档呈现为带有元素、属性和文本的树结构（节点树）
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title>DOM</title>
</head>
<body>
<h2><a href="http;//www.baidu.com">JS DOM</a></h2>
<p>对HTML元素进行操作，能够添加、改变或者移除CSS样式等</p>
<ul>
<li>hello</li>
<li>world</li>
<ul>
</body>
</html>
以下是将上述代码分解为DOM节点层次图
DOM节点层次图
自我体会：如果我们平时有好的代码风格，这个DOM节点层次将非常好画，我们可以直接根据代码的行缩进进行分解。但是，我可能会将<h2>内的<a>落掉，此处须注意。
3.节点分解
HTML文档可以当成由节点构成的集合，三种常见的DOM节点：
-
元素节点：
<html>、<body>、<p> -
文本节点：向用户展示的内容，如
<li>...</li>中的JavaScript、DOM、CSS等文本 -
属性节点：元素属性，如
<a>标签的链接属性href="http://www.baidu.com"
我们可以尝试将如下代码分解并标记
<a href="http://www.baidu.com">Javascript DOM</a>
节点分类
4.通过ID获取元素
背景知识：网页是由标签将信息组织起来的，标签的id属性是唯一的，因此我们可以通过id来定位一个标签，然后对其进行操作
语法：document.getElementById("id");
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>document.getElementById</title>
</head>
<body>
<p id="con">我是段落里的内容</p>
<script type="text/javascript">
var mychar= document.getElementById("con"); //获取元素存储在变量mychar中。
document.write("结果:"+mychar); //输出获取的P标签。
</script>
</body>
</html>
运行结果：
运行结果
分析：
这里涉及到mychar中保存的内容的类型，mychar获取的元素是一个对象，
而 document.write(str)括号内的应为字符串，
对象到字符串的转化，
有的浏览器能够转换，则会输出上边的运行结果；
有的浏览器不能转化，则会输出null
注意：
获取的元素是一个对象，若想对元素进行操作，要通过其属性或方法
