js文本对象模型【DOM】(十一)

一、W3C DOM 标准被分为 3 个不同的部分:
1、Core DOM - 所有文档类型的标准模型【IE中的所有DOM对象都是以COM对象的形式实现的】
2、XML DOM - XML 文档的标准模型
3、HTML DOM - HTML 文档的标准模型

二、JavaSript原生对象中的DOM对象【HTML DOM】
1、Node类型
javascript中所有的节点类型都继承自Node类型,所有节点类型都共享着相同的基本属性和方法。

2、Node的节点类型    
a、Document类型    document
b、Element类型    元素节点类型
c、Text类型    文本节点
d、Comment类型        注释节点

3、Node类型的相关属性和方法
a、Node类型属性
nodeType    节点类型【节点类型-->对应的返回值】(9138)
Document--> 9;Element -->1;TextNode -->3;Comment--> 8
document 是Document构造函数的实例
document.body是Element构造函数的实例
document.body.firstChild 是Comment构造函数的实例或Text构造函数的实例

nodeName    该属性取决于节点类型,如果是元素类型,值为元素的标签名

nodeValue    该属性取决于节点类型,如果是元素类型,值有null

childNodes    【返回相应节点的所有孩子节点组成的类数组对象】
NodeList是一种类数组对象用来保存一组有序的节点,NodeList是基于DOM结构动态执行查询的结果,DOM结构变化可以自动反应到NodeList对象中。
访问时可以通过中括号访问,也可以通过item()方法访问。

可以使用slice方法将NodeList转换为数组
eg:

    var arr = Array.prototype.slice.call(nodes,0);

parentNode        相应子节点的父元素节点

firstChild  所有孩子节点中的第一个孩子节点

lastChild  所有孩子节点中的最后一个孩子节点

previousSibling  前一个兄弟节点

nextSibling  后一个兄弟节点

ownerDocument
指向表示整个文档的文档节点。任何节点都属于它所在的文档,任何节点都不能同时存在于两个或更多个文档中。
eg:

    console.log(document.body.ownerDocument === document);    //true
    console.log(document.head.ownerDocument === document);    //true
    console.log(document.getElementsByTagName(‘div‘).ownerDocument);    //undefined

b、Node类型方法
hasChildNodes()    【返回值为boolean类型】        该节点是否有孩子节点

以下四个方法都需要使用父节点对象进行调用
appendChild(要添加的节点)
添加一个节点作为该节点的最后一个孩子节点    【返回新增的节点】
若要添加的参数节点已经为文档的一部分,位置更新而不插入【任何DOM节点不能同时出现在文档中的多个位置】

insertBefore(要插入的节点,[参照的节点])    
在参照的节点前面插入一个同胞节点    【返回要插入的节点】
若第二个参数为null将会将要插入的节点追加在NodeList后面【作为该节点的lastChild】

replaceChild(要插入的节点,要替换的节点)
移除要替换的节点并在其位置插入要插入的节点    【返回要替换的节点】

removeChild(要移除的节点)    
移除要移除的节点    【返回要移除的节点】

其他方法
cloneNode(boolean)   【克隆节点】
用于创建调用这个方法的节点的一个完全相同的副本。
参数为布尔类型参数为true时,表示深复制,即复制节点以及整个子节点数。
参数为false的时候,表示浅复制,只复制节点本身。
该方法不会复制添加到DOM节点中的JavaScript属性,例如事件处理程序等。
该方法只复制特定,子节点,其他一切都不复制。
但是IE中可以复制,建议标准相同,在复制之前,移除所有事件处理程序。

normalize()   【删除空白节点,将两个文本节点合并为一个文本节点】
处理文档树中的文本节点,由于解析器的实现或DOM操作等原因,可能会出现文本节点不包含文本,或者接连出现两个文本节点,
当在某个节点上调用了该方法,会删除空白节点,会找到相邻的两个文本节点,并将他们合并为一个文本节点。

原文地址:https://www.cnblogs.com/nzcblogs/p/11219086.html

时间: 2024-10-04 19:43:04

js文本对象模型【DOM】(十一)的相关文章

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

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

javascript--浏览器对象模型BOM、文本对象模型DOM、JavaScript 语言基础ECMAScript

JavaScript 的内容,包含以下三部分: ECMAScript(核心):JavaScript 语言基础: DOM(文档对象模型):规定了访问HTML和XML的接口: BOM(浏览器对象模型):提供了独立于内容而在浏览器窗口之间进行交互的对象和方法. 一. ECMAScript ECMAScript 规定了 JavaScript 脚本的核心语法,如 数据类型.关键字.保留字.运算符.对象和语句等,它不属于任何浏览器. ECMAScript 标准定义了 JavaScript 脚本中最为核心的内

DOM(文本对象模型)简介

DOM(文本对象模型)简介 在正式开始介绍jQuery处理XML前我们来了解一些必备的基础知识. DOM是HTML或者XML结构的一种展现形式,通过编程对DOM进行修改可以达到修改HTML/XML的目的.这部分使用一段简单的HTML文档并配合几个简单的例子来展示使用JavaScript对DOM上各节点的遍历和操作. JavaScript中操作DOM JavaScript中提供了一套完备的方法来获取,遍历,操作DOM.这里不详述,只是通过简单的例子来说明如何对操作. 后面的例子都基于以下HTML片

js中的DOM节点

文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法. DOM 将HTML文档呈现为带有元素.属性和文本的树结构(节点树). 把上面的代码拆分为Dom节点图  如图: 三种常见的DOM节点: 1.元素节点: 比如:html.h2.p.ul.li   即标签 2.文本节点:向用户展示的内容,比如:<li></li>中的JavaScript.DOM.CSS等文本 3.属性节点:元素属性  比如:<a></a>标签中

文本对象模型(Document Object Model)

本文内容: 1. 概述 2. DOM中的节点类型 3. DOM节点的选取 4. 存取元素属性 5.DOM元素的增删 6.小结 ★ 概述 文本对象模型(DOM)是一个能够让程序和脚本动态访问和更新文档内容,结构和样式的语言平台,提供了标准的HTML和XML对象集,并有一个标准的接口来访问操作他们. --摘自W3C 文本对象模型(Document Object Model,DOM),最初是W3C为解决浏览器混战时代不同浏览器环境之间的差别而制定的模型标准,然而主要是针对IE和Netscape Nav

原生js 的一些DOM/样式操作

写在前面的话: 一直写的jquery,原生的不用--写篇东西帮助自己整理记忆一下吧 ,虽然都很基础啊-- 1.js找dom对象,以及创建/删除 节点 一贯的jquery操作:$(selector) 原生的写法(列一些常用的): document.getElementsByClassName(selector) document.getElementsByTagName(selector) document.getElementById(selector)document.querySelecto

JS对象与Dom对象与jQuery对象之间的区别

通过问题看本质:举例:js的写法:document.getElementById('save').disabled=true;在jquery中我是这样写的 $("#save").disabled = true; //没有效果 分析:其实因为$("#save")出来的其实是jQuery对象,而不是普通DOM对象解决方法:1)用JQ写法 $("#save").attr("disabled","true"); 2

JS中获取 DOM 元素的绝对位置实例详解

在操作页面滚动和动画时经常会获取 DOM 元素的绝对位置,例如 本文 左侧的悬浮导航,当页面滚动到它以前会正常地渲染到文档流中,当页面滚动超过了它的位置,就会始终悬浮在左侧. 本文会详述各种获取 DOM 元素绝对位置 的方法以及对应的兼容性.关于如何获取 DOM 元素高度和滚动高度,请参考视口的宽高与滚动高度 一文. 概述 这些是本文涉及的 API 对应的文档和标准,供查阅: API 用途 文档 标准 offsetTop 相对定位容器的位置 MDN CSSOM View Module clien

用PHP代替JS玩转DOM

事情的起源比较简单,我需要把一个导航页的数据整理好写入数据库.一个比较直观的方法是对html文件进行分析,通用的方法是用php的正则表达式来匹配.但是这样做开发和维护都很困难,代码可读性非常差. 导航页的数据都是规则的排列在DOM树当中的,用JS可以用几个循环轻松的对其进行操作,而且JS需要依赖浏览器,操作数据库很困难.其实PHP就有现成的类库对DOM树种的节点进行增删改查操作,在此做一些笔记. 这里涉及到2个类 DOMDocument 和 DOMXPath. 其实思路比较明确,就是通过DOMD