js DOM模型操作

DOM模型中的节点：元素节点、文本节点、属性节点
例：<a href=”http://www.cnblogs.com/shuz”>私のdotnet小屋</a>
（1）a是元素节点
（2）“私のdotnet小屋”是文本节点
（3）href=”http://www.cnblogs.com/shuz”是属性节点
DOM节点的属性























































属性

类型

说明

nodeName

String

节点名称，根据节点的类型而定义

nodeValue

String

节点的值，根据节点的类型而定义

nodeType

Number

节点类型，1为元素节点，2为属性节点，3为文本节点

firstChild

Node

指向childNodes列表的第一个节点

lastChild

Node

指向childNodes列表的最后一个节点

childNodes

NodeList

所有子节点列表，childNodes[i]可以访问第i+1个节点

parentNode

Node

指向节点的父节点，如果已是根节点，则返回null

previousSibling

Node

指向前一个兄弟节点，如果已是第一个节点，则返回null

nextSibling

Node

指向后一个兄弟节点，如果已是最后一个节点，返回null

Attributes

NameNodeMap

包含一个元素特性的Attr对象，仅用于元素节点

className

String

节点的CSS类

innerHTML

String

某个标记之间的所有内容，包括代码本身

DOM节点的方法
（1）访问节点：
【通过标签名】
document.getElementsByTagName(sTagName)方法：返回一个包含某个相同标签名的元素节点列表
【通过标签ID】
document.getElementById(sElementId)方法：返回Id为指定值的元素节点
【访问前一个节点】兼容IE和FireFox
（自定义）


代码如下:

function prevSib(oNode){
var oTempFirstNode=oNode.parentNode.firstChild;
//判断是否是第一个节点，如果是则返回null
if(oNode==oTempFirstNode)
return null;
var oTempNode=oNode.previousSibling;
//逐一搜索前面的兄弟节点，直到发现元素节点为止
while(oTempNode.nodeType!=1 && oTempNode.previousSibling!=null)
oTempNode=oTempNode.previousSibling;
//三目运算符，如果是元素节点则返回节点本身，否则返回null
return (oTempNode.nodeType==1)?:oTempNode:null;
}

【访问后一个节点】兼容IE和FireFox
（自定义）


代码如下:

function nextSib(oNode){
var oTempLastNode=oNode.parentNode.lastChild;
//判断是否是最后一个节点，如果是则返回null
if(oNode==oTempLastNode)
return null;
var oTempNode=oNode.nextSibling;
//逐一搜索后面的兄弟节点，直到发现元素节点为止
while(oTempNode.nodeType!=1 && oTempNode.nextSibling!=null)
oTempNode=oTempNode.nextSibling;
//三目运算符，如果是元素节点则返回节点本身，否则返回null
return(oTempNode.nodeType==1)?oTempNode:null;
}

（2）判断一个节点是否有子节点：
NodeObject.hasChildNodes()方法：当childNodes包含一个或多个节点时，返回true
（3）设置节点属性：
eleNode.getAttribute(attrNode)方法：返回eleNode元素的attrNode属性
eleNode.setAttribute(attrNode,sNewValue)方法：设置eleNode元素的attrNode属性的值为sNewValue
（4）创建节点：
document.createElement(eleNode)方法：创建一个元素节点eleNode
document.createTextNode(textNode)方法：创建一个文本节点textNode
document.createDocumentFragment()方法：创建文档碎片节点
（5）添加节点：
eleNode.appendChild(textNode)方法：将textNode节点添加到childNodes的末尾
（6）删除节点：
oNode.parentNode.removeChild(oNode)方法：从childNodes中删除oNode节点
（7）替换节点：
oNode.parentNode.replaceChild(oNewNode,oOldNode)方法：将childNodes中的oOldNode节点替换成oNewNode节点
（8）在特定节点前插入节点：
oTargetNode.parentNode.insertBefore(oNewNode,oTargetNode)方法：在childNodes中的oTargetNode节点之前插入oNewNode节点
（9）在特定节点后插入节点：
（自定义）oTargetNode.parentNode.insertAfter(oNewNode,oTargetNode)方法：在childNodes中的oTargetNode节点之后插入oNewNode节点


代码如下:

function insertAfter(oNewNode,oTargetNode){
var oParentNode=oTargetNode.parentNode;
if(oParentNode.lastChild==oTargetNode)
oParentNode.appendChild(oNewNode);
else
oParentNode.insertBefore(oNewNode,oTargetNode.nextSibling);
}

赞 (0)

相关推荐

  • javascript事件捕获机制【深入分析IE和DOM中的事件模型】

    本文实例分析了javascript事件捕获机制.分享给大家供大家参考,具体如下: 1.什么是事件冒泡? 在排序算法中,我们学过冒泡排序法,所谓冒泡就是让底层的东西浮出水面,对于事件冒泡也同样是如此, 下面我们来看一个例子来说明什么是事件冒泡. <div> <button>测试</button> </div> <script> $("div").bind("click",function(){alert(&q

  • 事件模型在各浏览器中存在差异

    事件模型在各浏览器中存在差异

    标准参考 根据 W3C DOM 2 Events 描述,EventTarget 接口被所有支持 DOM 事件模型的节点(Node)实现. 该接口提供了 'addEventListener' 和 'removeEventListener' 方法,用来绑定或解绑一个 EventListeners 接口到一个 EventTarget. DOM 2 Events 中定义了 Event 接口,用来提供事件的上下文信息,它提供了若干标准属性和方法. 实现 Event 接口的对象一般作为第一个参数传入事件处理

  • javascript事件模型介绍

    一.原始事件模型 其事件类型:分为"输入事件(如onclicki)"和"语义事件(如onsubmit)" 事件程序的注册可以以下几种方式: 1.JS代码作为HTML性质值 复制代码 代码如下: <input type="button" value="Press me" onclick="alert('thanks');" 2.事件处理程序作为JS属性 附注:文档中的每个HTML元素在文档树中都有一个相

  • ASP.NET的事件模型(很适合学习的文章)

    在Default.aspx的页面中第一行是一条页面指令: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="AspxEventsModel._Default" %> 其中CodeBehind属性指定代码隐藏页面的名称,Inherits指定所属的命名空间和类,AutoEventWireup属性是可以

  • 关于javascript DOM事件模型的两件事

    关于javascript DOM事件模型的两件事

    事件捕捉(Event Capture)的实现问题 W3C DOM Level2的事件模型规范中,事件在DOM树中的传播过程(从根节点到目标节点)被分为了两个阶段:捕捉(Capture)和冒泡(Bubbling).下面这个图能大概的说明整个过程: (from W3C) 如果想创建一个捕捉事件,在支持W3C 事件模型的浏览器中,将addEventListener的第三个参数设为true就好了.例如: 复制代码 代码如下: document.getElementById('foo').addEvent

  • javascript事件模型实例分析

    本文实例讲述了javascript事件模型的用法.分享给大家供大家参考.具体分析如下: 一.事件模型 冒泡型事件(Bubbling):事件由叶子节点沿祖先节点一直向上传递到根节点 捕获型事件(Capturing):由DOM树最顶元素一直到最精确的元素,与冒泡型事件相反 DOM标准事件模型:DOM标准既支持冒泡型事件,也支持捕获型事件,可以说是两者的结合体,首先是捕获型,接着冒泡传递 二.事件对象 在IE浏览器中事件对象是window的一个属性,在DOM标准中,event必须作为唯一的参数传给事件

  • js事件模型与自定义事件实例解析

    JavaScript 一个最简单的事件模型,需要有事件绑定与触发,还有事件删除. var eventModel = { list: {}, bind: function () { var args = [].slice.call(arguments), type = args[0], handlers = args.slice(1); if (typeof type === 'string' && handlers.length > 0) { for (var i = 0; i &l

  • 带你快速理解javascript中的事件模型

    带你快速理解javascript中的事件模型

    javascript中有两种事件模型:DOM0,DOM2.而对于这两种的时间模型,我一直不是非常的清楚,现在通过网上查阅资料终于明白了一些. 一.  DOM0级事件模型 DOM0级事件模型是早期的事件模型,所有的浏览器都是支持的,而且其实现也是比较简单.代码如下: <p id = 'click'>click me</p> <script> document.getElementById('click').onclick = function(event){ alert(

  • Javascript基础知识（一）核心基础语法与事件模型

    一.Javascript核心基础语法 1.Javascript是一门增加交互效果的编程语言,它最初由网景公司发明,最后提交给ECMA(欧洲计算机制造商协会),ECMA将Javascript标准化,其命名为Javascript. 2.Javascript是一门解释性语言,无需编译就可以直接在浏览器下运行. 3.Javascript的用途? 1.可以控制网页中所有元素,增加.删除.修改元素的属性. 2.可以在html中放入动态文本. 3.响应用户在使用网页时产生的事件. 4.校验用户输入的数据. 5

  • js DOM模型操作

    DOM模型中的节点:元素节点.文本节点.属性节点 例:<a href="http://www.cnblogs.com/shuz">私のdotnet小屋</a> (1)a是元素节点 (2)"私のdotnet小屋"是文本节点 (3)href="http://www.cnblogs.com/shuz"是属性节点 DOM节点的属性 属性 类型 说明 nodeName String 节点名称,根据节点的类型而定义 nodeValue

  • Javascript入门学习第七篇 js dom实例操作第1/2页

    直接从方法说起: 1,    删除节点.removeChild(): <body>  <div id="cssrain">  <div id="a">a </div>  <div id="b">b </div>  <div id="c">c </div>  </div>  </body> <script

  • JS前端知识点总结之页面加载事件，数组操作，DOM节点操作，循环和分支

    本文实例讲述了JS前端知识点总结之页面加载事件,数组操作,DOM节点操作,循环和分支.分享给大家供大家参考,具体如下: 页面加载事件的比较 window.onload jquery 中的 document.ready document.ready = function (callback) { // 兼容FF,Google if (document.addEventListener) { document.addEventListener('DOMContentLoaded', function

  • JS常见DOM节点操作示例【创建 ，插入，删除，复制，查找】

    本文实例讲述了JS常见DOM节点操作.分享给大家供大家参考,具体如下: DOM含义:DOM是文档对象模型(Document Object Model,是基于浏览器编程的一套API接口,是W3C出台的推荐标准.其赋予了JS操作节点的能力.当网页被加载时,浏览器就会创建页面的文档对象模型. 节点:根据 W3C 的 HTML DOM 标准,HTML 文档中的所有内容都是节点: 1.整个文档时一个文档节点. 2.每个HTML元素是元素节点. 3.HTML元素内的文本是文本节点. 4.每个HTML属性是属

  • js DOM的事件常见操作实例详解

    js DOM的事件常见操作实例详解

    本文实例讲述了js DOM的事件常见操作.分享给大家供大家参考,具体如下: 一.JavaScript的组成 JavaScript基础分为三个部分: ECMAScript:JavaScript的语法标准.包括变量.表达式.运算符.函数.if语句.for语句等. DOM:文档对象模型,操作网页上的元素的API.比如让盒子移动.变色.轮播图等. BOM:浏览器对象模型,操作浏览器部分功能的API.比如让浏览器自动滚动. 二.事件 JS是以事件驱动为核心的一门语言. 事件的三要素 事件的三要素:事件源.

  • Angular.JS通过指令操作DOM的方法

    在指令而非在控制器中操作DOM 相信大家在页面处理中,难免会遇到操作DOM的情况,在AngularJS中,对DOM的操作是在指令而非控制器中完成的. AngularJS强调隔离的思想:把复杂的逻辑和操作放在指令或服务中,控制器作为视图和$scope之间的桥梁,仅仅用来存储数据模型. jqLite 为了便于DOM操作,AngularJS内部封装了angular.element,如果现有项目中已经引入的jQuery,angular.element相当于jQuery函数的别名,否则,angular.e

  • 浅谈DOM的操作以及性能优化问题-重绘重排

    浅谈DOM的操作以及性能优化问题-重绘重排

    写在前面: 大家都知道DOM的操作很昂贵. 然后贵在什么地方呢? 一.访问DOM元素 二.修改DOM引起的重绘重排 一.访问DOM 像书上的比喻:把DOM和JavaScript(这里指ECMScript)各自想象为一个岛屿,它们之间用收费桥梁连接,ECMAScript每次访问DOM,都要途径这座桥,并交纳"过桥费",访问DOM的次数越多,费用也就越高.因此,推荐的做法是尽量减少过桥的次数,努力待在ECMAScript岛上.我们不可能不用DOM的接口,那么,怎样才能提高程序的效率? 既然

  • JQuery 选择器、DOM节点操作练习实例

    JQuery 选择器、DOM节点操作练习实例

    一.练习一 1.需求效果分析: 2.代码示例: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script s

  • 深入理解JS DOM事件机制

    深入理解JS DOM事件机制

    1.事件流 html 元素触发事件的顺序. 2.事件冒泡IE的事件流叫做事件冒泡(event bubbling),即事件开始时由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播到较为不具体的节点(文档).3.事件捕获事件捕获的思想是不太具体的节点应该更早的接收到事件,而最具体的节点应该在最后接收到节点.事件捕获的用意在于事件到达预定目标之前捕获它. DOM事件流 "DOM2级事件流"规定的事件流包括三个阶段:事件捕获阶段.处于目标阶段和冒泡阶段.首先发生的是事件捕获,

  • Node.JS使用Sequelize操作MySQL的示例代码

    Node.JS提供了操作数据库的基础接口,我们可以通过mysql模块的query方法进行操作,但是需要编写SQL语句,对于SQL语句并不精通的人来说有一定的难度,而且在代码中保留SQL语句也有一定的危险性.为了方便进行数据库操作,ORM框架应运而生,Sequelize正是这样的模块. 安装Sequelize 首先,使用cd命令将终端控制台定位到项目的根目录,然后使用npm安装: npm install sequelize --save 安装mysql2 由于sequelize依赖于mysql2所

随机推荐