JavaScript DOM编程(1)修改html css

通过 HTML DOM，可访问 JavaScript HTML 文档的所有元素。

HTML DOM (文档对象模型)
当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。
简单来说就是用js来写一些html代码。通过各种方式获取html代码，然后创建新的html标签，还能更改样式等等

通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。

1. JavaScript能够改变页面中的所有 HTML 元素
2. JavaScript能够改变页面中的所有 HTML 属性
3. JavaScript 能够改变页面中的所有 CSS 样式
4. JavaScript 能够对页面中的所有事件做出反应

查找 HTML 元素

通常，通过 JavaScript，您需要操作 HTML 元素。
为了做到这件事情，您必须首先找到该元素。有三种方法来做这件事：

1. 通过id 查找 HTML 元素
   在 DOM 中查找 HTML 元素的最简单的方法，是通过使用元素的 id。
   本例查找 id="intro" 元素：
   var x=document.getElementById("intro");
2. 通过标签名找到 HTML 元素
   通过标签名查找 HTML 元素
   本例查找 id="main" 的元素，然后查找 id="main" 元素中的所有

   元素：
   实例:
   var x=document.getElementById("main");
   var y=x.getElementsByTagName("p");

3. 通过类名找到 HTML 元素
   通过类名找到 HTML 元素
   本例通过 [getElementsByClassName]函数来查找 class="intro" 的元素：
   实例
   var x=document.getElementsByClassName("intro");

改变 HTML

1. 修改 HTML 内容的最简单的方法时使用 innerHTML 属性。
   如需改变 HTML 元素的内容，请使用这个语法：
   document.getElementById(id).innerHTML=新的 HTML;
   完美例子：
   

   Hello World!

   
   

2. 本例改变了

   元素的内容：
   实例
   
   
   
   

   Old Header

   
   
   
   
   注释:innerHTML标签相当于往html里添加新的字符串，字符串也可以是HTML.

3. 上面的 HTML 文档含有 id="header" 的

   元素

4. 我们使用 HTML DOM 来获得 id="header" 的元素

5. JavaScript 更改此元素的内容 (innerHTML)

6. 改变 HTML 属性
   如需改变 HTML 元素的属性，请使用这个语法：
   document.getElementById('id').attribute=新属性值;
   栗子：
   
   
   
   
   
   实例讲解：

• 上面的 HTML 文档含有 id="image" 的 元素
• 我们使用 HTML DOM 来获得 id="image" 的元素
• JavaScript 更改此元素的属性（把 "smiley.gif" 改为 "landscape.jpg"）

改变CSS

HTML DOM 允许 JavaScript 改变 HTML 元素的样式。

1. 如需改变 HTML 元素的样式，请使用这个语法：
   document.getElementById('id').style.property=新样式;
   下面的例子会改变

   元素的样式：

   
   Hello World!
   
   以上段落通过脚本修改。
   
   

2. 使用事件
   HTML DOM 允许我们通过触发事件来执行代码。
   比如以下事件：

• 元素被点击。
• 页面加载完成。
• 输入框被修改。
  ……
  本例改变了 id="id1" 的 HTML 元素的样式，当用户点击按钮时：
  实例
  
  
  

  我的标题 1

  
  点我!
  
  css属性visibility与display区别
  visibility属性隐藏扔占据位置
  display不占据位置
  实例
  
  
  

  我的标题 1