DOM的概念及子节点类型【转】

【DOM的概念及子节点类型【转】】的更多相关文章

DOM的概念及子节点类型

前言 DOM的作用是将网页转为一个javascript对象,从而可以使用javascript对网页进行各种操作(比如增删内容).浏览器会根据DOM模型,将HTML文档解析成一系列的节点,再由这些节点组成一个树状结构.DOM的最小组成单位叫做节点(node),文档的树形结构(DOM树)由12种类型的节点组成. 一:DOM ==> 全称: document Object Mode 文档对象模型文档: html页面文档对象:页面元素(节点) 文档对象模型: W3C标准定义:为了能够使用java…

DOM的概念及子节点类型【转】

前言 DOM的作用是将网页转为一个javascript对象,从而可以使用javascript对网页进行各种操作(比如增删内容).浏览器会根据DOM模型,将HTML文档解析成一系列的节点,再由这些节点组成一个树状结构.DOM的最小组成单位叫做节点(node),文档的树形结构(DOM树)由12种类型的节点组成. 一:DOM ==> 全称: document Object Mode 文档对象模型文档: html页面文档对象:页面元素(节点) 文档对象模型: W3C标准定义:为了能够使用java…

js学习笔记14----DOM概念及子节点类型

1.概念 DOM:Document Object Model---文档对象模型文档:html页面文档对象:页面中的元素文档对象模型:是一种定义,为了能够让程序(js)去操作页面中的元素. DOM会把文档看成一棵树,同时定义了很多方法来操作这棵树中的每一个元素(节点). DOM节点:节点树中的每一个元素. 文档节点:每个文档的根节点,是文档的最外层元素.每个文档只能有一个文档元素.在HTML页面中,文档元素始终是<html> 2.节点类型元素.nodeType : 只读属性,当前元素的节…

DOM基础之“寻找”子节点

今天学习了JS中的DOM的内容,虽然小菜的理解不深,但希望能够记录下来,慢慢一点一点的进步,有更深的理解了,再回来补充. 首先,关于DOM的概念: 1.概念:DOM = document(文档)Object(对象)Model(模型) 文档:就是我们所说的html的页面对象:指的是html页面中的元素,也成为标签文档对象模型:则是规定的一系列能够为了让我们用JS更好操作页面元素的标准 2.在DOM下把文档当作树状结构,同时定义了很多方法来操作树中的每一个分支元素(节点) 3.如何寻找子节点要…

js文本对象模型[DOM]【续】(Node节点类型)

一.Document类型 document实例1.常用的一些属性documentElement 始终指向HTML页面中的<html>元素.body 直接指向<body>元素title 获取文档的标题images 获取所有的img对象 [返回类数组对象]forms 获取所有的form对象 [返回类数组对象]links 获取文档中所有带href属性的<area>和<a>元素referrer 取得链接到当前页面的那个页面的URL [即来源页…

遍历DOM树，获取子节点

获取子节点的方法有: 方法说明 children() 选取子节点,可以带过滤参数.但只能选择子节点,不能选择孙子节点. find() 选取子节点,可以带过滤参数.可以选择子节点及孙子节点. children()示例: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 <!DOCTYPE html> <html> <head> <…

DOM Element节点类型详解

上文中我们讲解了 DOM 中最重要的节点类型之一的 Document 节点类型,本文我们继续深入,谈谈另一个重要的节点类型 Element . 1.概况 Element 类型用于表现 HTML 或 XML 元素,提供了对元素标签名.子节点及特性的访问. Element 节点具有以下特征: nodeType 的值为 1 nodeName 的值为元素的标签名 nodeValue 的值为null parentNode 可能是 Document 或者 Element 其子节点可能是 Element.Te…

DOM Document节点类型详解

在前面 DOM 概况中,我们知道了 DOM 总共有 12 个节点类型,今天我们就来讲下 DOM 中最重要的节点类型之一的 document 节点类型. 1.概况 Javascript 通过 Document 类型表示文档.在浏览器中, document 对象是 HTMLDocument(继承自 Document 类型)的一个实例,表示整个 HTML 页面.而且, document 对象是 window 对象的一个属性,因此可以将其作为全局对象来访问. Document 节点具有如下特性: no…

xml去除指定节点，保留子节点操作

现有xml文件: <?xml version="1.0" encoding="utf-8" ?> <ShiftConfig xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema"> <Ot> <BeforeOtRange> <Star…

JS获取子节点、父节点和兄弟节点的方法实例总结

转自:https://www.jb51.net/article/143286.htm 本文实例讲述了JS获取子节点.父节点和兄弟节点的方法.分享给大家供大家参考,具体如下: 一.js获取子节点的方式 1. 通过获取dom方式直接获取子节点其中test的父标签id的值,div为标签的名字.getElementsByTagName是一个方法.返回的是一个数组.在访问的时候要按数组的形式访问. ? 1 var a = document.getElementById("test").getE…

javascript DOM中的节点层次和节点类型概述

针对JS高级程序设计这本书,主要是理解概念,大部分要点源自书内.写这个主要是当个笔记加总结存在的问题请大家多多指正! 因为DOM这方面的对象方法操作性都特别强,但是逻辑很简单,所以就没有涉及到实际的代码. 另外这篇不包括DOM2,DOM3的内容 DOM 文档对象模型,针对HTML和XML文档的一个API.描绘了一个层次化的结点树,循序开发人员添加,移除修改页面上的一部分. 1节点层次 DOM把文档描绘成一个由多层节点构成的结构.节点有不同的类型.节点之间的关系构成了层次. 文档节点是每个文档的…

深入理解DOM节点类型第五篇——元素节点Element

× 目录 [1]特征 [2]子节点 [3]特性操作[4]attributes 前面的话元素节点Element非常常用,是DOM文档树的主要节点:元素节点是html标签元素的DOM化结果.元素节点主要提供了对元素标签名.子节点及特性的访问,本文将详细介绍元素节点的主要内容特征元素节点的三个node属性——nodeType.nodeName.nodeValue分别是1.元素的大写标签名和null,其父节点parentNode指向包含该元素节点的元素节点Element或文档节点Document…

深入理解DOM节点类型第六篇——特性节点Attribute

× 目录 [1]特征 [2]属性 [3]方法前面的话元素的特性在DOM中以Attr类型表示,从技术角度讲,特性是存在于元素的attributes属性中的节点.尽管特性是节点,但却不是DOM节点树的一部分.本文将详细介绍该部分内容特征特性节点的三个node属性————nodeType.nodeName.nodeValue分别是2.特性名称和特性值,其父节点parentNode是null [注意]关于特性节点是否存在子节点,各个浏览器表现不一致 <div id="box"&g…

深入理解DOM节点类型第七篇——文档节点DOCUMENT

× 目录 [1]特征 [2]快捷访问 [3]文档写入前面的话文档节点document,隶属于表示浏览器的window对象,它表示网页页面,又被称为根节点.本文将详细介绍文档节点document的内容特征文档节点的三个node属性——nodeType.nodeValue.nodeName分别是9.'#document'和null 由于它是根节点,所以其父节点parentNode指向null,ownerDocument也指向null console.log(document.nodeType…

DOM节点类型

DOM1级定义了一个Node接口,该接口将由DOM中的所有节点类型实现.这个Node接口在JavaScript中是作为Node类型实现的:除了IE外,在其他所有浏览器中都可以访问到这个类型.JavaScript中的所有节点类型都继承自Node类型,因此所有的节点类型都共享着相同的基本属性和方法. 每个节点都有一个NodeType属性,用于表现节点的类型,节点类型由在Node类型中定义的下列12个数值敞亮来表示,任何节点类型必居其一: Node.ELEMENT_NODE(1); Node.ATTR…

JS-DOM ～ 03. 子节点的操作、style.样式和属性、dom元素的创建方法及操作、14个例题、主要是利用js直接控制html属性

带有Element和不带的区别 a) 带Element的获取的是元素节点 b) 不带可能获取文本节点和属性节点获取所以子节点 a) . childNodes b) . children c) . parentNode . children [索引] . children:获取所有子节点 opacity:0-1:透明度 alpha(opacity:百分数):IE6/7/8透明度先绑定事件再进行循环 previousNode()上一个兄弟节点 alert(变量名)可测试变量名是否…

js学习总结：DOM节点一（选择器，节点类型）

DOM:document object model 文档对象模型 DOM就是整个HTML文档的关系图谱(代表整个HTML文档),可以理解为下图: 一.查看元素节点 1.document.getElementById('元素id') 获取的类型:元素对象: 兼容性:a.IE6.7,会把表单元素input的name属性当做ID来使用: b.IE8以下的浏览器,不区分id大小写注意事项: a.没有获取到元素返回null b.后端抽取会改变id名称,实际开发不使用id选择器来操作元素节点 2.docu…

XML DOM 节点类型（Node Types）

节点类型下面的表格列出了不同的 W3C 节点类型,以及它们可拥有的子元素: 节点类型描述子元素 Document 表示整个文档(DOM 树的根节点) Element (max. one) ProcessingInstruction Comment DocumentType DocumentFragment 表示轻量级的 Document 对象,其中容纳了一部分文档. ProcessingInstruction Comment Text CDATASection EntityReferenc…

DOM之节点类型加例子

DOM= Document Object Model,文档对象模型,DOM可以以一种独立于平台和语言的方式访问和修改一个文档的内容和结构.换句话说,这是表示和处理一个HTML或XML文档的常用方法.DOM实际上是以面向对象方式描述的文档模型.DOM定义了表示和修改文档所需的对象.这些对象的行为和属性以及这些对象之间的关系.可以把DOM认为是页面上数据和结构的一个树形表示,不过页面当然可能并不是以这种树的方式具体实现. 通过 JavaScript,您可以重构整个 HTML 文档.您可以添加.移除.…

javascript之DOM（一节点类型Node）

DOM(Document Object Model)是针对HTML和XML文档的一个API.DOM描述的是一个层次化的节点树,允许开发人员添加.移除和修改页面的某一部分.起源于DHML,现为W3C的推荐标准. IE中的所有DOM对象都是以COM对象的形式实现. 节点层次 DOM可以将任何HTML或XML文档描绘成一个有多层节点构成的结构.节点分为几种不同的类型,每种类型分别表示文档中的不同信息及标记.每个节点都有各自的属性,数据和方法,同时也与其他节点存在联系.所有页面标记表现为以一个特定节点为…

JavaScript DOM查询，原生js实现元素子节点的获取

在网页网页开发中,经常会需要获取某个网页元素的子元素,然后对其进行事件绑定.或样式修改等行为.这些操作对于jquery来说很容易,但是对于原生js会稍微麻烦一些,这里将介绍四种方法获取元素的子元素(本文推荐第四种方法,如果时间有限,请直接把把滚轮滑到底↓↓↓↓↓) 一.childNodes childNodes属性可以获取节点元素的子节点,并将获取到的子节点封装成一个对象: <div class="test" id="test"> <p>&l…

深入理解DOM节点类型第二篇——文本节点Text

× 目录 [1]特征 [2]空白 [3]属性[4]方法[5]性能前面的话文本节点顾名思义指向文本的节点,网页上看到的文字内容都属于文本节点.该节点简单直观,本文将详细介绍该部分内容特征文本节点由Text类型表示,包含的是纯文本内容,但文本节点是对象类型 <div id="box">内容</div> <script> console.log(box.firstChild);//"内容" console.log(typeof…

深入理解DOM节点类型第四篇——文档片段节点DocumentFragment

× 目录 [1]特征 [2]作用前面的话在所有节点类型中,只有文档片段节点DocumentFragment在文档中没有对应的标记.DOM规定文档片段(document fragment)是一种“轻量级”的文档,可以包含和控制节点,但不会像完整的文档那样占用额外的资源特征创建文档片段,要使用document.createDocumentFragment()方法.文档片段继承了Node的所有方法,通常用于执行那些针对文档的DOM操作文档片段节点的三个node属性——nodeType.nod…

深入理解DOM节点类型第一篇——12种DOM节点类型概述

× 目录 [1]元素 [2]特性 [3]文本[4]CDATA[5]实体引用[6]实体名称[7]处理指令[8]注释[9]文档[10]文档类型[11]文档片段[12]DTD 前面的话 DOM是javascript操作网页的接口,全称为文档对象模型(Document Object Model).它的作用是将网页转为一个javascript对象,从而可以使用javascript对网页进行各种操作(比如增删内容).浏览器会根据DOM模型,将HTML文档解析成一系列的节点,再由这些节点组成一个树状结构.DO…

5月25日-js操作DOM遍历子节点

一.遍历节点遍历子节点 children();//获取节点的所有直接子类遍历同辈节点 next(); prev(); siblings();//所有同辈元素 *find(); 从后代元素中查找匹配的 filter(); 过滤查找 each() 遍历节点 $("li").each(function(i,ele){ //alert($(ele).html()); }); 二.css DOM操作三.表单校验表单选择器…

第10章文档对象模型DOM 10.1 Node节点类型

DOM是针对 HTML 和 XML 文档的一个 API(应用程序编程接口) .DOM描绘了一个层次化的节点树,允许开发人员添加.移除和修改页面的某一部分.DOM 脱胎于Netscape 及微软公司创始的 DHTML (动态 HTML) , 但现在它已经成为表现和操作页面标记的真正的跨平台.语言中立的方式. 节点 DOM 可以将任何 HTML 或 XML 文档描绘成一个由多层节点构成的结构. 每个节点都拥有各自的特点.数据和方法,另外也与其他节点存在某种关系.节点之间的关系构成了层次,而所有页面标…