6. JavaScript HTML DOM

HTML DOM （文档对象模型）

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。

HTML DOM 模型被构造为对象的树。

查找 HTML 元素

通常，通过 JavaScript，您需要操作 HTML 元素。

为了做到这件事情，您必须首先找到该元素。有三种方法来做这件事：

    通过 id 找到 HTML 元素通过标签名找到 HTML 元素通过类名找到 HTML 元素

通过 id 查找 HTML 元素

在 DOM 中查找 HTML 元素的最简单的方法，是通过使用元素的 id。
实例

本例查找 id=”intro” 元素：

var x=document.getElementById(“intro”);

通过标签名查找 HTML 元素
实例

本例查找 id=”main” 的元素，然后查找 “main” 中的所有 < p> 元素：

var x=document.getElementById("main");
var y=x.getElementsByTagName("p");

改变 HTML

改变 HTML 输出流JavaScript 能够创建动态的 HTML 内容：今天的日期是： Fri Jul 17 2015 11:40:21 GMT+0800在 JavaScript 中，document.write() 可用于直接向 HTML 输出流写内容。

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

改变 HTML 属性如需改变 HTML 元素的属性，请使用这个语法：document.getElementById(id).attribute=new value

6. JavaScript HTML DOM相关推荐

深入理解JavaScript系列（23）：JavaScript与DOM（上）——也适用于新手
文档对象模型Document Object Model DOM(Document Object Model,文档对象模型)是一个通过和JavaScript进行内容交互的API. Javascript和 ...
JavaScript学习笔记(2)——JavaScript和DOM的关系
文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标志语言的标准编程接口.DOM实际上是以面向对象方式描述的文档模型.DOM定义了表示和修改文档所需的 ...
Javascript中DOM技术的的简单学习
第十四课 DOM技术概述 1:DOM概述文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法.DOM 将HTML文档呈现为带有元素.属性和文本的树结构 ...
Javascript操作DOM常用API总结
文本整理了javascript操作DOM的一些常用的api,根据其作用整理成为创建,修改,查询等多种类型的api,主要用于复习基础知识,加深对原生js的认识. 基本概念在讲解操作DOM的api之前, ...
JavaScript操作DOM对象
目录一.DOM操作 (一).DOM操作分类 (二).节点和节点的关系 (三).访问节点 (四).节点信息二.操作节点 (一)操作节点的属性 (二).创建和插入节点 (三).删除和替换节点 (四). ...
【repost】Javascript操作DOM常用API总结
Javascript操作DOM常用API总结文本整理了javascript操作DOM的一些常用的api,根据其作用整理成为创建,修改,查询等多种类型的api,主要用于复习基础知识,加深对原生js的认 ...
【前端】第二章 HTML、CSS、JavaScript、DOM和JSON
第二章 HTML.CSS.JavaScript.DOM和JSON 文章目录第二章 HTML.CSS.JavaScript.DOM和JSON 一.HTML 1.表单 2.小票 3.注册页面 4.音视频 ...
JavaScript中DOM操作
Web前端基础修炼 HTML基本标签详解与运行截图 CSS基本操作详解及截图演示 JavaScript基础(ECMAScript) JavaScript中DOM操作 JavaScript中BOM操作 ...
JavaScript 之 DOM中的三大对象
下面是对JavaScript DOM中三大对象的整理,希望可以帮助到有需要的小伙伴. JavaScript 之 DOM中的三大对象一.Document对象 1.Document对象是什么 Docum ...
JavaScript HTML DOM 元素（节点）
JavaScript HTML DOM 元素(节点) 添加和删除节点(HTML 元素) <div id="div1"> <p id="p1"& ...

6. JavaScript HTML DOM

6. JavaScript HTML DOM相关推荐

最新文章

热门文章