javascriptDOM节点
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节点的更多相关文章
- js总结33 :javascript-DOM节点属性
1 设置节点属性三个方法: 获取:getAttribute(名称) 设置:setAttribute(名称, 值) 删除:removeAttribute(名称) 举个例子: <!DOCTYPE h ...
- js教程系列32 :javascript-DOM节点操作
1 DOM节点操作 1.1 创建节点 createElement() var createDiv = document.createElement("div"); 1.2 插入子节 ...
- JavaScript--DOM节点属性
节点属性 在文档对象模型 (DOM) 中,每个节点都是一个对象.DOM 节点有三个重要的属性 : 1. nodeName : 节点的名称 2. nodeValue :节点的值 3. nodeType ...
- JavaScript---Dom树详解,节点查找方式(直接(id,class,tag),间接(父子,兄弟)),节点操作(增删改查,赋值节点,替换节点,),节点属性操作(增删改查),节点文本的操作(增删改查),事件
JavaScript---Dom树详解,节点查找方式(直接(id,class,tag),间接(父子,兄弟)),节点操作(增删改查,赋值节点,替换节点,),节点属性操作(增删改查),节点文本的操作(增删 ...
- JavaScript--DOM创建元素节点createElement
创建元素节点createElement createElement()方法可创建元素节点.此方法可返回一个 Element 对象. 语法: document.createElement(tagName ...
- JavaScript--DOM删除节点removeChild()
删除节点removeChild() removeChild() 方法从子节点列表中删除某个节点.如删除成功,此方法可返回被删除的节点,如失败,则返回 NULL. 语法: nodeObject.remo ...
- 前端学习记录之Javascript-DOM
简介 为了快捷方便,在工作和项目中,一直都是使用的框架,比如jqeruy,vuejs,react等.然后在长时间使用框架后,往往有一个后遗症,就是对于原生的Javascript基本上已经不知道怎么写了 ...
- JavaScriptDOM编程学习笔记(二)图片库案例
<JavascriptDOM编程艺术>提供一个图片库的demo,主要讲解如何更好的使用JavaScript在网页中,跟随作者的思路来分析一下这个案例 首先需求是将图片发布到网上,但是如果发 ...
- 从0开始搭建SQL Server AlwaysOn 第四篇(配置异地机房节点)
从0开始搭建SQL Server AlwaysOn 第四篇(配置异地机房节点) 第一篇http://www.cnblogs.com/lyhabc/p/4678330.html第二篇http://www ...
随机推荐
- react基于nodejs简单的搭建与开发方法
只需安装babel命令,即可将react的jsx写法转换成浏览器认识的js写法 1.安装nodejs(百度下载安装即可,自带npm) 2.cmd打开命令行,cd进入在自己的文件夹下 执行命令: npm ...
- Cocos2d-x 3.2 环境搭建
参考文章地址: 1.Cocos2d-x官方安装说明文档:http://cn.cocos2d-x.org/tutorial/show?id=781 2.CSDN博客:http://blog.csdn.n ...
- VopSdk一个高逼格微信公众号开发SDK
一.我们的目标 分离基础参数和业务参数. 具有高重用和扩展性. 轻量级. 二.实现目标 (一)分离基础参数和业务参数 仔细分析所有接口,抽离出每个模块接口的公共参数. A.针对微信公众号所有接口分析( ...
- 572. Subtree of Another Tree
Problem statement: Given two non-empty binary trees s and t, check whether tree t has exactly the sa ...
- 二、Windows基础数据类型
六.Windows Data Types 简介: 6.1.这些数据类型都是C语言数据类型的再次的进行包装. 6.2.因为考虑到如果使用的是C中的基础数据类型可能无法表示,想表示的精准的含义. 6.3. ...
- ECMAScript迭代语句
迭代语句又叫循环语句,声明一组要反复执行的命令,直到满足某些条件为止. 循环通常用于迭代数组的值(因此而得名),或者执行重复的算术任务. do-while, while, for, for-in -- ...
- Tensorflow中的padding操作
转载请注明出处:http://www.cnblogs.com/willnote/p/6746668.html 图示说明 用一个3x3的网格在一个28x28的图像上做切片并移动 移动到边缘上的时候,如果 ...
- SpringMVC中的java.lang.ClassNotFoundException: org.aspectj.weaver.BCException 调试过程记录
报错原因 上文本描述 java.lang.NoClassDefFoundError: org/aspectj/weaver/BCException at java.lang.Class.getDecl ...
- servlet多线程
一,servlet容器如何同时处理多个请求. Servlet采用多线程来处理多个请求同时访问,Servelet容器维护了一个线程池来服务请求.线程池实际上是等待执行代码的一组线程叫做工作者线程(Wor ...
- C# 特性(Attribute)
个人定义:不侵入对象的情况下,添加对象附注信息. 官方定义:将预定义的系统信息或用户定义的自定义信息与目标元素相关联.目标元素可以是程序集.类.构造函数.委托.枚举.事件.字段.接口.方法.可移植可执 ...