JavaScript初学者学习笔记（3）

今天主要学习的内容是DOM（文档对象模型）文档对象模型.DOM定义了访问和处理的HTML文档的标准方法.DOM将HTML文档呈现为带元素，属性和文本的树结构（节点树）.HTML文档可以说是由节点构成的集合，三种常见的DOM节点：

1，元素节点：上图中<HTML>，<body>，<P>等都是元素节点，即标签

2，文本节点：向用户展示的内容，如<LI> </ LI>中的JavaScript的，DOM，CSS等文本

3，属性节点：元素属性，如<A>标签的链接属性HREF =“www.google.com”

通过ID获取元素

在HTML中，网页是由标签将信息组织起来，而标签的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“> JavaScript </ p> 
<script type =”text / javascript“> 
  var mychar = document.getElementById（“con”）; 
  文件撰写（“结果：”+ mychar）; //输出获取的P标签。
</ SCRIPT> 
</ BODY> 
</ HTML>

我们最后返回的结果是[object HTMLParagraphElement]，即HTML中的<p>标签。

innnerHTML属性

innerHTML的的属性用于获取或替换HTML元素的内容语法如下：

Object.innerHTML

注意：

如图1所示，对象是获取的元素对象，如通过的的document.getElementById（“ID”）获取的元素。

2，注意书写，innerHTML的的区分大小写。

下面举一个例子进行说明：

<！DOCTYPE HTML> 
<HTML> 
<HEAD> 
<meta http-equiv =“Content-Type”content =“text / html; charset = utf-8“/> 
<TITLE>的innerHTML </ TITLE> 
</ HEAD> 
<BODY> 
<h2 id =”con“> JavaScript </ H2> 
JavaScript是一种基于对象，事件驱动的简单的脚本语言，嵌入在HTML文档中，由浏览器负责解释和执行，在网页上产生动态的显示效果并实现与用户交互功能。</ p> 
<script type =“text / javascript”> 
  var mychar = document。 getElementById（“con”）; 
  文件撰写（“原标题：”+ mychar.innerHTML +“点击”）; //输出原H2标签内容
  mychar.innerHTML =“Hello world！”; 
  文件撰写（“修改后的标题：”+ mychar.innerHTML）; //输出修改后H2标签内容
</ SCRIPT> 
</ BODY> 
</ HTML>

运行结果如下：

你好，世界！
的的JavaScript是一种基于对象，事件驱动的简单脚本语言，嵌入在HTML文档中，由浏览器负责解释和执行，在网页上产生动态的显示效果并实现与用户交互功能。

原标题：JavaScript的
修改后的标题：Hello world！

因此，我们可以看出，网页上最终显示的是修改之后的标题，而原来的标题将不再出现。

改变HTML样式

HTML DOM允许JavaScript改变HTML元素的样式，使用的语法如下：

Object.style.property =新风格;

对象是获取的元素对象，如通过的的document.getElementById（“ID”）获得的元素。

基本属性表：

该表中显示的只是一小部分CSS样式属性，其他样式也可以通过该方法设置和修改。

显示和隐藏（显示属性）

。网页中经常看到显示和隐藏的效果，使用显示属性来实现显示语法如下：

Object.style.display = value

同上，对象获取的是元素对象。

值的取值有两种，第一种为无，即隐藏该元素;第二种为块，会将此元素在网页中显示出来。

下面是一段演示代码：

<！DOCTYPE HTML>
<HTML>
<HEAD>
<meta http-equiv =“Content-Type”content =“text / html; charset = gb2312”>
<TITLE>显示</ TITLE>
    <script type =“text / javascript”> 
        函数hidetext（）  
		{  
		var mychar = document.getElementById（“con”）;
        mychar.style.display = “无”;
		}  
		函数showtext（）  
		{  
		var mychar = document.getElementById（“con”）;
        mychar.style.display = “块”;
		}
    </ SCRIPT> 
</ HEAD> 
<BODY>  
    <H1>的JavaScript </ H1>  
    <p id =“con”>做为一个Web开发师来说，如果你想提供漂亮的网页，令用户满意的上网体验，JavaScript是必不可少的工具。</ p> 
    <FORM>
       <input type =“button”onclick =“hidetext（）”value =“隐藏内容”/> 
       <input type =“button”onclick =“showtext（）”value =“显示内容”/> 
    </ FORM> 
</ BODY> 
</ HTML>

运行结果页面上将会有两个按钮，一个是显示内容，一个是隐藏内容。当然原本的信息默认是显示的。当我们点击隐藏信息的按钮时，原本的文本信息将会隐藏消失。

控制类名（类名属性）

的类名属性设置或返回元素的类属性，语法如下：

object.className = classname

其作用是获取元素的类属性，或是为网页内某个属性指定一个CSS样式来更改该元素的外观。

看看下面代码，获得<P>元素的类属性和改变的className：

结果：