1.创建元素 文本节点


JavaScript:

document.createElement(),只接收一个参数,创建后需要手动将其添加到文档树中,例如:

var newDiv = document.createElement("div");
if(document.body){
  document.body.appendChild(newDiv);
}else{
  document.documentElement.appendChild(newDiv);
}

document.createTextNode(),只接收一个参数,即要插入节点的文本;

jquery:直接$("<div></div>),或者下面:

  • wrap()   // $A.wrap('B')即元素A层添加B类型的HTML结果
<div class="container">
<div class="inner">Hello</div>
<div class="inner">Goodbye</div>
</div>
$('.inner').wrap('<div class = "new"/>');

结果:
  <div class="container">
    <div class="new">
      <div class="inner">Hello</div>
    </div>
    <div class="new">
      <div class="inner">Goodbye</div>
    </div>
  </div>
  • wrapAll()  //所创建的new <div>包裹了所有匹配的元素:
<div class="container">
<div class="inner">Hello</div>
<div class="inner">Goodbye</div>
</div>
$('.inner').wrapAll('<div class="new" />');

 结果: 
  <div class="container">
   <div class="new">
    <div class="inner">Hello</div>
    <div class="inner">Goodbye</div>
   </div>
   </div>
  • wrappInner() // $A.wrapInner('B')即元素A层添加B类型的HTML结果
<div class="container">
<div class="inner">Hello</div>
<div class="inner">Goodbye</div>
</div>
$('.inner').wrapInner('<div class="new" />');

 结果:
  <div class="container">
    <div class="inner">
      <div class="new">Hello</div>
    </div>
    <div class="inner">
      <div class="new">Goodbye</div>
    </div>
  </div>

2.节点关系及操作


JavaScript:

父节点:parentNode

子节点:childNodes

兄弟节点:nextSibling,previousSibling

相关操作:

  • appendChild()  向子节点列表的末尾添加新的子节点
  • insetBefore()    已有子节点之前插入一个新的子节点
  • replaceChild()  替换节点
  • removeChild()  删除节点
  • cloneNode(true/false)  复制节点

jquery:(比较多选择,详情看http://www.css88.com/jqapi-1.9/手册)

父元素:parent()  parents()

子元素:children()

兄弟节点:next()  nextAll()  prev()  prevAll()  siblings()......

相关操作:

  节点内部插入,插入的内容变子节点

  • append()  appendTo()  向子节点列表的末尾添加新的子节点,注意这两个内容和目标的位置不同,刚好相反
  • prepend() prependTo() 已有子节点之前插入一个新的子节点,注意这两个内容和目标的位置不同,刚好相反

  节点外部插入,插入的内容变兄弟节点

  • after()  before() 
  • insertAfter() insertBefore()
  • replaceAll() replaceWith()  功能类似,但是目标和源相反
  • remove() detach() 这两个相似,都是移除元素,后者不会移除绑定的事件及与该元素相关的jQuery数据
  • empty()  不接受任何参数。不仅移除子元素(和其他后代元素),同样移除元素里的文本
  • clone(flase/true) 深度复制所有匹配的元素集合,包括所有匹配元素、匹配元素的下级元素、文字节点。和原生JavaScript不同,这里的false/true表示是否会复制元素上的事件处理函数,而原生的表示深克隆还是浅克隆

常见的dom操作----原生JavaScript与jQuery的更多相关文章

  1. 四种常见的提示弹出框(success,warning,error,loading)原生JavaScript和jQuery分别实现

    原文:四种常见的提示弹出框(success,warning,error,loading)原生JavaScript和jQuery分别实现 虽然说现在官方的自带插件已经有很多了,但是有时候往往不能满足我们 ...

  2. 原生 JavaScript 代替 jQuery【转】

    目录 用原生JavaScript代替jQuery Query Selector CSS & Style DOM Manipulation Ajax Events Utilities Promi ...

  3. jQuery选择器和DOM操作——《锋利的jQuery》(第2版)读书笔记1

    第1章 认识jQuery jQuery有以下优势: 轻量级: 强大的选择器: 出色的DOM操作的封装: 可靠的事件处理机制: 完善的Ajax: 不污染顶级变量: 出色的浏览器兼容性: 链式操作方式: ...

  4. jQuery中的DOM操作——《锋利的JQuery》

    jQuery封装了大量DOM操作的API,极大提高了操作DOM节点的效率. 1.查找节点 通过我们上一节介绍了JQuery选择器,可以非常轻松地查找节点元素.不过,这时得到的是jQuery对象,只能使 ...

  5. jQuery学习之路(7)- 用原生JavaScript实现jQuery的某些简单功能

    ▓▓▓▓▓▓ 大致介绍 学习了妙味,用原生的JavaScript实现jQuery中的某些部分功能 定义自己的函数库lQuery ▓▓▓▓▓▓ $()选择器的实现 jQuery是面向对象的,所以自己编写 ...

  6. 表单美化-原生javascript和jQuery单选按钮(兼容IE6)

    最近很多人问怎么美化表单的元素,大家都知道表单元素在各个浏览器中的表现不一,反正也是特别的丑,那么问题就来了,我们能自己设计表单元素的外观么?答案是可以的,现在我们就来试试吧.我们用两种方式来实现这一 ...

  7. 原生javascript与jquery 的比较

    JavaScript的优点和缺点: 优点: 性能:由于JavaScript运行在客户端,节省了web服务器的请求时间和带宽 轻量级的脚本语言,比较容易学习 运行在用户机器上,运行结果和处理相对比较快. ...

  8. 原生JavaScript实现jQuery的hasClass,removeClass,addClass,toggleClass

    介绍: 1.hasClass:判断DOM元素是否存在类. 2.addClass:为的DOM元素添加类. 3.removeClass:删除DOM元素的类. 4.toggleClass:如果DOM元素存在 ...

  9. 原生javascript和jquery实现简单的ajax例子

    后台C#代码 public void ProcessRequest(HttpContext context) { context.Response.ContentType = "text/p ...

随机推荐

  1. Python文件读写模式

    r 打开只读文件,该文件必须存在. r+ 打开可读写的文件,该文件必须存在.可读,可写,可追加. w 打开只写文件,若文件存在则文件长度清为0,即该文件内容会消失.若文件不存在则建立该文件. w+ 打 ...

  2. 如何科学地蹭热点:用python爬虫获取热门微博评论并进行情感分析

    前言:本文主要涉及知识点包括新浪微博爬虫.python对数据库的简单读写.简单的列表数据去重.简单的自然语言处理(snowNLP模块.机器学习).适合有一定编程基础,并对python有所了解的盆友阅读 ...

  3. ubuntu远程桌面介绍

    一.windows远程ubuntu14.04 由于xrdp.gnome和unity之间的兼容性问题,在Ubuntu 14.04版本中仍然无法使用xrdp登陆gnome或unity的远程桌面,现象是登录 ...

  4. 通过js修改网页内容

    js可以通过文本所在标签的id获取该标签对象,然后修改其内容,如: document.getElementById('标签id').innerHTML = '要修改的文本内容'; 该方法可以在要修改的 ...

  5. Scala 运算符和集合转换操作示例

    Scala是数据挖掘算法领域最有力的编程语言之一,语言本身是面向函数,这也符合了数据挖掘算法的常用场景:在原始数据集上应用一系列的变换,语言本身也对集合操作提供了众多强大的函数,本文将以List类型为 ...

  6. linux_base_commond_one

    1.cd commond a. cd usr 切换到该目录下usr目录  b. cd ../ 切换到上一层目录  c.cd / 切换到系统根目录  d. cd ~ 切换到用户主目录 e. cd - 切 ...

  7. Linux“体检”指标

    * { color: #3e3e3e } body { font-family: "Helvetica Neue", Helvetica, "Hiragino Sans ...

  8. 中秋H5,这篇脑洞开的可以!

    案例:嫦娥--寻开心出品:凯迪仕 1.内容:这是一支视频类H5案例.Loading完毕进入页面,首屏提示案例最佳观看方式为先锁屏再横屏.点击开始按钮播放视频,视频讲述"葫芦娃"缠着 ...

  9. UWP上可用的GB2312编码

    大概是在WP8的时候,网上有一个WP8可用的GB2312编码的解决方法,就是那个DBCSCodePage. 但是由于UAP开始,微软删掉了GetManifestResourceStream,所以这东西 ...

  10. [转]pycharm快捷键

    开始学习python用的ide是pycharm,之前做java一种用eclipse,刚开始使用pycharm快捷键与eclipse有很大不同,慢慢适应中. 下面列举了下pycharm的快捷键,内容转自 ...