每天一点JavaScript-03

作者: 启LS | 来源:发表于2016-06-24 17:13 被阅读64次

每天一点JavaScript-03
JavaScript-03
javaScript-03
每天学习一点，每天改变一点
每天反思一点，每天进步一点
每天走一点，每天写一点
每天学习一点，每天进步一点
每天十一点
心得：每天写一点，每天进步一点
啥时候能画完~

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>

运行结果：