您的位置:奥门新浦京网址 > Wed前段 > Element节点类型详解,自定义标签在IE6

Element节点类型详解,自定义标签在IE6

发布时间:2019-10-14 18:31编辑:Wed前段浏览(141)

    自定义标签在IE6-8的困境

    2015/07/20 · HTML5 · IE, 自定义标签

    原文出处: 司徒正美   

    或许未来前端组件化之路都是自定义标签,但这东西早在20年前,JSTL已在搞了。现在Web Component还只有webkit支持。但一个组件库,还需要一个特殊的标识它们是一块的。不过这个XML已经帮我们搞定了,使用scopeName,如”<xxx:dialog>”。在我继续往下想如何处理如何为这个标签绑定数据,与其他组件通信,管理生命周期,等等大事之前,我还有一个不得不面对的问题,就是如何兼容IE6-8!

    比如以下一个页面:

    图片 1

    在chrome, firefox, IE11, IE11的IE6兼容模式分别如下:

    图片 2
    图片 3
    图片 4
    图片 5

    我们会发现IE6下实际是多出许多标签,它是把闭标签也变成一个独立的元素节点

    图片 6

    这个AA:DIV标签被开膛破肚,里面子节点全部暴出来,成为其兄弟节点了。因此想兼容它,就要费点劲。有个两个情况需要考虑,1是用户已经将它写在页面上,情况同上;2是用户是将它放在字符串模版中,这个用正则搞定。不过正则要是碰上复杂的属性名,还是会晕掉。因此我还是打算使用原生的HTML parser。换言之,字符串,我还是会将它变成节点。这么办呢?!我想了许多办法,后来还是使用VML的命名空间法搞定!

    我们将上面的页面改复杂点,再看看效果!

    图片 7
    图片 8

    可以看到其套嵌关系现在完全正确,并且标签名不会大写化,也不会生成多余节点!

    好了,我们再判定一下是否为自定义标签,或者准确地说,这个节点是否我们组件库中定义的自定义标签。某些情况下,一个页面可以存在多套组件库,包括avalon的,ploymer的,或者是直接用Web Component写的。

    avalon的组件库将使用命名空间,这样就好区别开。在IE6-9中,判定element.scopeName是否为aa(这是组件库的命名空间,你可以改个更高大上的名字),在其他浏览器判定此元素的localName是否以aa:开头就行了!

    JavaScript

    function isWidget(el, uiName){ return el.scopeName ? el.scopeName === uiName: el.localName.indexOf(uiName+":") === 0 }

    1
    2
    3
    function isWidget(el, uiName){
      return   el.scopeName ? el.scopeName === uiName: el.localName.indexOf(uiName+":") === 0
    }

    这个难题解决后,我们就可以开搞基于自定义标签的UI库了!

    1 赞 1 收藏 评论

    图片 9

    Web 开发 17 年的所见所得

    2017/07/10 · 基础技术 · WEB, 开发建议

    原文出处: Daniel Khan   译文出处:众成翻译/myvin   

    DOM Element节点类型详解

    2015/09/21 · HTML5 · DOM

    本文作者: 伯乐在线 - 韩子迟 。未经作者许可,禁止转载!
    欢迎加入伯乐在线 专栏作者。

    上文中我们讲解了 DOM 中最重要的节点类型之一的 Document 节点类型,本文我们继续深入,谈谈另一个重要的节点类型 Element 。

    关于 NodeConfBP

    NodeConfBP 会议于 2017 年 1 月在布达佩斯召开,本次会议为期一天,只有一个演讲室,由 RisingStack – the Node.js Consulting & Development Company 组织并提供赞助。

    下面你将会从第一人称视角感受到一个近乎完美的风格化的会议记录:

    1、概况


    Element 类型用于表现 HTML 或 XML 元素,提供了对元素标签名、子节点及特性的访问。 Element 节点具有以下特征:

    1. nodeType 的值为 1
    2. nodeName 的值为元素的标签名
    3. nodeValue 的值为null
    4. parentNode 可能是 Document 或者 Element
    5. 其子节点可能是 ElementTextCommentProcessingInstructionCDATASection 或者 EntityReference

    要访问元素的标签名,可以用 nodeName 属性,也可以用 tagName 属性;这两个属性会返回相同的值。在 HTML 中,标签名始终都以全部大写表示,而在 XML(有时候也包括 XHTML)中,标签名始终和源代码中保持一致。假如你不确定自己的脚本将会在 HTML 还是 XML 文档中执行,最好还是在比较之前将标签名转换成相同的大小写形式:

    JavaScript

    var myDiv = document.querySelector('div'); console.log(myDiv.tagName); // DIV console.log(myDiv.nodeName); // DIV if (myDiv.tagName.toLowerCase() === 'div') { // 这样最好,适用于任何文档 // ... }

    1
    2
    3
    4
    5
    6
    7
    var myDiv = document.querySelector('div');
    console.log(myDiv.tagName);  // DIV
    console.log(myDiv.nodeName);  // DIV
     
    if (myDiv.tagName.toLowerCase() === 'div') { // 这样最好,适用于任何文档
      // ...
    }

    认识下 Daniel Khan

    DynaTrace 做过的任何和 Node 沾点儿边儿的项目基本上我都过了个遍。另外,我还在给 Lynda 做辅导课程。我在当地大学教书,有三个女儿和一个儿子。

    这次讲话基本上都是我的故事,涉及到了我 17 年学到的关于 Node 的一些东西。

    在我看来,世间万物都是循环的,它们会反复出现,因此我们能够以史为镜,避免重蹈覆辙。

    图片 10

    这张照片拍摄于 1997 年,是我第一张使用网络摄像头拍摄的照片,照片上右边的那个家伙就是我。

    我们购买这台 silicon graphics O2 差不多花了一辆小轿车的价钱,然后这个家伙跑过来说“现在我们正在使用网络摄像头一起拍照”。然后 哇哦 照片就出现在互联网上了,在那个时候这真的是一件特别炫酷的事情。

    1998 年我就已经开始玩 HTML 了。

    图片 11

    当时的网站看起来和图片上展示的差不多,而且那个时候这本书还没写呢。

    那个时候还木有 Google,木有 Facebook,木有 GitHub,木有 Wikipedia,也木有 StackOverflow。

    那个时候我们只有新闻组,我们可以在上面提问,其他人也可以回答问题。有点儿像 email,但和 email 还是有区别的。

    图片 12

    时间走到了 1999 年,也就是 17 年前,我在 Square 新闻组里写下了我的问题:

    • “我正在写 web 数据库,但是我们已经有桌面数据库了呀。”

    是的,Microsoft Access!

    • “我的主机支持 MySQL,但是我并不知道这是什么意思…”

    我真的不知道。

    • “我知道 query 语句是如何运行了。”

    其实,我完全不知道。

    那个时候,我真正学到的一点是:网络永远不会遗忘。那时我真的是毫无头绪。

    2、HTML 元素


    所有 HTML 元素都由 HTMLElement 类型表示,不是直接通过这个类型,也是通过它的子类型来表示。 HTMLElement 类型直接继承自 Element 并添加了一些属性。每个 HTML 元素中都存在下列标准属性:

    1. id 元素在文档中的唯一标识符
    2. title 有关元素的附加说明信息,一般通过工具提示条显示出来
    3. lang 元素内容的语言代码,很少使用
    4. dir 语言的方向,值为 ltr 或者 rtl,也很少使用
    5. className 与元素的 class 特性对应

    进入 2000 年

    在 2000 年我成为了一名 web 开发者,当时我在给 Austrian Job Service 教 Perl,因为在那个时候,找不到工作的人基本上都能成为一名 web 开发者,在当时这是种趋势。

    那个时候 Perl 语言非常难,但是既然我已经准备教 Perl 了,那就是说明…

    我非常非常聪明,是吧?

    但是,真相永远是残酷的:其实我一点儿都不聪明。

    当我尝试在数据库中更新数据集时,因为我不知道如何实现才算合理,所以一开始我的做法是先删除然后再插入。

    图片 13

    那么问题来了:就我这种水平,我又怎么会认为我自己还能教学呢?答案就是:达克效应。

    简单来说,达克效应就是:因为你无知,所以你不知道你自己有多无知。

    图片 14

    那条绿线是你认为你知道的东西,那条黑线才是你真正知道的。那个时候,我认为自己无所不知,直到我完成了大学学业–应该是在 2011 年–我才知道 “好吧,其实我知道的也就那点儿东西”。

    然后,你就开始变得稍微谦虚一些了,因为你开始学习那些你不知道的东西,接着你就开始有点儿绝望了。现在,我认为我在那个绿点的位置。

    3、特性的获取和设置


    每个元素都有一个或多个特性,这些特性的用途是给出相应元素或其内容的附加信息。操作特性的 DOM 方法主要有三个,分别是getAttribute() setAttribute() removeAttribute()

    注意,传递给 getAttribute() 的特性名与实际的特性名相同,因此要想得到 class 特性值,应该传入 class 而不是 className,后者只有在通过对象属性(property)访问特性时才用。如果给定名称的特性不存在,getAttribute() 返回 null。

    <div id='myDiv' title='hanzichi'> </div> <script> var myDiv = document.querySelector('div'); // attribute console.log(myDiv.getAttribute('id')); // myDiv console.log(myDiv.getAttribute('class')); // null console.log(myDiv.getAttribute('title')); // hanzichi console.log(myDiv.getAttribute('lang')); // null console.log(myDiv.getAttribute('dir')); // null // property console.log(myDiv.id); // myDiv console.log(myDiv.className); // '' console.log(myDiv.title); // hanzichi console.log(myDiv.lang); // '' console.log(myDiv.dir); // '' </script>

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    <div id='myDiv' title='hanzichi'> </div>
    <script>
      var myDiv = document.querySelector('div');
     
      // attribute
      console.log(myDiv.getAttribute('id')); // myDiv
      console.log(myDiv.getAttribute('class')); // null
      console.log(myDiv.getAttribute('title')); // hanzichi
      console.log(myDiv.getAttribute('lang')); // null
      console.log(myDiv.getAttribute('dir')); // null
     
      // property
      console.log(myDiv.id); // myDiv
      console.log(myDiv.className); // ''
      console.log(myDiv.title); // hanzichi
      console.log(myDiv.lang); // ''
      console.log(myDiv.dir); // ''
    </script>

    通过 getAttribute() 方法也可以取得自定义特性。

    在实际开发中,开发人员不常用 getAttribute(),而是只使用对象的属性(property)。只有在取得自定义特性值的情况下,才使用getAttribute() 方法。为什么呢?比如说 style,在通过 getAttribute() 访问时,返回的 style 特性值包含的是 css 文本,而通过属性来访问会返回一个对象。再比如 onclick 这样的事件处理程序,当在元素上使用时,onclick 特性包含的是 Javascript 代码,如果通过 getAttribute() 访问,将会返回相应代码的字符串,而在访问 onclick 属性时,则会返回 Javascript 函数。

    与 getAttribute() 对应的是 setAttribute(),这个方法接受两个参数:要设置的特性名和值。如果特性已经存在,setAttribute()会以指定的值替换现有的值;如果特性不存在,setAttribute() 则创建该属性并设置相应的值。

    而 removeAttitude() 方法用于彻底删除元素的特性。调用这个方法不仅会清除特性的值,而且也会从元素中完全删除特性。

    JavaScript

    div.setAttribute('id', 'someOtherId'); div.setAttribute('title', 'some other text'); div.removeAttribute('class')

    1
    2
    3
    4
    div.setAttribute('id', 'someOtherId');
    div.setAttribute('title', 'some other text');
     
    div.removeAttribute('class')

    我们去了银行…

    但是不管怎么着,我设法找到了一家公司,然后买了一台服务器。这台服务器还是我们去银行贷了 15,000 欧元买的。

    和之前相比,现如今变化真的很大:我们有 serverless 架构,你可以一台服务器都不用就把整个公司创建起来。

    那个时候,我们不得不把服务器放在维也纳的一个数据中心的机架上。

    每当服务器宕机的时候,我就得开着车到维也纳去重启服务器。

    图片 15

    那次我学到的东西就是:你要努力理解什么是全栈。我说的就是上面的这个全栈。

    全栈,意味着你至少应该知道一点儿 web 协议、知道路由的工作原理、知道 HTTP 基本的工作机理、知道 SMTP 的工作机制。

    当出现问题的时候,知道这些包是如何打包进浏览器的,知道这些东西是如何协调的是很有必要的。

    4、attributes 属性


    Element 类型是使用 attributes 属性的唯一一个 DOM 节点类型。 attributes 属性中包含一个 NamedNodeMap,与 NodeList 类似,也是一个“动态”的集合。元素的每一个特性都由一个 Attr 节点表示,每个节点都保存在 NamedNodeMap 对象中。NamedNodeMap 对象拥有下列方法:

    1. getNamedItem(name): 返回 nodeName 属性等于 name 的节点
    2. removeNamedItem(name): 从列表移除 nodeName 属性等于 name 的节点
    3. setNamedItem(node): 向列表中添加节点,以节点的 nodeName 属性为索引
    4. item(pos): 返回位于数字 pos 位置处的节点

    attributes 属性中包含一系列的节点,每个节点的 nodeName 就是特性的名称,而节点的 nodeValue 就是特性的值。

    JavaScript

    // 取得元素的特性值 var id = element.attributes.getNamedItem('id').nodeValue; var id = element.attributes['id'].nodeValue; // getAttribute() 也能实现一样功能 var id = element.getAttribute('id'); // 与removeAttribute() 方法相比,唯一的区别是能返回表示被删除特性的节点 var oldAttr = element.attributes.removeNamedItem('id'); // 添加新特性 // 需要传入一个特性节点 element.attributes.setNamedItem(newAttr);

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    // 取得元素的特性值
    var id = element.attributes.getNamedItem('id').nodeValue;
    var id = element.attributes['id'].nodeValue;
     
    // getAttribute() 也能实现一样功能
    var id = element.getAttribute('id');
     
    // 与removeAttribute() 方法相比,唯一的区别是能返回表示被删除特性的节点
    var oldAttr = element.attributes.removeNamedItem('id');
     
    // 添加新特性
    // 需要传入一个特性节点
    element.attributes.setNamedItem(newAttr);

    一般来说,由于前面介绍的 attributes 方法不够方便,因此开发人员更多的会使用 getAttribute() removeAttribute() 以及setAttribute() 方法。

    不过如果想要遍历元素的特性,attributes 属性倒是可以派上用场:

    <div id='myDiv' title='hanzichi' class='fish'> </div> <script> var myDiv = document.querySelector('div'); for (var i = 0, len = myDiv.attributes.length; i < len; i++) { var attrName = myDiv.attributes[i].nodeName , attrValue = myDiv.attributes[i].nodeValue; console.log(attrName, attrValue); } // id myDiv // title hanzichi // class fish </script>

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    <div id='myDiv' title='hanzichi' class='fish'> </div>
    <script>
      var myDiv = document.querySelector('div');
      for (var i = 0, len = myDiv.attributes.length; i < len; i++) {
        var attrName = myDiv.attributes[i].nodeName
          , attrValue = myDiv.attributes[i].nodeValue;
     
        console.log(attrName, attrValue);
      }
     
      // id myDiv
      // title hanzichi
      // class fish
    </script>

    本文由奥门新浦京网址发布于Wed前段,转载请注明出处:Element节点类型详解,自定义标签在IE6

    关键词:

上一篇:没有了

下一篇:没有了