每天一点JavaScript-03

1.DOM（Document Object Model）

定义访问和处理HTML文档的标准方法

2.DOM将html文档呈现为带有元素、属性和文本的树结构（节点树）

  
    
    
  

  
    
JS DOM
    
对HTML元素进行操作，能够添加、改变或者移除CSS样式等
    

      
hello
      
world
    

  

以下是将上述代码分解为DOM节点层次图

DOM节点层次图

自我体会：如果我们平时有好的代码风格，这个DOM节点层次将非常好画，我们可以直接根据代码的行缩进进行分解。但是，我可能会将

内的落掉，此处须注意。

3.节点分解

HTML文档可以当成由节点构成的集合，三种常见的DOM节点：

• 元素节点：、、

• 文本节点：向用户展示的内容，如
• ...
中的JavaScript、DOM、CSS等文本
• 属性节点：元素属性，如标签的链接属性href="http://www.baidu.com"

我们可以尝试将如下代码分解并标记

Javascript DOM

节点分类

4.通过ID获取元素

背景知识：网页是由标签将信息组织起来的，标签的id属性是唯一的，因此我们可以通过id来定位一个标签，然后对其进行操作

语法：document.getElementById("id");

  
    
    
  

  
    
我是段落里的内容
    
  

运行结果：

运行结果

分析：
这里涉及到mychar中保存的内容的类型，mychar获取的元素是一个对象，
而 document.write(str)括号内的应为字符串，
对象到字符串的转化，
有的浏览器能够转换，则会输出上边的运行结果；
有的浏览器不能转化，则会输出null

注意：
获取的元素是一个对象，若想对元素进行操作，要通过其属性或方法