`

HTML5学习准备——HTML DOM

阅读更多

 

HTML DOM学习

The HTML DOM defines the objects and properties of all HTML elements, and the methods (interface) to access them.

HTML DOM定义了所有HTML元素的对象和内容以及可以操作他们的方法(接口)

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

HTML DOM是一种关于获得,改变,增加,删除HTML元素的标准

 

HTML中的所有东西都是节点node

The entire document is a document node 整个文档是一个document node

Every HTML element is an element node 每个HTML元素是一个element node

The text in the HTML elements are text nodes 每个文本是一个text node

Every HTML attribute is an attribute node 每个HTML属性是一个attribute node

Comments are comment nodes 每个注释是comment nodes

 

DOM树形结构 根 父 子 兄弟 概念

 

DOM的一些properties

x.innerHTML - the text value of x x节点的文本值

x.nodeName - the name of x x节点的名称

x.nodeValue - the value of x x节点的值

x.parentNode - the parent node of x x节点的父节点

x.childNodes - the child nodes of x x节点的子节点

x.attributes - the attributes nodes of x x节点的属性


DOM的一些methods

x.getElementById(id) - get the element with a specified id 获得特定id的元素

x.getElementsByTagName(name) - get all elements with a specified tag name 获得特定name的所有元素

x.appendChild(node) - insert a child node to x 为x节点增加一个节点

x.removeChild(node) - remove a child node from x 从x节点移除一个节点

 

例子:

<p id="intro">Hello World!</p>

txt=document.getElementById("intro").innerHTML;

txt为Hello World!

同样的

txt=document.getElementById("intro").childNodes[0].nodeValue;

txt也是Hello World!

再者

x=document.getElementsByTagName("p");

x[0].innerHTML为Hello World!

 

Node Properties 节点的重要内容

nodeName 只读

nodeValue 对element节点为undefined

nodeType 只读 Element 1 Attribute 2 Text 3 Comment 8 Document 9

 

关于DOM的操作可以配合在js中使用,配合各种event或其他等

依旧来自:http://www.w3schools.com HTML DOM教程的整理

分享到:
评论

相关推荐

    HTML5学习例子——贪吃蛇

    总结来说,"HTML5学习例子——贪吃蛇"这个资源是一个很好的实践平台,可以帮助我们学习HTML5的Canvas绘图、JavaScript事件处理、DOM操作以及可能的数据存储技术。通过分析和运行源代码,我们可以加深对HTML5新特性的...

    头歌教学实践平台 Web前端开发基础 JavaScript学习手册十四:HTML DOM-文档元素的操作(二)

    这篇教程——"JavaScript学习手册十四:HTML DOM-文档元素的操作(二)"深入探讨了如何使用JavaScript来操纵HTML文档中的元素,进一步提升网页动态性和交互性。 DOM是HTML和XML文档的一种结构化表示,它将网页内容...

    狂神Java学习笔记————前端入门——html、css、JavaScript学习代码

    【狂神Java学习笔记——前端入门——HTML、CSS、JavaScript学习代码】是针对初学者的一份详实的学习资料,这份笔记记录了跟随B站知名up主“遇见狂神说”的java系列视频中关于前端开发的基础内容。笔记内容不仅与视频...

    JavaScript程序设计——DOM访问实验报告.docx

    实验报告的主题是“JavaScript程序设计——DOM访问”,其目的是深入理解和掌握DOM(Document Object Model)在JavaScript中的应用,包括文档对象的属性、方法以及使用方式。DOM是HTML和XML文档的标准化表示,允许...

    前端学习(六)——javascript学习笔记(四)HTML DOM.xmind

    前端学习(六)——javascript学习笔记(四)HTML DOM.xmind

    java解析xml——dom

    ### Java解析XML——DOM详解 #### 一、DOM解析概念 **Document Object Model (DOM)**是一种平台和语言中立的接口,它允许程序和脚本动态地访问和更新文档的内容、结构和样式。DOM最初是为HTML设计的,但后来也被...

    基于HTML旅游酒店主题网页项目的设计与实现——度假酒店预订网站(5页面)HTML+CSS+JavaScript

    该项目名为“基于HTML旅游酒店主题网页项目的设计与实现——度假酒店预订网站”,旨在通过HTML5、CSS以及JavaScript技术构建一个旅游酒店预订网站,以满足大学生网页设计课程作业的需求。该网站涵盖了多种场景,包括...

    HTML5经典游戏——曲线谜团

    HTML5是一种先进的网页标准,它极大地扩展了网页的交互性和动态性,使得开发者...通过研究这个游戏的源代码,开发者可以学习到如何利用这些技术来创建自己的HTML5游戏,同时也能了解到如何优化游戏性能和提升用户体验。

    C#——insertDOM

    在给定的“C#——insertDOM”项目中,我们聚焦于一个特定的功能:如何利用C#操作DOM(Document Object Model)来插入TIFF影像图,并计算其坐标和分辨率。下面将详细解释这一过程中的关键知识点。 首先,TIFF...

    前端开源库-htmldom

    《前端开源库——htmldom:Node.js中的HTML处理利器》 在当今互联网技术日新月异的时代,前端开发人员面临着各种挑战,其中一项便是如何有效地处理和操作HTML文档。在此背景下,`htmldom`应运而生,它是一个专门为...

    HTML5期末大作业:网站——个人博客

    这个“HTML5期末大作业:网站——个人博客”项目显然旨在让学生掌握并实践HTML5的相关知识,通过创建一个完整的个人博客网站来提升技能。在这个项目中,我们可以探讨以下几个关键知识点: 1. **HTML5结构元素**:...

    JavaScript_——DOM总结.txt

    #### 五、BOM 的核心对象 —— window `window` 对象是 BOM 中最重要的对象,它是所有其他 BOM 对象的父对象。`window` 对象表示当前浏览器窗口,并且提供了许多有用的属性和方法。 - **基本属性**: - `window....

    JavaScript——DOM

    JavaScript——DOM DOM,全称为“Document Object Model”,即文档对象模型,是W3C组织定义的一种标准,用于表示HTML或XML文档的结构,并提供了一种程序化访问和操作文档内容的方法。DOM允许开发者通过JavaScript或...

    javascript DOM Html 对象参考手册

    javascript DOM Html 对象对象参考手册

    HTML DOM简介.rar

    目录如下: 1. DOM可以做什么?...5. 访问DOM节点3——通过节点关系 6. DOM节点信息 7. DOM信息nodeType的应用 8. 修改DOM——innerHTML 9. 删除DOM节点——removeChild 10. 添加DOM节点 11. DOM简介总结

    什么是——HTML5

    HTML5是互联网技术的重要里程碑,它是对HTML4.01和XHTML1.0的显著升级,旨在提供更丰富的用户体验,同时减少对第三方浏览器插件的依赖,特别是像Flash、Silverlight和JavaFX这样的插件。HTML5的核心目标是增强网页的...

    web学习笔记 —— javascript基础

    这篇“web学习笔记——javascript基础”将带你走进JavaScript的世界,理解其基本概念和常用语法。 JavaScript语法基础: 1. 变量:在JavaScript中,变量用于存储数据。声明变量使用`var`关键字,例如`var myVar = ...

    基于HTML5的小游戏——《斗斗龙》.zip

    《基于HTML5的小游戏——《斗斗龙》》是一款利用HTML5技术开发的多媒体游戏,它展示了HTML5在游戏开发领域的强大潜力。HTML5作为现代网页开发的标准,以其跨平台兼容性和丰富的功能特性,逐渐成为开发轻量级游戏的...

    基于HTML电商购物项目的设计与实现——html+css+javascript+jquery+bootstarp响应式图书商城

    ### 基于HTML电商购物项目的设计与实现——html+css+javascript+jquery+bootstrap响应式图书商城 #### 一、项目概述 本项目旨在通过HTML、CSS、JavaScript、jQuery以及Bootstrap等技术来构建一个完整的响应式电子...

Global site tag (gtag.js) - Google Analytics