当前位置: 首页 > 编程日记 > 正文

Javascript及Jquery获取元素节点以及添加和删除操作

用了javascript和jquery很久,把所有元素节点的操作总结了下,放在博客上作为记录。

Javascript获取元素的主要方式有三种

1、document.getElementById('main'):表示从document中查找一个id是main的dom节点。(这个跟$('#main')的作用是一样的)

2、通过名称name选取元素document.getElementsByName("domName")

a. 返回值是一个nodeList集合(区别于Array)

b. 和ID属性不一样,name属性只在少数DOM元素中有效(form表单、表单元素、iframe、img)。这是因为name属性是为了方便提交表单数据而打造的。  

c.为form、img、iframe、applet、embed、object元素设置name属性时,会自动在Document对象中创建以该name属性值命名的属性。所以可以通过document.domName引用相应的dom对象

3、通过标签名选取元素element.getElementsByTagName("tagName")

其中,element是有效的DOM元素(包括document),tagName是DOM元素的标签名。

a. tagName不区分大小写

b. 当tagName为*时,表示选取所有元素(需遵从b.规则)

Jquery选取元素的方法就不多说了,方法非常多,相关的文章和教程也非常多。

Javascript获取父元素或子元素的方法

var a = document.getElementByIdx_x_x("dom");

var b = a.childNodes;   获取a的全部子节点(返回节点的子节点集合,以 NodeList 对象)

这个方法需要注意的是,会出现获取隐藏的节点情况,具体原因,我还没搞清除,不过使用时候留心就可以了。

var c = a.parentNode;   获取a的父节点

var d = a.nextSbiling;   获取a的下一个兄弟节点

var e = a.previousSbiling;获取a的上一个兄弟节点

var f = a.firstChild;    获取a的第一个子节点

var g = a.lastChild;     获取a的最后一个子节点

jQuery获取父元素或子元素的方法

jQuery.parent(expr) 找父亲节点,可以传入expr进行过滤,比如$("span").parent()或者$("span").parent(".class")

jQuery.parents(expr),类似于jQuery.parents(expr),但是是查找所有祖先元素,不限于父元素

jQuery.children(expr).返回所有子节点,这个方法只会返回直接的孩子节点,不会返回孙节点

jQuery.contents(),返回下面的所有内容,包括节点和文本。这个方法和children()的区别就在于,包括空白文本,也会被作为一个jQuery对象返回,children()则只会返回节点

jQuery.prev(),  返回上一个兄弟节点,不是所有的兄弟节点

jQuery.prevAll(),返回所有之前的兄弟节点

jQuery.next(),   返回下一个兄弟节点,不是所有的兄弟节点

jQuery.nextAll(),返回所有之后的兄弟节点

jQuery.siblings(), 返回兄弟姐妹节点,不分前后

jQuery.find(expr),跟jQuery.filter(expr)完全不一样。jQuery.filter()是从初始的jQuery对象集合中筛选出一部分,而jQuery.find()的返回结果,不会有初始集合中的内容,比如$("p"),find("span"),是从p元素开始找,等同于$("p span")

Javascript添加及插入节点

appendChild() 方法:可向节点的子节点列表的末尾添加新的子节点。语法:appendChild(newchild)

insertBefore() 方法:可在已有的子节点前插入一个新的子节点。语法 :insertBefore(newchild,refchild)

replaceChild()方法接受的两个参数是:要插入的节点和要替换的节点。要替换的节点将由这个方法返回并从文档树中被移除,同时由要插入的节点占据其位置。 

注意:并没有insertAfter(),我这种脑洞比较大的人,总是被这个insertAfter坑。。。

在Javascript中,只提供了一种删除节点的方法:removeChild(node)

node 的类型为Node object,是必需的。Node就是希望删除的节点对象。

例子:

document.getElementById("thisNode").οnclick=function(){
this.parentNode.removeChild(this);
}

removeChild() 方法指定元素的某个指定的子节点。

以 Node 对象返回被删除的节点,如果节点不存在则返回 null。

jquery追加元素的几种方法(append()、prepend()、after()、before()、insertAfter()、insertBefore())

jquery的api做的比较好,我直接放图片,Jquery的文档处理

转载于:https://www.cnblogs.com/qixinbo/p/6929652.html

相关文章:

PHP版本发展历史

PHP版本发展历史 PHP1 PHP最初是作为一个快速、实用的工具包出现的。1994年,为了在自己的网站上增加一个小巧而实用的访客追踪系统,Rasmus Lerdorf编写了PHP的雏形程序。这是一个用Perl封装的简单工具。由于使用效果并不理想,Rasmus又用C语…

仅剩一周!!CSDN年终大放血!人人有份的大奖你确定不来?

我们的测评大赛自开展一周以来,已经收到了9位同学的优秀作品,我们的礼品数量远超参加的同学数量,所以现在参与的同学人人有大奖!这获奖的概率也太高了吧!!!还不快参与进来!&#xff…

局域网瘫痪 傀儡主机的DDoS***

接到客户求助,最近进行了一次网络“出诊”。这是一个由傀儡主机的DDos***引发的网络故障,案例比较典型,排错过程也颇曲折。笔者就还原其过程,与大家分享。1.网络环境这个客户是一家化工企业,网络规模不大。十多台交换机…

[hive] hive 内部表和外部表

1.内部表 hive (test1)> create table com_inner_person(id int,name string,age int,ctime timestamp) row format delimited fields terminated by ,; OK Time taken: 0.233 seconds hive (test1)> load data local inpath /opt/hadoop/person.data into table com_inn…

用C#生成随机中文汉字验证码的基本原理

前几天去申请免费QQ号码,突然发现申请表单中的验证码内容换成了中文,这叫真叫我大跌眼镜感到好笑,Moper上的猫儿们都大骂腾讯采用中文验证码。^_^ 我不得不佩服腾讯为了防止目前网络上横行的QQ号码自动注册机而采取中文验证码的手段。仔细想了…

Rust 2020 调查报告出炉,95%的开发者吐槽Rust难学

来源 | CSDN(ID:CSDNnews)编译 | 苏宓头图 | CSDN 下载自东方 IC众多语言中,Rust 作为一款小众的现代系统编程语言,近几年间,接连受到了各大企业的青睐。正如不久前,AWS 开源团队宣布聘用 Rust …

Android中Parcel的分析和使用

http://www.360doc.com/content/13/0419/12/9171956_279433672.shtml

Kubernates集群入门(1)

一、K8s安装准备 1.至少两台主机,一台作为master,一台作为node。两台主机需要关闭防火墙。 #centos6 service stop firewalld && service disable firewalld #centos7 systemctl stop iptables && systemctl disable iptables; 2.两台…

Asp.net 不使用SQLDMO实现数据库备份和还原

今天需要做一个历史数据库,备份还原的程序,就是在sql服务器兴建一个数据库的历史版本的复.手工操作很方便,但是程序来实现我还没做过.上网找资料发现都调用了 SQLDMO 的 SQL COM 来实现. 应为我不想在应用服务器上面引用 COM 组件服务.所以没采取这种方式.打开Sql 联机帮助.发现…

B2B行业网站10种经营模式研究及组合方案

许多人对B2B网站的理解仅停留在企业对企业的在线交易上,认为按照B2B电子商务的概念就应该是在网上进行交易。但目前中国比较成功的B2B网站却并非所有都是在线交易模式,尤其是B2B行业网站,许多都没有做在线交易,更多是以基于交易为…

用户数年增长 300%,BitMax如何把握数字资产时代机遇?

12月22日,在2020 BitMax两周年庆典上,BitMax 创始人兼 CEO 曹晶、BitUniverse 合伙人许志宏、BlockVC 创始人徐英凯、红林集团&红链资本创始人李勇敏等多位区块链行业专家,分享了行业洞察,一同探讨交易所的现状和突围之战、数…

2014 年美国程序员薪资调查

Drdobbs 近期向 2,200 名美国的程序开发人员做了一次调查,调查显示高薪领域的工资随着经济的增长而增长。 “Software Engineer”这个职位,除了在德州和几个其他州之外,没有什么特别的意思,在这几个州用这个职称需要经过评定。在其…

ASP.net 验证码(C#)

ASP.net 验证码(C#) /* Copyright all(c) 2005 ZhongFeng, http://blog.csdn.net/SW515 */ public class ValidateCode : System.Web.UI.Page { private void Page_Load(object sender, System.EventArgs e) { this.CreateCheckCodeImage(GenerateCheckCode()); } #region…

SCCM 2012 SP1系列(十)配置补丁更新-3

自动部署规则SCCM2012中对补丁分发增加了一项新功能—自动部署规则,这功能相当于WSUS的自动审批功能。就是当检测到新的补丁更新后自动进行下载更新动作,然后下发给客户端。其实在大企业中还是建议会对每个更新包进行测试,确定对现有业务没有…

CSDN湘苗培优|保持热情,告别平庸

湘苗培优招生进行中在培优中,遇见更好的自己——CSDN高校俱乐部CSDN湘苗培优随着我国信息产业飞速发展,通过常规灌输式培养出来的学员已经不能够满足企业要求。企业更缺乏的是具备自主学习能力、具备综合解决问题能力的高素质技术人才。高素质技术人才需…

在c#中调用windows脚本的方法

在c#中调用windows脚本的方法 方法1:直接调用CODE: System.Diagnostics.Process proc new System.Diagnostics.Process();proc.StartInfo.FileName"wscript";proc.StartInfo.Arguments" hello.js"; proc.StartInfo.UseShellExecute false;pr…

ie和firefox操作table对象的异同

2019独角兽企业重金招聘Python工程师标准>>> ie和firefox下操作table对象的异同【测试浏览器版本:ie为8,9,firefox为2.0】 1)在ie下,table标签直接使用appendChild增加document.createElement(tr)的行时不显示&#xf…

机器学习和计算机视觉的前20个图像数据集

作者 | Meiryum Ali 翻译 | 火火酱,责编 | 晋兆雨出品 | AI科技大本营头图 | 付费下载于视觉中国计算机视觉使计算机能够理解图像和视频的内容。计算机视觉的目标是使人类视觉系统可以实现任务自动化。计算机视觉任务包括图像采集、图像处理和图像分析。图像数据可以采用不同的…

移动应用开发者应该关注的 Google I/O 两项更新

移动应用开发者看过来,今年 Google I/O 这两项更新能帮上大忙移动应用开发者看过来,今年 Google I/O 这两项更新能帮上大忙。 I/O 的 Keynote 刚刚结束,用户可能为 Google 新的消费产品感到兴奋。但这毕竟是开发者大会,一些面向开…

赠书 | 手把手教你自己动手打造一个智能恒温器

作者 | Yazeed Sabri翻译 | 火火酱,责编 | 晋兆雨出品 | AI科技大本营头图 | 付费下载于视觉中国*文末有赠书福利为了能住得离公司近一点,我就搬进了一套没有温控系统的公寓。因为在芝加哥市区,这个价位的公寓大多都是没有温控系统的,所以我心…

JVM 出了问题 EXCEPTION_ACCESS_VIOLATION

2019独角兽企业重金招聘Python工程师标准>>> # # An unexpected error has been detected by Java Runtime Environment: # # EXCEPTION_ACCESS_VIOLATION (0xc0000005) at pc0x10002c08, pid5972, tid1404 # # Java VM: Java HotSpot(TM) Client VM (11.3-b02 mixe…

转换字符串中汉字为其拼音缩写(C#)

//将指定字符串中的汉字转换为拼音缩写,其中非汉字保留为原字符。 public string GetPinYin( string text){char pinyin;byte[] array;System.Text.StringBuilder sb new System.Text.StringBuilder(text.Length); foreach(char c in text) { pinyin c; …

weblogic线程阻塞性能调优(图解)

转自:http://blog.csdn.net/z69183787/article/details/12647539 声明:出现这个问题有程序方面、网络方面、weblogic设置方面等等原因,此文章主要讲述由于weblogic设置而导致的解决办法。 因为: 1.程序问题,需要项目自…

ASP.net实现无扩展名的URL重写。简单、方便、无需ISAPI

URL重写已经有很多的方法,但是多数都有一个缺点,就是不支持无扩展名的网页。微软提供的方法需要在根目录里面建立jyk的文件夹,然后再建立一个default.aspx的文件,如果您有100名会员的话,这是一个不可想象的事情。 另一…

IDC公布中国深度学习市场综合份额:百度超越Facebook位列第二

近日,权威数据调研机构IDC公布了2020年下半年深度学习框架平台市场份额报告。数据显示,在中国深度学习平台市场综合份额中,Google、百度、Facebook稳居前三,占据70%以上市场份额。其中,百度占比提升3.38%增速第一&…

OpenStack 和 Cloud Foundry

上周我参加了在亚特兰大举行的OpenStack峰会,这是一个非常好的机会去进一步了解Cloud Foundry 和OpenStack ecosystem之间的关系。 在OpenStack阵营里,在讨论PaaS时,“Could Foundry 是不是 OpenStack” ,这个看起来像是一个有争议…

防止IIS文件被下载方法

如何才能防止encry目录下的所有文件被非法下载呢?我们可以应用IIS中的应用程序映射结合ASP.NET中的IHttpHandler自定义权限,把IIS应用程序映射用于所有文件,并将控制权交给我们自己实现的IHttpHandler。 首先添加应用程序映射:打…

转 如何在IOS设备中去掉屏幕上的status bar

引入如何在IOS设备中去掉屏幕上的status bar,即:不显示设备上方的[网络、时间、电池??]条?操作方法一:在-info.list项目文件中,加上“Status bar is initially hidden”选项,并勾选…

倒计时7天!博客之星虚位以待,Macbook等你来拿

也许你陪伴了CSDN一年的时间刚刚写下自己的第二十篇的原创技术博文也许你是陪伴了CSDN近20年风雨的老码农更新了近千百篇的技术文章也许你还在坚持着“技术输出”也许你已经开始封笔也许你刚刚突破粉丝数达到了三位,四位数也许你刚刚申请的博客专家,终于…

UVA 10515 - Powers Et Al.(数论)

UVA 10515 - Powers Et Al. 题目链接 题意:求出m^n最后一位数 思路:因为m和n都非常大,直接算肯定是不行的,非常easy想到取最后一位来算,然后又非常easy想到最后一位不断乘自身肯定会形成周期。而且这个周期还挺短的&am…