Javascript:Dom简介(查找/修改HTML元素的内容及属性)

当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model)。HTML DOM 模型被构造为对象的树。

通过可编程的对象模型,JavaScript 获得了足够的能力来创建动态的 HTML。例如:改变HTML元素,改变HTML属性,改变CSS样式,事件响应。

代码整理自w3school:http://www.w3school.com.cn

效果图:

代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="zh-cn" />

<title>Javascript HTML DOM</title>

<head>
  <style type="text/css">
    body {background-color:#eeeeee}
  </style>
</head>

<body>
  <h3>(一)通过 id 查找 HTML 元素</h3>
  <p id = "hw">Hello world!</p>
  <script>
    x = document.getElementById("hw");
    document.write('<p>id="hw"的段落的文本是:'+x.innerHTML+'</p>');
  </script>

  <button onclick = "setCurrentTime()">将id="hw"的文字改为当前时间</button>
  <script>
    function setCurrentTime(){
      x = document.getElementById("hw");
      x.innerHTML = Date()
    }

  </script>

  <h3>(二)通过 标签名 查找 HTML 元素</h3>
  <div id = "mainDiv">
    <p>This is a paragragph.</p>
    <p>This is another paragragph.</p>
    <p>Yes you're right! This is also paragragph.</p>
  </div>

  <script>
    xx = document.getElementById("mainDiv");
    tagContents = xx.getElementsByTagName("p");
    document.write("<p>使用Javascript查找id为mainDiv下的p标签的内容</p>");
    for(i=0;;i++){
      var tag = tagContents[i]
      if(tag!=null){
        document.write("<p>"+tag.innerHTML+"</p>")
      }else{
        document.write("<p>共有"+i+"条内容</p>")
        break;
      }
    }
  </script>

  <h3>(三)修改 HTML 的属性</h3>
  <img id = "bol" src = "images/eg_bulboff.gif" width="70px" height="120px"/>
  <p><button onclick = "changeSrc()">改变图片资源</button></p>
  <script>
    function changeSrc(){
      x = document.getElementById("bol");
      if (x.src.match("eg_bulboff.gif")){
        x.src = "images/eg_bulbon.gif"
      }else{
        x.src = "images/eg_bulboff.gif"
      }
    }

  </script>

  <h3>(四)修改 CSS 样式</h3>
  <p>
    <span id = "para_1">This is a test paragraph.</span>
    <button onclick="changeTextColor()">改变文字颜色</button>
  </p>
  <p>
    <span id = "para_2">This is another paragraph.
    <button onclick="changeTextFont()">改变字体</button>
  </p>
  <p>
    <span id = "para_3">This is HELLO WORLD.</span>
    <button onclick="changeTextSize()">改变字号</button>
  </p>
  <p>
    <button onclick="changeVisibility()">显示/隐藏</button>
    <span id = "para_4">示例文字</span>
  </p>

  <script>
    function changeTextColor(){
      ele_1 = document.getElementById("para_1");
      ele_1.style.color = "red";
    }

    function changeTextFont(){
      ele_2 = document.getElementById("para_2");
      ele_2.style.fontFamily = "Arial";
    }

    function changeTextSize(){
      ele_3 = document.getElementById("para_3");
      ele_3.style.fontSize = "larger";
    }

    document.getElementById("para_4").style.visibility = "visible"
    function changeVisibility(){
      ele_4 = document.getElementById("para_4");
      if(ele_4.style.visibility.match("visible")){
        ele_4.style.visibility = "hidden"
      }else{
        ele_4.style.visibility = "visible"
      }
    }
  </script>

</body>

</html>
时间: 2024-09-28 23:08:12

Javascript:Dom简介(查找/修改HTML元素的内容及属性)的相关文章

JavaScript之DOM-2 读取和修改节点信息(节点信息、元素的内容、属性)

一.节点信息 节点名称 nodeName - nodeName: 节点的名称,String 类型属性 - nodeName 是只读的 节点类型 nodeType - nodeType:节点类型,Number 类型属性 节点值 nodeValue - nodeValue:节点的值,String类型属性 二.元素的内容 HTML 内容 - 元素节点对象的innerHTML属性读取或设置元素节点中的HTML内容 文本内容 - 元素节点对象的textContent属性用于读取或设置元素节点中的文本内容-

JavaScript DOM编程 学习笔记-获取元素节点

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript"> window.onload = function() { //在编写html文档时需要确定id属性值是唯一的 //该方法为doc

JavaScript添加、查找、删除元素的一个实例

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>测试文件</title> <style> .reply { width: 500px; height: 100%; overflow: hidden; background-color:#CCC; margin-top: 10px; } .infoArea { width: 380px

2016/4/1 jquery 与javascript关系 ①取元素 ②操作内容 ③操作属性 ④操作 样式

jQuery的min版本和原版功能是一样的,min版主要应用于已经开发成的网页中,而非min版 的文件比较大,里面有整洁的代码书写规范和注释,主要应用于脚本开发过程当中. JQuery是继prototype之后又一个优秀的Javascript库.它是轻量级的js库 ,它兼容CSS3 ,还兼容各种浏览器(IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+),jQuery2.0及后 续版本将不再支持IE6/7/8浏览器.jQuery能够使用户的html页面保持代码和h

JavaScript DOM实战:创建和克隆元素

DOM来创建和克隆元素. createElement()和createTextNode() createElement()和createTextNode()做的事情正如它们的名字所说的那样.最常见的JavaScript DOM方法实战-修改文档树中已经用过它们.当时的目的是把新创建的元素添加到文档树里,使它成为某个元素的最后一个子节点. 1. //创建一个li新元素 2. var newChild=document.createElement('li'); 3. //创建一个a 新元素 4. v

前端学习系列之JavaScript DOM

JavaScript DOM简介 介绍 文件对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标志语言的标准编程接口.DOM编程: DOM 是关于如何获取.修改.添加或删除 HTML 元素的标准 HTML DOM节点树 通过 HTML DOM,树中的所有节点均可通过 JavaScript 进行访问.所有 HTML 元素(节点)均可被修改,也可以创建或删除节点 理解几个概念,html标签没有父辈,没有兄弟,所以html标签为根标签.head标签是htm

HTML,javaScript,DOM详解

HTML DOM 教程 DOM 教程 DOM 简介 HTML DOM 定义了访问和操作 HTML 文档的标准方法. DOM 将 HTML 文档表达为树结构. HTML DOM 树 HTML DOM 简介 HTML DOM 定义了访问和操作 HTML 文档的标准. 您应该具备的基础知识 在您继续学习之前,您需要对以下内容拥有基本的了解: HTML CSS JavaScript 什么是 DOM? DOM 是 W3C(万维网联盟)的标准. DOM 定义了访问 HTML 和 XML 文档的标准: “W3

Dom 简介

HTML DOM 简介 DOM 教程 DOM 节点 HTML DOM 定义了访问和操作 HTML 文档的标准. 您应该具备的基础知识 在您继续学习之前,您需要对以下内容拥有基本的了解: HTML CSS JavaScript 什么是 DOM? DOM 是 W3C(万维网联盟)的标准. DOM 定义了访问 HTML 和 XML 文档的标准: "W3C 文档对象模型 (DOM) 是中立于平台和语言的接口,它允许程序和脚本动态地访问和更新文档的内容.结构和样式." W3C DOM 标准被分为

JavaScript DOM进阶方法

一 DOM类型 类型名                        说明Node                 表示所有类型值的统一接口,IE不支持;Document             表示文档类型;Element              表示元素节点类型;Text                 表示文本节点类型;Comment              表示文档中的注释类型;CDATASection         表示CDATA区域类型;DocumentType