前端框架学习 --结点操作

结点操作


一、结点的创建

1 document.createElement( )

标准:传入一个标签名,支持非标准的标签名 document.createElement("c")

IE6-7:可以传入连同用户一起生成

document.createElement("<input name=‘name‘>")

eg:

//http://thunderguy.com/semicolon/2005/05/23/setting-the-name-attribute-in-internet-explorer/
function createNamedElement(type, name) {
    var element = null;
    // Try the IE way; this fails on standards-compliant browsers
    try {
        element = document.createElement(‘<‘ + type + ‘ name="‘ + name + ‘">‘);
    } catch (e) {
    }
    if (!element || element.nodeName != type.toUpperCase()) {
        // Non-IE browser; use canonical method to create named element
        element = document.createElement(type);
        element.name = name;
    }
    return element;
}

2 innerHTML

innerHTML的创建效率比createElement快2到10倍

测试代码

var start = new Date();
for(var i = 0 ;i<1000;i++){

  document.createElement("c");

}
var end = new Date();
console.log(end-start)

var start = new Date();
var str =""
for(var i = 0 ;i<1000;i++){

  str += "<c></c>"

}

  document.innerHTML=str;

var end = new Date();
console.log(end-start)

测试结果却是快了最少2倍

innerHTML可以一次生成一大堆结点。

  • 在IE6-8中使用innerHTML会对用户字符串进行trimLeft操作。
  • 在IE中有些元素结点是只读的,重写innerHTML会报错。结点有 注释,style,script,link,meta,noscript
  • innerHTML不会执行script中的脚本。(有defer属性时候)能执行脚本。
  • 有的标签不能单独作为div的子元素,比如td,th,需要在最外面包几层,才能放到innerHTML中解释。否则浏览器会当做普通的文本结点生成。

3 insertAdjacentHTML

insertAdjacentHTML是IE私有实现的产物,兼容性比较差。有灵活的插入方式

如果不支持的insetAdjacentHTML,模拟的如下:

if (typeof HTMLElement !== "undefined" &&
        !HTMLElement.prototype.insertAdjacentElement) {
    HTMLElement.prototype.insertAdjacentElement = function(where, parsedNode) {
        switch (where.toLowerCase()) {
            case ‘beforebegin‘:
                this.parentNode.insertBefore(parsedNode, this)
                break;
            case ‘afterbegin‘:
                this.insertBefore(parsedNode, this.firstChild);
                break;
            case ‘beforeend‘:
                this.appendChild(parsedNode);
                break;
            case ‘afterend‘:
                if (this.nextSibling)
                    this.parentNode.insertBefore(parsedNode, this.nextSibling);
                else
                    this.parentNode.appendChild(parsedNode);
                break;
        }
    }
    HTMLElement.prototype.insertAdjacentHTML = function(where, htmlStr) {
        var r = this.ownerDocument.createRange();
        r.setStartBefore(this);
        var parsedHTML = r.createContextualFragment(htmlStr);
        this.insertAdjacentElement(where, parsedHTML)
    }
    HTMLElement.prototype.insertAdjacentText = function(where, txtStr) {
        var parsedText = document.createTextNode(txtStr)
        this.insertAdjacentElement(where, parsedText)
    }
}

createContextualFragment: Firefox私有属性

是Range对象的一个实力方法。相当于insertAdjacentHTML直接将内容插入到DOM树,createContextFragment允许将字符串转换为文档碎片。



通过两个构造器与一个原型实现无new实例化,这样的话链式操作不会被new关键字打断

function $(a, b) { //第一个构造器
    return new $.fn.init(a, b); //第二个构造器
}
//将原型对象放到一个名字更短、更好记的属性中
//这是jQuery人性化的体现,也方便扩展原型方法
$.fn = $.prototype = {
    init: function(a, b) {
        this.a = a;
        this.b = b;
    }
}
//共用同一个原型
$.fn.init.prototype = $.fn;

var a = $(1, 2);
console.log(a instanceof $); //true
console.log(a instanceof $.fn.init); //true

传入一大推的字符成长一堆结点的功能由parseHTML方法实现。

////TODO

实现html需要注意的事情

如何实现

对应浏览器处理问题

时间: 2024-10-07 05:41:08

前端框架学习 --结点操作的相关文章

Web前端框架学习成本比较及学习方法

就项目中自己用过的前端框架的学习成本比较与学习心得分享 刚工作时间不长只用过这几个框架下面是难易程度比较: 不论哪个web前端框架, 究其本质都是把页面的数据传递给后台服务器语言(如java)进行处理, 后台取出的数据把它显示在页面上不就这么简单么; 弄清楚这其中的提交方式(特别点就ajax方式), 参数传递, 事件机制然后在看懂API; 那么不管用什么web框架开发都是很顺心的, API在手通吃所有;  前提是一定要看懂API , 总是去问别人不会有多大进步的, 自己多看API文档; 学习成本

1.VUE前端框架学习记录一

VUE前端框架学习记录一文字信息没办法描述清楚,主要看编码实战里面,有附带有一个完整可用的Html页面,有需要的同学到脑图里面自取.脑图地址http://naotu.baidu.com/file/f0a6c2f23b97d0371032c408e7659917?token=2fd9d925d380fc1d 原文地址:https://www.cnblogs.com/jtfr/p/11185262.html

东拼西凑完成一个“前端框架”(5) - Tabs操作

目录 东拼西凑完成一个后台 "前端框架" (1) -?布局 东拼西凑完成一个后台 "前端框架" (2) - 字体图标 东拼西凑完成一个"前端框架"(3) - 侧边栏 东拼西凑完成一个"前端框架"(4) - Tabs页 写在前面 Tabs页面完成的基本操作完成,但是功能还不够完备: Tab页打开过多超出的如何处理? Tab页关闭所有.关闭其它操作 Tab页刷新操作 设计 这里参考LayUIAdmin的设计方式: Tab栏左右未知

跨平台前端框架学习——bootstrap,jquery,angular

按照我的理解前端开发的框架可以分为三种类型: UI框架:这部分如bootstrap,定义了一套css样式风格,帮助布局,提供了若干可以直接使用的组件,我们可以只使用它提供的组件而不用自己设计 UI 工具类框架:如jquery(pc端)/jquery mobile(移动端),虽然准确来说它们更是类库,但它们集成了有关 DOM操作,ajax交互,事件和动画的工具,能够帮助解决浏览器兼容,这里姑且当做框架 组织代码的框架:如angular,它不提供jquery一样(类似插件)的功能,它帮我们更好地组织

前端框架学习资源

刚刚入职,项目用到三个框架,需要快速了解学习上手,找到几篇文章记录于此. ractive.js 官网辅导    中文简要版 require.js 慕课网视频一节 stylus stylus入门使用方法

bootstrap 前端框架学习笔记

1.认识一下 bootstrap 带来的优雅效果: 代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap 模板</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &

东拼西凑完成一个“前端框架”(6) - 按钮

目录 东拼西凑完成一个后台 "前端框架" (1) -?布局 东拼西凑完成一个后台 "前端框架" (2) - 字体图标 东拼西凑完成一个"前端框架"(3) - 侧边栏 东拼西凑完成一个"前端框架"(4) - Tabs页 东拼西凑完成一个"前端框架"(5) - Tabs操作 东拼西凑完成一个"前端框架"(6) - 按钮 写在前面 完成了整体框架的工作,下面开始写一些组件:从按钮开始,设计的思

JavaSE中Collection集合框架学习笔记(2)——拒绝重复内容的Set和支持队列操作的Queue

前言:俗话说“金三银四铜五”,不知道我要在这段时间找工作会不会很艰难.不管了,工作三年之后就当给自己放个暑假. 面试当中Collection(集合)是基础重点.我在网上看了几篇讲Collection的文章,大多都是以罗列记忆点的形式书写的,没有谈论实现细节和逻辑原理.作为个人笔记无可厚非,但是并不利于他人学习.希望能通过这种比较“费劲”的讲解,帮助我自己.也帮助读者们更好地学习Java.掌握Java. 无论你跟我一样需要应聘,还是说在校学生学习Java基础,都对入门和进一步启发学习有所帮助.(关

90网论坛推荐10大H5前端框架,建议好好学习一下

作为一名做为在前端死缠烂打6年并且懒到不行的攻城士,这几年我还是阅过很多同门从知名到很知名的各种前端框架,本来想拿15-20个框架来分享一 下,但在跟几个前辈讨教写文章的技巧时果断被无情的打击了,所以这里我还是低调的只拿出10个框架来个大锅乱炖来简单介绍,凑够字数也就全剧终了. 原本写这篇文章想围绕着 CSS 框架来的,但因为目前界内比较流行并遍地开花的主要还是 JS+CSS 模式的框架,并且自己靠着一点 JS 功 底,就想专门针对 CSS,所以最后来个大锅乱炖都大致聊聊.下面的框架也没有什么先