JS提取文本信息

应该使用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]; //取得最后一个节点

思路

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

你可能感兴趣的:(JS提取文本信息)