JS基础---Dom的基本操作

DOM的增删改查

增:

  1.创建一个元素节点

    document.createElement()

    创建新的<p> 元素:var para=document.createElement("p");

  2.创建一个文本节点

    document.createTextNode()

    var node=document.createTextNode("This is a new paragraph.");

  3.在已存在的元素中追加新元素

    element.appendChild()

    向 <p> 元素追加这个文本节点: para.appendChild(node);

  4.创建属性节点

    document.createAttribute()

  5.在已存在的节点前添加一个新元素

    insertBefore(所要添加的新节点,已存在的节点)

删:

  1.删除节点

    removeChild()

  2.删除属性

    removeAttribute()

  3.替换节点

    replaceChild(要插入的新元素,将被替换的老元素)

  4.复制节点

    cloneNode(true/false)

  true:复制当前节点及子节点

  false:仅复制当前节点

改:

  1.修改html元素的内容

    document.getElementById(id).innerHTML="新内容"

  2.修改元素的属性

    document.getElementById(id).属性="新值"

  或者

    元素节点.setAttribute(属性,值)

  3.修改元素的CSS样式

     document.getElementById(id).style.样式="新值"

查:

  1.通过id查找HTML元素节点

    document.getElementById(元素id)

  2.通过元素的name属性查找HTML元素节点

    document.getElementsByName(元素的name属性)

  3.通过元素标签查找HTML元素节点

     document.getElementsByTagName(元素标签)

  4.获取元素的指定属性节点

    元素节点.getAttribute(元素属性名)

 

附:

 

jQuery DOM的增删改查

增:

  1.创建元素节点

      直接使用$(html)工场函数来创建Dom对象

      var $new=$("<p id="title">创建元素节点</p>")

    2.创建文本节点

      在创建元素节点时,可以一起创建

       3.创建属性节点

      同上

删:

    1. remove() 将该节点及包含的所有后代节点都删除

      2. empty()  清空节点,清空此元素的内容

   3.removeAttr()  删除某个元素的特定属性

   4.removeClass()  移除样式

改:

    1.获取、设置HTML、文本的值

      html()   读取或设置某个元素中的html内容,同 js 中的innerHTML属性

      text()   读取设置某个元素的文本内容,同 js 中的innerText属性

      vue()   可以用来获取和设置元素的值,同 js 中value属性

   2.获取、设置属性

      attr() 只需给该方法传递一个参数,即属性名称

 

      3.获取、设置CSS样式

 

      attr(class , "样式类")   设置样式

      css("样式" , "值")  设置样式

      addClass(“样式类”)   追加样式

      toggle( function(){//显示} , function(){//隐藏} )   交换一组动作

      toggleClass()   控制样式上的重复切换

      hasCLass()   判断元素中是否含有某个class,有则返回true

 

  5.插入节点

      append()    向匹配的元素内部追加内容    

      appendTo()   将匹配的内容追加到

      prepend()  向匹配的元素内部前置内容

      prependTo()   将匹配的元素前置到

      after()   在匹配的元素后插入内容

      insertAfter()   反之

      before()   在匹配的元素前面插入内容

      insertBefore()   反之

    注意:移动节点时,首先是先从文档中删除元素,再将其插入到指定节点

   6.复制节点

      clone(true)   参数为true的话,将同时复制元素中所绑定的事件 

      7.替换节点

      replaceWith()  将匹配内容替换成指定的HTML或者DOM元素

      replaceAll()  指定的内容将全部替换......

    注意:替换后原先绑定的事件将会与被替换的元素一起消失

   8.包裹节点

        wrapAll()   该方法将所有匹配到的元素用一个元素包裹

      wrapInner()   该方法将每一匹配到的元素(包括它的文本节点)都单独用其他结构标记包裹起来

   

    

查:

  直接使用jQuery的选择器查找

 

 

总结:

  老实说原生js很恶心,一个个名字又臭又长,jquery是js的一个库,用来简化Dom操作的,因此jquery在dom操作上很多都和原生用法如出一辙,而且名字又短,所以今后两者使用的时候短而简的方法名就是jquery的方法。

posted @ 2017-10-18 16:54  Vicky_YU  阅读(506)  评论(0编辑  收藏  举报