`
java虫
  • 浏览: 532676 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

HTML DOM基础知识

阅读更多
一.什么是DOM
HTML文档对象模型(HTML Document Object Model)定义了访问和处理HTML文档的标准方法。HTML DOM 把HTML文档呈现为带有元素、属性和文本的树结构(节点树)。

在1998年,W3C发布了第一级的DOM规范。这个规范允许访问和操作HTML页面中的每一个单独的元素。所有的浏览器都执行了这个标准,因此,DOM的兼容性问题也几乎难觅踪影了。

DOM可被JavaScript用来读取、改变HTML、XHTML以及XML文档。被分为不同的部分(核心、XML及HTML)和级别(DOM Level 1/2/3):

Core DOM
定义了一套标准的针对任何结构化文档的对象

XML DOM
定义了一套标准的针对XML文档的对象

HTML DOM
定义了一套标准的针对HTML文档的对象。

二.文档树(节点树)
如下HTML文档:
<html>
  <head>
    <title>DOM Tutorial</title> 
  </head> 
  <body> 
    <h1>DOM Lesson one</h1> 
    <p>Hello world!</p> 
  </body> 
</html>


1)除文档节点之外的每个节点都有父节点。

2)大部分元素节点都有子节点。

3)当节点分享同一个父节点时,它们就是同辈(同级节点)

4)节点也可以拥有后代,后代指某个节点的所有子节点,或者这些子节点的子节点

5)节点也可以拥有先辈。先辈是某个节点的父节点,或者父节点的父节点

三.节点信息
每个节点都拥有包含着关于节点某些信息的属性。这些属性是:
nodeName(节点名称) ,nodeValue(节点值), nodeType(节点类型)

1.nodeName
nodeName属性含有某个节点的名称。
元素节点的nodeName是标签名称
属性节点的nodeName是属性名称
文本节点的nodeName永远是#text
文档节点的nodeName永远是#document
注释:nodeName所包含的XML元素的标签名称永远是大写的

2.nodeValue
对于文本节点,nodeValue属性包含文本。
对于属性节点,nodeValue属性包含属性值。
nodeValue属性对于文档节点和元素节点是不可用的。

3.nodeType
nodeType属性可返回节点的类型。

最重要的节点类型是:
元素类型 节点类型
元素 1
属性 2
文本 3
注释 8
文档 9

四.查找节点
1.通过使用 getElementById() 和getElementsByName()和 getElementsByTagName() 方法

2.通过使用一个元素节点的childNodes,parentNode、firstChild以及lastChild属性

根节点

有两种特殊的文档属性可用来访问根节点:
document.documentElement  可返回存在于XML以及HTML文档中的文档根节点
document.body  对HTML页面的特殊扩展,提供了对<body>标签的直接访问
  • 大小: 19.1 KB
分享到:
评论

相关推荐

    DOM基础

    讲述了dom的一些基础知识

    AngularJS HTML DOM详解及示例代码

    本文主要介绍AngularJS HTML DOM基础知识,这里整理了相关资料和示例代码进行详解,有需要的小伙伴可以参考下

    JavaScriptDOM编程艺术.中文版.完整书签

     本书讲述了JavaScript和DOM的基础知识,但重点放在DOM编程技术背后的思路和原则:预留退路、循序渐进和以用户为中心等,这些概念对于任何前端Web开发工作都非常重要。本书将这些概念贯穿在书中的所有代码示例中,...

    HTML DOM 教程

    HTML DOM 定义了访问和操作HTML文档的标准方法。 HTML DOM 把 HTML 文档呈现为带有元素、属性和文本的树结构...您应当具备的基础知识 在继续学习之前,您需要对下面的知识有基本的了解: HTML / XHTML JavaScript

    JavaScript操作HTML元素和样式的方法详解

    JavaScript HTML DOM 元素(节点) 创建新的 HTML 元素 如需向 HTML DOM 添加新元素,您必须首先创建该元素(元素节点),然后向一个已存在的元素追加该元素。  实例 &lt;p id=p1&gt;This is a paragraph. &lt;p id=p2&gt;This...

    js+dom编程艺术资源

    《JavaScript DOM编程艺术:第2版》讲述了JavaScript、DOM 和HTML5 的基础知识,着重介绍DOM 编程技术背后的思路和原则:平稳退化、渐进增强和以用户为中心等。这些概念对于任何前端Web 开发工作都非常重要。本书将...

    JavaScript+DOM编程艺术.pdf

    《javascript dom编程艺术:第2版》讲述了javascript、dom 和html5 的基础知识,着重介绍dom 编程技术背后的思路和原则:平稳退化、渐进增强和以用户为中心等。这些概念对于任何前端web 开发工作都非常重要。本书将...

    [JavaScript.DOM编程艺术(第2版)+源码

    javascript dom编程艺术:第2版》讲述了javascript、dom 和html5 的基础知识,着重介绍dom 编程技术背后的思路和原则:平稳退化、渐进增强和以用户为中心等。这些概念对于任何前端web 开发工作都非常重要。本书将这些...

    JavaScript DOM 编程艺术(第二版)

    本书讲述了JavaScript、DOM和HTML5的基础知识,着重介绍了DOM编程技术背后的思路和原则:平稳退化、渐进增强和以用户为中心等。这些概念对于任何前端Web开发工作都非常重要。本书将这些概念贯穿在书中的所有代码示例...

    javascript DOM 操作基础知识小结

    [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]一、DOM基础1.节点(node)层次Document--最顶层的节点,所有的其他节点都是附属于它的。DocumentType--DTD引用(使用&lt;!DOCTYPE&gt;语法)的对象表现形式,它不能...

    JavaScript.DOM编程艺术(第2版) 2-4

    《javascript dom编程艺术:第2版》讲述了javascript、dom 和html5 的基础知识,着重介绍dom 编程技术背后的思路和原则:平稳退化、渐进增强和以用户为中心等。这些概念对于任何前端web 开发工作都非常重要。本书将...

    前端基础知识点总结(vue2,js,js高级,node.js,html,css,dom,jquery,wx小程序)

    基础知识点笔记

    JavaScript DOM编程艺术

    讲述了JavaScript、DOM 和HTML5 的基础知识,着重介绍DOM 编程技术背后的思路和原则:平稳退化、渐进增强和以用户为中心等。这些概念对于任何前端Web 开发工作都非常重要。本书将这些概念贯穿在书中的所有代码示例中...

    JavaScript.DOM编程艺术(第2版)(书签)mobile

    本书讲述了JavaScript、DOM 和HTML5 的基础知识,着重介绍DOM 编程技术背后的思路和原则:平稳退化、渐进增强和以用户为中心等。这些概念对于任何前端Web 开发工作都非常重要。本书将这些概念贯穿在书中的所有代码...

    JS中DOM元素的操作等基础知识笔记

    目录1. DOM的概念和作用2.节点树3.DOM选择器:(查询、创建、添加,修改,删除)4.DOM的基本操作①.... 浏览器会根据 DOM 模型,将结构化文档(比如 HTML和 XML)解析成一系列的节点,再由这些节点组成一个树状结

    前端学习之JavaScript DOM以及DOM操作的基础知识

    在了解了javascript的语言基础和特性后 javascript真正大放光彩的地方来了——这就是javascript DOM Javascript DOM DOM(Document Object Model),文档对象模型。 是W3C组织推荐的处理可扩展标记语言(HTML或者XML)...

    JavaScript_DOM编程艺术第二版高清(中文)

    JavaScript的编程艺术,高清版本,详情述了javascript、dom 和html5 的基础知识, 重点介绍原理,非常适合web开发人员观看

    JavaScript.DOM编程艺术(第2版) 1-4

    《javascript dom编程艺术:第2版》讲述了javascript、dom 和html5 的基础知识,着重介绍dom 编程技术背后的思路和原则:平稳退化、渐进增强和以用户为中心等。这些概念对于任何前端web 开发工作都非常重要。本书将...

    JavaScript.DOM编程艺术(第2版) 3-4

    《javascript dom编程艺术:第2版》讲述了javascript、dom 和html5 的基础知识,着重介绍dom 编程技术背后的思路和原则:平稳退化、渐进增强和以用户为中心等。这些概念对于任何前端web 开发工作都非常重要。本书将...

Global site tag (gtag.js) - Google Analytics