对于(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. TCP连接建立系列 — 客户端接收SYNACK和发送ACK

    主要内容:客户端接收SYNACK.发送ACK,完成连接的建立. 内核版本:3.15.2 我的博客:http://blog.csdn.net/zhangskd 接收入口 tcp_v4_rcv |--&g ...

  2. Java遍历时删除List、Set、Map中的元素(源码分析)

    在对List.Set.Map执行遍历删除或添加等改变集合个数的操作时,不能使用普通的while.for循环或增强for.会抛出ConcurrentModificationException异常或者没有 ...

  3. Android反编译 -- 错误代码还原

    PS:如果阅读体验不好,可以尝试Github版 (<-点左边) 1. setColor(-16777216) 反编译的代码中会有很多setColor(int)的情况,比如setColor(-16 ...

  4. Andriod Studio科普篇——3.关于gradle插件的常见问题

    1.andriod gradle插件版本过低. 出错位置: dependencies{ classpath 'com.android.tools.build:gradle:0.10.2' } 提示信息 ...

  5. Android进阶(二十三)Android开发过程之实例讲解

    Android开发过程之实例讲解 前言 回过头来审视之前做过的Android项目,发觉自己重新开发时忽然间不知所措了,间隔了太长时间没有开发导致自己的Android技能知识急剧下降.温故而知新. 废话 ...

  6. JAVA之旅(十七)——StringBuffer的概述,存储,删除,获取,修改,反转,将缓存区的数据存储到数组中,StringBuilder

    JAVA之旅(十七)--StringBuffer的概述,存储,删除,获取,修改,反转,将缓存区的数据存储到数组中,StringBuilder 讲完String,我们来聊聊他的小兄弟 一.StringB ...

  7. Gradle 笔记——Java构建入门

    Gradle是一个通用的构建工具,通过它的构建脚本你可以构建任何你想要实现的东西,不过前提是你需要先写好构建脚本的代码.而大部分的项目,它们的构建流程基本是一样的,我们不必为每一个工程都编写它的构建代 ...

  8. Mybatis事务(一)事务管理方式

    Mybatis管理事务是分为两种方式: (1)使用JDBC的事务管理机制,就是利用java.sql.Connection对象完成对事务的提交 (2)使用MANAGED的事务管理机制,这种机制mybat ...

  9. XBMC源代码分析 6:视频播放器(dvdplayer)-文件头(以ffmpeg为例)

    XBMC分析系列文章: XBMC源代码分析 1:整体结构以及编译方法 XBMC源代码分析 2:Addons(皮肤Skin) XBMC源代码分析 3:核心部分(core)-综述 XBMC源代码分析 4: ...

  10. MSRDS机器人仿真软件学习资源汇总

    这款机器人仿真软件支持winxp,7,8,10操作系统. 最简洁快速的学习资源主要在helloapps上, 使用spl可以获得丰富的支持,如C#, Java, Python, MATLAB, LabV ...