THE WORLD'S LARGEST WEB DEVELOPER SITE

JS教程

JS主页 JS简介 JS在哪里 JS输出 JS语句 JS语法 JS评论 JS变量 JS Let JS Const JS运算符 JS算术 JS分配 JS数据类型 JS函数 JS对象 JS活动 JS字符串 JS字符串方法 JS号 JS编号方法 JS数组 JS数组方法 JS数组排序 JS数组迭代 JS日期 JS日期格式 JS日期获取方法 JS日期设置方法 JS数学 JS 随机 JS布尔值 JS比较 JS条件 JS开关 JS循环 JS循环 In JS循环 Of JS循环播放 JS Break JS类型转换 JS运算 JS正则 JS错误 JS范围 JS吊装 JS严格模式 JS此关键字 JS箭头功能 JS类 JS JSON JS调试 JS样式指南 JS最佳做法 JS错误 JS性能 JS保留字

JS版本

JS版本 JS 2009 (ES5) JS 2015 (ES6) JS 2016 JS 2017 JS 2018 JS历史记录

JS表单

JS表单 Forms API

JS对象

对象定义 对象属性 对象方法 对象显示 对象访问器 对象构造器 对象原型 对象ECMAScript 5

JS函数

功能定义 功能参数 函数调用 函数调用 应用功能 功能闭包

JS类

Class Intro Class Inheritance Class Static

JS Async

JS Callbacks JS Asynchronous JS Promises JS Async/Await

JS HTML DOM

DOM简介 DOM方法 DOM文档 DOM元素 DOM HTML DOM CSS DOM动画 DOM事件 DOM事件监听器 DOM导航 DOM节点 DOM集合 DOM节点列表

JS浏览器BOM

JS窗口 JS屏幕 JS位置 JS历史记录 JS导航器 JS弹出警报 JS计时 JS Cookies

JS AJAX

AJAX简介 AJAX XMLHttp AJAX请求 AJAX响应 AJAX XML文件 AJAX PHP AJAX ASP AJAX数据库 AJAX应用程序 AJAX 示例

JS JSON

JSON简介 JSON语法 JSON与XML JSON数据类型 JSON解析 JSON Stringify JSON对象 JSON数组 JSON PHP JSON HTML JSON JSONP

JS Web APIs

Web API Intro Web History API Web Storage API Web Worker API Web Fetch API Web Geolocation API

JS vs jQuery

jQuery选择器 jQuery HTML jQuery CSS jQuery DOM

JS 示例

JS 示例 JS HTML DOM JS HTML输入 JS HTML对象 JS HTML事件 JS浏览器 JS编辑器 JS 练习 JS测验 JS证书

JS 参考

JavaScript对象 HTML DOM对象


JavaScript HTML DOM


With the HTML DOM, JavaScript can access and change all the elements of an HTML document.


The HTML DOM (Document Object Model)

When a web page is loaded, the browser creates a Document Object Model of the page.

The HTML DOM model is constructed as a tree of Objects:

The HTML DOM Tree of Objects

DOM HTML  tree

With the object model, JavaScript gets all the power it needs to create dynamic HTML:

  • JavaScript can change all the HTML elements in the page
  • JavaScript can change all the HTML attributes in the page
  • JavaScript can change all the CSS styles in the page
  • JavaScript can remove existing HTML elements and attributes
  • JavaScript can add new HTML elements and attributes
  • JavaScript can react to all existing HTML events in the page
  • JavaScript can create new HTML events in the page

What You Will Learn

In the next chapters of this tutorial you will learn:

  • How to change the content of HTML elements
  • How to change the style (CSS) of HTML elements
  • How to react to HTML DOM events
  • How to add and delete HTML elements

What is the DOM?

The DOM is a W3C (World Wide Web Consortium) standard.

The DOM defines a standard for accessing documents:

"The W3C Document Object Model (DOM) is a platform and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document."

The W3C DOM standard is separated into 3 different parts:

  • Core DOM - standard model for all document types
  • XML DOM - standard model for XML documents
  • HTML DOM - standard model for HTML documents

What is the HTML DOM?

The HTML DOM is a standard object model and programming interface for HTML. It defines:

  • The HTML elements as objects
  • The properties of all HTML elements
  • The methods to access all HTML elements
  • The events for all HTML elements

In other words: The HTML DOM is a standard for how to get, change, add, or delete HTML elements.





W3Schools is optimized for learning and training. 示例 might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Copyright 1999-2021 by Refsnes Data. All Rights Reserved.
W3Schools is Powered by W3.CSS.

W3Schools.com