对于(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. 【Netty源码学习】ChannelPipeline(一)

    ChannelPipeline类似于一个管道,管道中存放的是一系列对读取数据进行业务操作的ChannelHandler. 1.ChannelPipeline的结构图: 在之前的博客[Netty源码学习 ...

  2. Android简易实战教程--第十二话《代码获取手机总运行内存的大小》

    手机RAM存储,类似于电脑的内存.这一篇,对通过代码获取手机总内存大小做详细介绍. 首先,定义一个engine类,这个类功能就是获取进程信息,包括运行的程序个数,系统总内存,系统剩余总内存.本篇先完成 ...

  3. SpringMVC源码分析--容器初始化(五)DispatcherServlet

    上一篇博客SpringMVC源码分析--容器初始化(四)FrameworkServlet我们已经了解到了SpringMVC容器的初始化,SpringMVC对容器初始化后会进行一系列的其他属性的初始化操 ...

  4. 浅谈C++中的友元关系

    在封装中C++类数据成员大多情况是private属性:但是如果接口采用多参数实现肯定影响程序效率:然而这时候如果外界需要频繁访问这些私有成员,就不得不需要一个既安全又理想的"后门" ...

  5. 程序员高效Windows环境配置

            个人比较追求高效.效率.以下是我常用的windows配置希望对大家有帮助.(身为程序员,我特别喜欢mac pro的retina屏,在那编程简直是一种享受.等我买了mac pro在发一篇 ...

  6. 使用JavaScript在Canvas上画出一片星空

    随着Html5的迅猛发展,画布也变得越来越重要.下面我就写一个关于在canvas上画出一片星空的简单的代码的示例. 理论基础 初始化一个canvas,获得一个用于绘制图形的上下文环境context.并 ...

  7. Java-IO之ByteArrayInputStream

    ByteArrayInputStream是字节数组输入流,继承于InputStream.它包含了一个内部缓冲区,该缓冲区包含从流中读取的字节,其实内部缓冲区就是一个字节数组,而ByteArrayInp ...

  8. Ubuntu14.04安装配置星际译王词典

    参考自:http://m.blog.csdn.net/blog/u014731529/25917149 平常总会遇到一些不认识的单词,汉字等等.一直使用Chrome 浏览器的翻译插件,不过插件的翻译总 ...

  9. 【Android 应用开发】 自定义组件 宽高适配方法, 手势监听器操作组件, 回调接口维护策略, 绘制方法分析 -- 基于 WheelView 组件分析自定义组件

    博客地址 : http://blog.csdn.net/shulianghan/article/details/41520569 代码下载 : -- GitHub : https://github.c ...

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

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