对于(1)中最后一个包装方式创建的是一个方法,我们必须以方法调用的方式来使用它,这和其他默认的以属性返回结果略有不同,如果有强迫症的童鞋有些伤不起,那么我们下面就把它实现为属性返回的方式:

//children是默认属性,遂起一个中文糊糊的名字 :)
HTMLElement.prototype = {
  get: function childrens(){
     var elts = [];
    for(let elt = this.firstChild;elt!=null;elt=elt.nextSibling){
      elts.push(elt);
    }
    return elts;
  }
}

my_p.childrens;

我们还可以用看上去更优雅的方式:

//在一个函数内部调用以撇清全局对象空间
(function(){
  function get_childrens(){
     var elts = [];
    for(let elt = this.firstChild;elt!=null;elt=elt.nextSibling){
      elts.push(elt);
    }
    return elts;
  }

  //甚至我们可以写一个setter方法:
  function set_childrens(new_childrens){
    //实现略 :)
  }

  if(Object.defineProperty){
    Object.defineProperty(Element.prototype,"childrens2",{
      get:get_childrens,
      set:set_childrens,
      enumerable:false,configurable:true
    });
  }
  else{
    Element.prototype.__defineGetter__("childrens2",get_childrens);
    Element.prototype.__defineSetter__("childrens2",set_childrens);
  }
})();
my_p.childrens2

javascript访问html元素的内容(2)的更多相关文章

  1. javascript访问html元素的内容(1)

    形如如下格式的html元素: <p id="my_p">I'm <strong>BIG</strong> panda!!!</p> ...

  2. jquery 与javascript关系 ①取元素 ②操作内容 ③操作属性 ④操作 样式 ⑤ 事件 点击变色

    jQuery的min版本和原版功能是一样的,min版主要应用于已经开发成的网页中,而非min版 的文件比较大,里面有整洁的代码书写规范和注释,主要应用于脚本开发过程当中. JQuery是继protot ...

  3. 2016/4/1 jquery 与javascript关系 ①取元素 ②操作内容 ③操作属性 ④操作 样式 ⑤ 事件 点击变色

    jQuery的min版本和原版功能是一样的,min版主要应用于已经开发成的网页中,而非min版 的文件比较大,里面有整洁的代码书写规范和注释,主要应用于脚本开发过程当中. JQuery是继protot ...

  4. 12.HTML DOM 允许 JavaScript 改变 HTML 元素的内容。

    1,改变 HTML 输出流 <script> document.write(Date()); </script> 2,改变 HTML 内容 <script> doc ...

  5. jQuery学习-访问设置元素内容

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  6. Jquery取得iframe中元素的几种方法Javascript Jquery获取Iframe的元素、内容或者ID

    query取得iframe中元素的几种方法 在iframe子页面获取父页面元素代码如下: $('#objId', parent.document);// 搞定... 在父页面 获取iframe子页面的 ...

  7. javascript中DOM获取和设置元素的内容、样式及效果

    getElementById() 根据id获取dom元素 没有找到则返会Null <!DOCTYPE html> <html lang="en"> < ...

  8. JavaScript HTML DOM 元素(节点)

    JavaScript HTML DOM 元素(节点) 创建新的 HTML 元素 创建新的 HTML 元素 如需向 HTML DOM 添加新元素,您必须首先创建该元素(元素节点),然后向一个已存在的元素 ...

  9. js与DOM初步:访问html元素

    1.DOM简介 DOM= Document Object Model,文档对象模型,DOM可以以一种独立于平台和语言的方式访问和修改一个文档的内容和结构.换句话说,这是表示和处理一个HTML或XML文 ...

随机推荐

  1. OpenMP与MPI联合编程

    研究一下如何一起使用mpi和openmp 先上程序: #include <stdio.h> #include <stdlib.h> #ifdef _OPENMP #includ ...

  2. 3.Lucene3.x API分析,Director 索引操作目录,Document,分词器

     1  Lucene卡发包结构分析 包名 功能 org.apache.lucene.analysis Analysis提供自带的各种Analyzer org.apache.lucene.colla ...

  3. Django使用forms来实现评论功能

    貌似Django从版本1.6开始就放弃了对自带的comments的使用,具体原因未查,但是现在使用Django的内部的模块也可以实现评论功能,那就是借助于forms模块,下面是我的一个小例子. 环境准 ...

  4. 4、Android UI测试

    为你的APP进行UI测试是为了确保不出现意料之外的结果,提升用户的体验.如果你需要验证你的APP UI的正确性,你需要养成创建UI测试的习惯. Espresso测试框架是由Android Testin ...

  5. Android初级教程进程间的通信AIDL

    在介绍跨程序进程间通信AIDL前,先看一下本程序activity与某个服务是怎么绑定在一起进行交互的. 需求:服务有两个方法.分别是播放音乐与停止播放音乐.该程序的活动要访问这两个方法,在activi ...

  6. android PakageManagerService启动流程分析

    PakageManagerService的启动流程图 1.PakageManagerService概述 PakageManagerService是android系统中一个核心的服务,它负责系统中Pac ...

  7. APACHE,NGINX 详细分析

    Apache是目前最流行的Web应用服务器,占据了互联网应用服务器70%以上的份额.Apache能取得如此成功并不足为奇:它免费.稳定且性能卓越:但Apache能取得如此佳绩的另一个原因是,当时互联网 ...

  8. 【一天一道LeetCode】#88. Merge Sorted Array

    一天一道LeetCode 本系列文章已全部上传至我的github,地址:ZeeCoder's Github 欢迎大家关注我的新浪微博,我的新浪微博 欢迎转载,转载请注明出处 (一)题目 Given t ...

  9. DB 查询分析器 方便地创建DB2自定义函数

    DB 查询分析器 方便地创建DB2自定义函数                           马根峰            (广东联合电子服务股份有限公司, 广州 510300) 摘要       ...

  10. Oracle PL/SQL Articles

    我是搬运工....http://www.oracle-base.com/articles/plsql/articles-plsql.php Oracle 8i Oracle 9i Oracle 10g ...