js、jquery对节点的操作(增、删)
js对节点的操作方法
一.获取
1.父节点的获取
某节点的parentNode属性值即为该节点的父节点。示例:
var parent = document.getElementById("one").parentNode;
2.兄弟节点的获取
nextElementSibling和nextSibling属性配合使用。
某节点的nextElementSibling属性值是该节点后面紧邻的兄弟节点,但是这个有兼容性,在ie9以上版本(包含ie9)和其他浏览器,结果是我们想要的弟节点,在ie9以下的结果是文本节点,不满足我们的要求。而nextSibling属性,在ie9以下版本的结果是我们想要的弟节点,在ie9以上版本(包含ie9)和其他浏览器结果是文本节点,和nextElementSibling刚好相反。可以通过配合使用这两个属性来满足需求。示例:
var one = document.getElementById("one");
var oneNextNode = one.nextElementSibling || one.nextSibling;
与后面紧邻的兄弟节点对应的是前面紧邻的兄弟节点,previousElementSibling和previousSibling配合使用即可获得。示例:
var one = document.getElementById("one");
var onePreNode = one.previousElementSibling || one.previousSibling;
3.子节点的获取
某节点的children属性值就是该元素的所有的元素子节点。示例:
var one = document.getElementById("one");
var sons = one.children;
二.节点的添加、删除、克隆方法
1.子节点的添加
添加子节点的思路是先创建一个节点,然后添加到指定位置即可。
创建节点的方法是固定的,利用document.createElement(xxx)方法,传入元素名即可创建一个指定元素名的元素。
如 var newDiv=document.createElement("div");
把节点插入到父节点中有两种方法appendChild()和insertBefore()。
appendChild()方法由父节点调用,参数传一个待插入到父节点的子节点,这种方法会把该子节点插入到父节点的最后面,也就是说插入操作完成后这个子节点会是最后的子节点。示例:
var one = document.getElementById("one");
var newDiv = document.createElement("div");
one.appendChild(newDiv);
insertBefore()方法也是由父节点调用,可以把一个子节点插入到我们指定的位置。方法有两个参数,第一个参数是要插入的子节点,第二个参数就是我们指定的、将要在其前面插入节点的子节点。特殊的,如果第二个参数传null,则效果等同于appendChild(),即将把新的子节点插入到最后。示例:
var one = document.getElementById("one");//此处one是父节点,如果不好直接获得的话,也可以通过子节点的parentNode获得
var newDiv = document.createElement("div");
one.insertBefore(newDiv , one.children[0]);
2.子节点的删除
对应的方法是removeChild(),由父节点调用,参数传要删除的子节点。示例:
var one = document.getElementById("one");//此处one是父节点
one.removeChild(one.children[0]);
3.节点的复制
对应的方法是cloneNode(),由要复制的节点调用,方法可以传一个布尔型参数,如果传true的话,表示不仅仅会复制选定的节点,也会复制此节点的所有子节点;如果传false或者不传的话,则仅会复制该节点。复制节点一般不会单独使用,不会单纯为了复制而复制,复制出来后得放到某个位置啊,所以一般会结合添加节点使用。示例:
var divs = document.getElementByTagName("div");
var cloneDiv = divs[0].cloneNode();
document.getElementById("one").parentNode.appendChild(cloneDiv);
jquery对节点的操作方法
1.获取父节点:parent()方法
2.获取所有子节点:children()方法
1.创建节点,先写好html内容,然后直接用$()包裹就好,注意到时候把html内容中的双引号变成单引号。示例:
var $newDiv = $("<div id='two'></div>");
2.复制节点:clone()方法,由要复制的节点对应的jQuery对象调用,参数可传一个布尔值,true表示连带着子节点也一起复制,false或不传表示不复制子节点。示例:
$("#two").clone();
2.向某节点内部的最后添加节点,使添加的节点成为原来节点的最后一个子节点:append()方法,由父节点对应的jQuery对象调用,参数是子节点对应的jQuery对象。示例:
$("#one").append($newDiv);
与之能达到相同目的的方法是appendTo(),把某一个节点添加到某个节点内部的最后面。和append()方法相比,只是调用者和参数调换了一下而已。示例:
$newDiv.appendTo($("#one"));
3.prepend()、prependTo(),使用同append()、appendTo()一样,只是把最后面变成最前面。
4.在某节点的后面添加节点,使新添加的节点成为原来节点的弟节点:after()方法,由兄节点调用,参数是弟节点。示例:
$("#bigBro").after($("#littleBro"));
与之能达到相同目的的方法是insertAfter(),把某一个节点添加到某个节点的后面。和after()方法相比,只是调用者和参数调换了一下而已。示例:
$("#littleBro").insertAfter($("#bigBro"));
5.before()、insertBefore(),使用同after()、insertBefore()一样,只是把后面变成前面,新节点是兄节点。
6.删除节点:remove(),由要删除的节点对应的jQuery对象调用调用
7.清空节点:empty(),由要清空的节点对应的jQuery对象调用调用
8.获取上一个节点:prev()
9.获取下一个节点:next(),效果等同于js的one.nextElementSibling || one.nextSibling
10.获取所有兄弟节点:siblings(),同一个父亲哦
js、jquery对节点的操作(增、删)的更多相关文章
- JavaScript---Dom树详解,节点查找方式(直接(id,class,tag),间接(父子,兄弟)),节点操作(增删改查,赋值节点,替换节点,),节点属性操作(增删改查),节点文本的操作(增删改查),事件
JavaScript---Dom树详解,节点查找方式(直接(id,class,tag),间接(父子,兄弟)),节点操作(增删改查,赋值节点,替换节点,),节点属性操作(增删改查),节点文本的操作(增删 ...
- jQuery -- DOM节点的操作
DOM 操作的分类: dom core: getElementById() getElementsByTagName() getAttribute() setAttribute() html-dom ...
- django单表操作 增 删 改 查
一.实现:增.删.改.查 1.获取所有数据显示在页面上 model.Classes.object.all(),拿到数据后,渲染给前端;前端通过for循环的方式,取出数据. 目的:通过classes(班 ...
- Jquery Dom节点常用操作
select 标签 form提交的时候 提交select标签选中的value值 1. 添加项 $("#select_id").append("<option val ...
- jQuery 中使用 DOM 操作节点,对页面中的表格实现增、删、查、改操作
查看本章节 查看作业目录 需求说明: 在 jQuery 中使用 DOM 操作节点,对页面中的表格实现增.删.查.改操作 点击"增加"超链接时,将表格中的第一条数据添加到表格的末尾 ...
- 原生JS添加节点方法与jQuery添加节点方法的比较及总结
一.首先构建一个简单布局,来供下边讲解使用 1.HTML部分代码: <div id="div1">div1</div> <div id="d ...
- JS添加节点方法与JQuery添加节点方法的比较及总结
原生JS添加节点方法与JQuery添加节点方法的比较及总结 一.首先构建一个简单布局,来供下边讲解使用 1.HTML部分代码: <div id="div1">div ...
- 事件冒泡、事件委托、jQuery元素节点操作、滚轮事件与函数节流
一.事件冒泡定义 事件冒泡是指在一个对象触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那 ...
- 从JS和jQuery浅谈DOM操作,当我们在获取时,究竟获取了什么
0.写在前面的话 自己对前端的东西一直不是很熟,现在开始要想办法从前端各个地方去获取想要的属性值的时候,也基本是在网上现炒现卖,几周下来,发现自己还是迷迷糊糊,可以算是一无所获. 所以就抽时间,把这一 ...
随机推荐
- C#中 如何执行带GO的sql 语句
C#中是不允许执行带GO的sql 语句的, 如何做呢? 思路就是将带GO的sql语句转化为分段执行, 但在同一事务内执行. 扩展方法是个很不错的主意, 但是尽量不要影响原来的cmd的一些东东, 如 c ...
- Debian下的'aptitude update'失败处理
Hit http://ftp.us.debian.org squeeze/contrib amd64 Packages Hit http://download.proxmox.com squeeze/ ...
- Android RecyclerView体验(一)- 简介
在网上关于RecyclerView的基本使用方式已经有了比较详细介绍,而且其设计结构也类似于ListView,所以本文将不重点介绍如何使用,在文末的引用中都可以相关内容.这里主要是介绍Recycler ...
- 用CATransform3D实现3D效果和制作简单3D动画
我们先来看下CATransform3D的头文件 struct CATransform3D { CGFloat m11, m12, m13, m14; CGFloat m21, m22, m23, m2 ...
- Url以.(点)结尾,在使用httpwebrequest读取的时候,微软会有一个bug……
解决方法在此,不重复做赘述,传送门:http://stackoverflow.com/questions/856885/httpwebrequest-to-url-with-dot-at-the-en ...
- php文件上传及头像预览
php文件上传原理是通过form表单的enctype="multipart/form-data"属性将文件临时放到wamp文件夹中的tmp目录下,再通过后台php 程序将文件保存在 ...
- “System.FormatException”类型的异常在 mscorlib.dll 中发生,但未在用户代码中进行处理 其他信息: 该字符串未被识别为有效的 DateTime。
前台用过jquery ajax将值传递到 后台的一般处理程序 并且报了这个异常 原因是:前台传递过来的时间格式不对 需要把 "/"换成 "-" 例如:20 ...
- 三、spark入门:文本中发现5个最常用的word,排除常用停用词
package com.yl.wordcount import java.io.File import org.apache.spark.{SparkConf, SparkContext} impor ...
- Django 同步数据库命令syncdb,makemigrations,migrate
syncdb只支持新增模型到数据库中 2条命令 你将使用2条命令进行迁移和操纵数据库schema: migrate,用来使迁移生效,以及未生效时报告它们的状态. makemigrations,用来根据 ...
- [Q]打印机页边距设置
问题描述:当您在使用CAD批量打图精灵默认设置打印图纸(使用pdfFactory虚拟打印机),可能会发现打印出的图纸页边距比您手工打印(使用Adobe或系统打印机)的要偏大. Adobe虚拟打印机打印 ...