JavaScript入门（三）

来源：互联网发布：linux怎么进入编辑编辑：程序博客网时间：2024/06/10 07:44

DOM

文档对象模型DOM（Document Object Model）定义访问和处理HTML文档的标准方法。DOM 将HTML文档呈现为带有元素、属性和文本的树结构（节点树）。
如下代码：

将HTML代码分解为DOM节点层次图:

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

元素节点：上图中<html>、<body>、<p>等都是元素节点，即标签。
文本节点：向用户展示的内容，如<li>…</li>中的JavaScript、DOM、CSS等文本。
属性节点：元素属性，如<a>标签的链接属性href=”http://www.imooc.com”。

（1）通过ID获取元素

学过HTML/CSS样式，都知道，网页由标签将信息组织起来，而标签的id属性值是唯一的，就像是每人有一个身份证号一样，只要通过身份证号就可以找到相对应的人。那么在网页中，我们通过id先找到标签，然后进行操作。语法为：

document.getElementById("id");

该函数获取的是一个对象。innerHTML 属性用于获取或替换 HTML 元素的内容，如object是使用document.getElementById()获取的对象，则object.innerHTML即为该object地内容。

（2）改变HTML样式

HTML DOM 允许使用 JavaScript 改变 HTML 元素的样式。语法为：

object.style.property=new style;

其中object是获取的元素对象，属性有很多，CSS的样式属性都可以通过该方法设置和修改。下图是属性的一部分：

<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>改变HTML样式</title></head><body>  <h2 id="con">I love JavaScript</h2> <script type="text/javascript">    var mychar= document.getElementById("con");    mychar.style.color= "red";    mychar.style.backgroundColor= "#CCC";    mychar.style.width= "300px";//注意""不能缺少  </script></body></html>

（3）显示和隐藏

网页中经常会看到显示和隐藏的效果，可通过display属性来设置。语法为：

object.style.display = value;

当value=”none”时，元素将被隐藏；
当value=”block”时，元素将显示出来；

<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset = UTF-8"><title>display</title>    <script type="text/javascript">         function hidetext()          {          var mychar = document.getElementById("con");        mychar.style.display= "none";        }          function showtext()          {              var mychar = document.getElementById("con");            mychar.style.display= "block";        }    </script> </head> <body>      <h1>JavaScript</h1>      <p id="con">JavaScript是必不可少的工具。</p>     <form>       <input type="button" onclick="hidetext()" value="隐藏内容" />        <input type="button" onclick="showtext()" value="显示内容" />     </form></body> </html>

（4）控制类名

className 属性设置或返回元素的class 属性。语法为：

object.className = classname;

阅读全文

0 0