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 ...
随机推荐
- [编织消息框架][传输协议]stcp简单开发
测试代码 public class ServerSTCP { static int SERVER_PORT = 3456; static int US_STREAM = 0; static int F ...
- log4j的Appenders配置
因为是刚开始使用log4j,很多配置方面的东西都不懂,记录下. 下面是我用STS(Spring Tool Suite)新建Spring MVC项目的时候,帮我自动生成的一个log4j.xml配置文件. ...
- Yii2框架---常用代码
一.Php控制器跳转 return $this->redirect('/site/index/index'); 二.回调自身控制器 self::actionXxxx(); 三.获取当前用 ...
- Hush Framework框架配置
在写这篇文章的时候,楼主已经饿的不行了,因为我从3点开始就在折腾Hush Framework,走了很多弯路,打铁要趁热,先把基本的过程记录下来,留待以后翻阅,同时记录其中容易走弯路的地方,特别是对于一 ...
- Java基础之equals方法和"= ="的区别
==操作符专门用来比较两个变量的值是否相等,也就是用于比较变量所对应的内存中所存储的数值是否相同,要比较两个基本类型的数据或两个引用变量是否相等,只能用==操作符. 如果一个变量指向的数据是对象类型的 ...
- JDK内置日志系统
1.Java应用中的日志功能 ================= 一般的Java应用程序中都有记录日志的需求,目前主流的记录日志的方法是在应用程序中引入log4j,用log4j来生成日志.其实,JDK ...
- 分针网—IT教育: Html / CSS常见问题的解决方案
1. 解决Safari下input光标过大 2. 设置浮层 3. CSS绘制三角形 4. 清除浮动 1) 浮动元素父级添加样式 2) 父元素后添加伪元素 3) 同样可以使用 ...
- jdbc(2)
create table account ( id int primary key auto_increment, name varchar(20), money double);insert int ...
- 通过一步步创建sharded cluster来认识mongodb
mongodb是目前使用非常广泛的nosql(not only sql)之一,在db engines上排名非常靠前,下图是5月份的排名: 可以看到前面四个都是传统的关系型数据库,而mongodb在no ...
- 深入Java集合学习系列:Hashtable的实现原理
第1部分 Hashtable介绍 和HashMap一样,Hashtable也是一个散列表,它存储的内容是键值对(key-value)映射.Hashtable继承于Dictionary,实现了Map.C ...