DOM把层次中的每一个对象都称之为节点(NODE),以HTML超文本标记语言为例:整个文档的一个根就是<html>,在DOM中可以使用
document.documentElement来访问它,它就是整个节点树的根节点(ROOT)

子节点:

一般意义上的节点,根节点以下最大子节点就是主文档区<body>了,要访问到body标签,在脚本中应该写:
document.body
body区以内所有的文本及HTML标签都是文档的节点,分别称为文本节点、元素节点(或者叫标签节点),大家知道HTML说到底只是文本而矣,
不论怎么样的网页必然由这两个节点组成,也只能由这两个节点组成
节点之间的关系:
节点之间的关系也是DOM中最重要的一个关节,如何正确地引用到节点对象,一定要清楚节点树各个节点的相互描述方式,在DHTML里,
Javascript脚本就用了各个节点对象的一整套方法和属性去描述另外的节点对象。

节点的绝对引用:
返回文档的根节点
document.documentElement
返回当前文档中被击活的标签节点
document.activeElement
返回鼠标移出的源节点
event.fromElement
返回鼠标移入的源节点
event.toElement
返回激活事件的源节点
event.srcElement
节点的相对引用:(设当前对节点为node)
返回父节点
node.parentNode
node.parentElement
返回子节点集合(包含文本节点及标签节点)
node.childNodes
返回子标签节点集合
node.children
返回子文本节点集合
node.textNodes
返回第一个子节点
node.firstChild
返回最后一个子节点
node.lastChild
返回同属下一个节点
node.nextSibling
返回同属上一个节点
node.previousSibling
节点的各种操作:(设当前的节点为node)
新增标签节点句柄:
document.createElement_x(sNode) //参数为要新添的节点标签名,例:newnode=document.createElement_x("div");
1、添加节点:
追加子节点:
node.appendChild(oNode) //oNode为生新增的节点句柄,例:node.appendChild(newnode)
应用标签节点
node.applyElment(oNode,sWhere)//oNode为生新增的节点句柄,sWhere有两个值:outside / inside,加在当前节点外面还是里面
插入节点
inode.insertBefore()
node.insertAdjacentElement()
node.replaceAdjacentText()
2、修改节点:
删除节点
node.remove()
node.removeChild()
node.removeNode()
替换节点
node.replaceChild()
node.replaceNode()
node.swapNode()

2、复制节点:
返回复制复制节点引用
node.cloneNode(bAll)//bAll为布尔值,true / false 是否克隆该节点所有子节点
3、节点信息
是否包含某节点
node.contains()
是否有子节点
node.hasChildNodes()

javascriptDOM节点的更多相关文章

  1. js总结33 :javascript-DOM节点属性

    1 设置节点属性三个方法: 获取:getAttribute(名称) 设置:setAttribute(名称, 值) 删除:removeAttribute(名称) 举个例子: <!DOCTYPE h ...

  2. js教程系列32 :javascript-DOM节点操作

    1 DOM节点操作 1.1 创建节点 createElement() var createDiv = document.createElement("div"); 1.2 插入子节 ...

  3. JavaScript--DOM节点属性

    节点属性 在文档对象模型 (DOM) 中,每个节点都是一个对象.DOM 节点有三个重要的属性 : 1. nodeName : 节点的名称 2. nodeValue :节点的值 3. nodeType ...

  4. JavaScript---Dom树详解,节点查找方式(直接(id,class,tag),间接(父子,兄弟)),节点操作(增删改查,赋值节点,替换节点,),节点属性操作(增删改查),节点文本的操作(增删改查),事件

    JavaScript---Dom树详解,节点查找方式(直接(id,class,tag),间接(父子,兄弟)),节点操作(增删改查,赋值节点,替换节点,),节点属性操作(增删改查),节点文本的操作(增删 ...

  5. JavaScript--DOM创建元素节点createElement

    创建元素节点createElement createElement()方法可创建元素节点.此方法可返回一个 Element 对象. 语法: document.createElement(tagName ...

  6. JavaScript--DOM删除节点removeChild()

    删除节点removeChild() removeChild() 方法从子节点列表中删除某个节点.如删除成功,此方法可返回被删除的节点,如失败,则返回 NULL. 语法: nodeObject.remo ...

  7. 前端学习记录之Javascript-DOM

    简介 为了快捷方便,在工作和项目中,一直都是使用的框架,比如jqeruy,vuejs,react等.然后在长时间使用框架后,往往有一个后遗症,就是对于原生的Javascript基本上已经不知道怎么写了 ...

  8. JavaScriptDOM编程学习笔记(二)图片库案例

    <JavascriptDOM编程艺术>提供一个图片库的demo,主要讲解如何更好的使用JavaScript在网页中,跟随作者的思路来分析一下这个案例 首先需求是将图片发布到网上,但是如果发 ...

  9. 从0开始搭建SQL Server AlwaysOn 第四篇(配置异地机房节点)

    从0开始搭建SQL Server AlwaysOn 第四篇(配置异地机房节点) 第一篇http://www.cnblogs.com/lyhabc/p/4678330.html第二篇http://www ...

随机推荐

  1. [Oracle]LogMiner工具小结

    (一)LogMiner工具的作用Logminer工具主要用来分析redo log和archive log文件.通过该工具,可以轻松获得Oracle redo log和archive log文件的具体内 ...

  2. bzoj1487 [HNOI2009]无归岛

    Description Neverland是个神奇的地方,它由一些岛屿环形排列组成,每个岛上都生活着之中与众不同的物种.但是这些物种都有一个共同的生活习性:对于同一个岛 上的任意两个生物,他们有且仅有 ...

  3. 针对Mac的DuckHunter攻击演示

    0x00 HID 攻击 HID是Human Interface Device的缩写,也就是人机交互设备,说通俗一点,HID设备一般指的是键盘.鼠标等等这一类用于为计算机提供数据输入的设备. DuckH ...

  4. [内存管理]linux内存管理 之 内存节点和内存分区

    Linux支持多种硬件体系结构,因此Linux必须采用通用的方法来描述内存,以方便对内存进行管理.为此,Linux有了内存节点.内存区.页框的概念,这些概念也是一目了然的. 内存节点:主要依据CPU访 ...

  5. O(mn)实现LCIS

    序: LCIS即求两序列的最长公共不下降子序列.思路于LCS基本一致. 用dp[i][j]记录当前最大值. 代码实现: /* About: LCIS O(mn) Auther: kongse_qi D ...

  6. poj2774 Long Long Message 后缀数组求最长公共子串

    题目链接:http://poj.org/problem?id=2774 这是一道很好的后缀数组的入门题目 题意:给你两个字符串,然后求这两个的字符串的最长连续的公共子串 一般用后缀数组解决的两个字符串 ...

  7. 使用configuration配置结束在quartz.net中使用硬编码Job,Trigger任务提高灵活性

    经常在项目中遇到定时任务的时候,通常第一个想到的是Timer定时器,但是这玩意功能太弱鸡,实际上通常采用的是专业化的第三方调度框架,比如说 Quartz,它具有功能强大和应用的灵活性,我想使用过的人都 ...

  8. Python装饰器实现几类验证功能做法(续)

    :昨天聊了一下构造.今天试了一下.感觉昨天聊的还是不够细化.今天结合代码实现,加以一点补充. 首先观察下面这个例子 from functools import wrapsdef decorator(f ...

  9. Add Two Numbers 2015年6月8日

    You are given two linked lists representing two non-negative numbers. The digits are stored in rever ...

  10. UICollection无法下拉刷新的问题

    当UICollectonView加载的内容不够多的时候会出现无法上下拉刷新的问题,折腾了半天,原来是有一个属性没有打开 设置 : self.collectionView.alwaysBounceVer ...