JS提取文本信息

为什么80%的码农都做不了架构师？>>>   

应该使用JavaScript

• searchbot不支持JavaScritp
• 对javascript缺乏支持的访问者

渐进增强

从最核心的内容开始，使用标记实现良好的结构；在逐步加强这些内容（CSS，JS）

平稳退化：在渐进增强的原则下，可以保证内容可以访问。

取得属性信息

• 得到掩藏在属性里的信息

    var abbrArr = document.getElementsByTagName('abbr');
    var defs = new Array();
    for (var i = 0; i < abbrArr.length; i++) {
      var value = abbrArr[i].getAttribute('title');
      var key = abbrArr[i].lastChild.nodeValue;     //文本节点属于元素节点的下级子节点，需要使用childNodes数组或lastChild来定位
      defs[key] = value;
    }
  

• 创建标记封装这些信息

• 标记插入文档

显示属性信息

浏览器对元素信息的显示是默认的显示方式，即可以通过CSS，JS指定来更改默认的表现、行为

getAttribute兼容性检查问题

setAttribute亦然

if (!document.createTextNode) 
    alert(typeof document.createTextNode)
return false;
输出Function
if (!document.setAttribute) 
      alert(typeof document.setAttribute);
return false;
输出undefined

当对undefined数据进行 ！运算时，会转变为Boolean型；!undefined 对应的布尔值为 TRUE。因此对getAttribute是不能进行兼容性检查的。

setAttribute属于元素节点方法，以上结论是谬误

alert(typeof abbrArr[i].getAttribute);
输出为Function

for (var i = 0 ; i< arrB.length; i++){
    var arrA[i] = arrB[i]    //语法错误，arrA数组需要先定义。
}

兼容性检查

  if (!document.getElementsByTagName) return false;
  if (!document.createElement) return false;
  if (!document.createTextNode) return false;

对于DOM方法，需要确认浏览器支持，才能往下继续执行

浏览器战争的延续

IE6不支持 abbr标签，使用平稳退化来解决：检查到不支持abbr属性时退出

if (abbrArr[i].childNodes.length<1) continue;

IE不支持abbr标签时，在统计abbr元素子节点时会返回错误值0。

对兼容性的检查尽量不要使用浏览器嗅探：难以做到面面俱到。

最后一个元素节点

浏览器可能将换行符作为节点，所以lastChild可能不是一个元素节点

var elementArr = parentElement[i].getElementsByTagName('*');    //使用通配符找到所有元素节点
if (elementArr.length < 1) continue;  //判断是否存在节点
var elem = elementArr[elementArr.length - 1]; //取得最后一个节点

思路

• 创建特定元素构成的节点集合
• 遍历节点，并取得信息，创建节点
• 将新建节点插入结构数

转载于:https://my.oschina.net/xgzx/blog/362950