JS节点操作(JS原生+JQuery)
JavaScript与JQuery节点操作
节点关系与类型
任何HTML元素,都有nodeType属性。值有1~12,常用的有:
1.元素节点
2.文本节点
8.注释节点
9.document节点(HTML文档对象)
10.DTD(文档类型定义)
box.nodeType //返回值1,获得nodeType属性
box.childNodes //获得全部子元素 //兼容性问题 注意:在chrome,IE9 IE10高版本的浏览器里面的回车都认为是节点,IE6,7,8低版本的浏览器不算,高版本浏览需遍历筛选
box.parentNode //查找父节点
prevs.previousSibling //查找上一个兄弟元素
prevs.nextSibling //查找下一个兄弟元素
(注意,这两个元素childNodes一样,拥有兼容性问题)
可以先遍历然后进行筛选取得元素
例:
var p=document.getElementById('p');
var prevs = p;
while(prevs =prevs.previousSibling){ //通过while循环遍历元素
if(prevs.nodeType == 1){ //使用nodeType属性进行筛选元素
prevs.style.background = 'red'; //得到上一个元素后进行操作
}
}
var nexts =p;
while(nexts = nexts.nextSibling){ //同理查找下一个元素也一样
if(nexts.nodeType == 1){
nexts.style.background ='blue';
}
}
JQuery节点关系
$('.box').children(); //获得所有子元素,屏蔽兼容性问题,不用考虑兼容性问题,可以传递一个参数,对子元素进行筛选
$('p').find(); //查找所有子元素及子元素得后代,先找到的第一个元素排0,以此类推,和children一样可以传递一个参数,进行筛选
$('p').parent(); //查找父元素,任何元素只有一个父元素
$('p').parents(); //查找所有祖先节点
siblings(); //查找所有兄弟元素 可以传递参数(选择器,筛选器)进行筛选
prev()、next()、prevAll()、nextAll()
//前一个、后一个兄弟、前所有兄弟、后所有兄弟
总结:JQuery屏蔽所有的不兼容,只选择nodeType=1的元素,不选择文本。注释等等并且不用for循环,一次性得到所有东西
JavaScript节点操作
var oLi = document.createElement("li"); //添加节点
ul.appendChild(oLi);把新节点,追加到元素中
box.innerHTML ='<p>Hello word!</p>'; //也可以通过这种方式添加一个标签
ul.insertBefore(新元素,原有元素); //将新元素插入到指定元素之前
list.removeChild(oldchild); //删除元素,必须找到父元素才能进行删除,可以使用parentNode查找父元素
父节点.replaceChild(新节点,原节点); //替换节点
box.appendChild(p.cloneNode(true)); //克隆节点,true表示克隆全部(属性与子节点),默认克隆单个节点
JQuery节点操作
$('.box').append('<p>Text5<p>');//添加节点,无需createElement创建节点,相当于使用innerHTML直接添加
$("<p>Text6</p>").appendTo('.box'); //表示被动添加,即与append相反,将子节点添加到父节点
$('.box').prepend("<p>Text7</p>"); //将节点添加到第一位
$("<p>Text7</p>").prependTO('.box'); //表示被动,将节点添加到第
$('#p').after("<h3>这是H3</h3>"); //插入兄弟节点,插入之后
$('#p').before("<h4>这是H4</h4>"); //插入兄弟节点,插入之前
$('<p>Text11</p>').insertBefore($('p')[2]); //被动,插入兄弟节点,插入之前
$('<p>Text22</p>').insertAfter($('p')[2]); //被动,插入兄弟节点,插入之后
$('a').wrap("<b></b>");使用b标签包裹起来
$('a').wrapAll("<b></b>"); //全部使用b标签包裹起来
$('.box').empty(); //删除(清空)所有内容
$('p').remove(); //删除页面所有的p标签
$('.box').append($('p').eq(0).clone()); //克隆节点,并添加
JS节点操作(JS原生+JQuery)的更多相关文章
- js节点操作实例
写了一个简单的小例子来引用js实例 1. 初步节点操作: 2.兼容性节点操作: 3.节点的类型,名字: 4.使用setAttribute设置属性 5.节点复制操作: 6.删除和替换节点 如有错误,还望 ...
- js节点操作
在看<javascript高级程序设计>,看到节点操作这一块,觉得我只知道用appendChild(),太肤浅了,记录下学到的东西. 每个节点都有一个 parentNode 属性,该属性指 ...
- 原生JS节点操作
获取子节点 1. children 不是标准的dom属性,但是几乎被所有浏览器支持.获取子元素的元素节点(只包括元素节点) 注意:在IE中,children包含注释节点. 2. childNodes ...
- 节点操作js jQuery
append() - 在被选元素的结尾插入内容 prepend() - 在被选元素的开头插入内容 after() - 在被选元素之后插入内容 before() - 在被选元素之前插入内容 functi ...
- js 节点操作
添加和删除节点(HTML 元素). 创建新的 HTML 元素 如需向 HTML DOM 添加新元素,您必须首先创建该元素(元素节点),然后向一个已存在的元素追加该元素. 实例 <div id=& ...
- 原生JS和jQuery中基本的节点操作
js中节点操作**document.createElement()**用来生成网页元素节点,参数为元素的标签名: **document.createTextNode()**用来生成文本节点,参数为所要 ...
- 原生JS的使用,包括jquery和原生JS获取节点、jquery和原生JS修改属性的比较
一.前言 相比于JS这条直达终点.满是荆棘的小路,jquery无疑是康庄大道了,足够的简洁.易用给了它辉煌的地位.然而,毕竟是绕着道的插件,当小路走着走着变成大路的时候,曾经的大路也就失去了他自身的优 ...
- jquery实现点击展开列表同时隐藏其他列表 js 对象操作 对象原型操作 把一个对象A赋值给另一个对象B 并且对象B 修改 不会影响 A对象
这篇文章主要介绍了jquery实现点击展开列表同时隐藏其他列表的方法,涉及jquery鼠标事件及节点的遍历与属性操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下 本文实例讲述了jquery实现点击 ...
- js进阶 11-9/10/11 jquery创建和插入节点
js进阶 11-9/10/11 jquery创建和插入节点 一.总结 一句话总结: 1.jquery插入节点8个方法? 内部之前,内部之后,之前,之后:各两个 append()和appendTo() ...
随机推荐
- vue之webpack打包工具的使用
vue之webpack打包工具的使用 一.什么是webpack? webpack是一个模块打包工具.用vue项目来举例:浏览器它是只认识js,不认识vue的.而我们写的代码后缀大多是.vue的,在每个 ...
- 【poj3764】The xor-longest Path
The xor-longest Path Description In an edge-weighted tree, the xor-length of a path p is defined as ...
- D-温暖的签到题
链接:https://ac.nowcoder.com/acm/contest/892/D 题意: 给你一个长度为n的序列,初始为1,2,3...n,对其进行m次操作. 操作有两种: 1 l r 表示 ...
- 关于EasyML的使用
一.安装IntelliJ Idea 具体安装过程比较简单.但是遇到一个问题,如今LInux版本的IntelliJ的安装需要jdk1.8及以上版本的支持,但是EasyML目前仅支持jdk1.7的环境. ...
- String 中配置文件详解
<context:component-scan>使用说明 http://blog.csdn.net/chunqiuwei/article/details/16115135
- spring基础概念AOP与动态代理理解
一.代理模式 代理模式的英文叫做Proxy或Surrogate,中文都可译为”代理“,所谓代理,就是一个人或者一个机构代表另一个人或者另一个机构采取行动.在一些情况下,一个客户不想或者不能够直接引用一 ...
- Eclipse Debug时出现Source not found错误
今天在Debug Java代码时报出了Source not found这个错误,如下图所示,经过查询资料得知这是由于缺少Hadoop源程序代码所导致的错误. 在此我建议了两种方法,可以先采用方法一,这 ...
- 机器学习框架ML.NET学习笔记【9】自动学习
一.概述 本篇我们首先通过回归算法实现一个葡萄酒品质预测的程序,然后通过AutoML的方法再重新实现,通过对比两种实现方式来学习AutoML的应用. 首先数据集来自于竞赛网站kaggle.com的UC ...
- springboot springmvc 抛出全局异常解决方法
springboot中抛出异常,springboot自带的是springmvc框架,这个就不多说了. springmvc统一异常解决方法这里要说明的是.只是结合了springboot的使用而已.直接上 ...
- Linux环境 Java内存快速查看
最近生产环境遇到内存老是占用很大的情况,16G的内存Free的内存只剩100多M,仿佛一颗定时炸弹一般,说不定就服务Down了.于是开始网上不断的找查看内存使用的方法.现学现卖,以下通过一个例子来演示 ...