Dom丰富内容显示隐藏内容

注意:元素中的/前面最好要空格
在现有元素后面插入一个新元素需要自己写代码无法调用 innerAfter
当script外部文件放在head时如果用到DOM方法或者文档中的元素最好用到load 因为DOM还没加载完  会出错   
多个函数赋值给load
function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      oldonload();
      func();
    }
  }
}   
如果是放在最后可以直接调用文档中的元素
元素之间有换行有些浏览器会把这个换行符号理解为文本元素比如 
</p>
</abbr>
所以直接用.lastChild得到的不一定是元素节点   而是文本节点 document.getElementByTagName得到的是元素节点
lastchild获取的是文本节点还是元素节点
是都会获取 现在有最新的方法 lastElementChild 只取元素节点
关于节点 有 元素节点 和 属性节点 和 文本节点
不过属性节点现在已经不算节点了,你用lastchild还是lastElementChild 都是获取不到的



显示文档中隐藏的内容  从文档中提取一些内容并以一种清晰的方式显示出来
显示缩略语列表:   
得到
    var abbre=document.getElementByTagName("abbr");
    if(abbre.length<1) return false;
    var defs=new Array();
    for(var i=0;i<abbre.length;i++){
        var xx=abbre[i];
        var definition=xx.getAttribute("title");
        var key=xx.lastChild.nodeValue;
        defs[key]=definition;
    }

创建标记:
var dist=document.createElement("dl");
for(var  key in defs){
    var definition=defs[key];
    var dt=createElement("dt");
    var txt=document.createTextNode(key);
    dt.appendChild(txt);
    var dd=createElement("dd");
    var des=document.createTextNode(definition);
    dd.appendChild(des);
    dis.appendChild(dt);
    dis.appendChild(dd)
}

 最后将dist加入到body中有2种方法
 1.document.getElementByTagName("body")[0]
 2.document.body.appendChild(dist);

 注意:Array数组下标可以存放var类型 
       forvar key in defs) key代表defs中的下标
 但是abbr再IE7之前是不支持的 这是历史遗留问题 
 解决方案是防止他报错即可
 function xx(){
    if(!document.getElementByTagName||!document.createElement||!document.createTextNode) return false;
    var abbre=document.getElementByTagName("abbr");
    if(abbre.length<1) return false;
    var defs=new Array();
    for(var i=0;i<abbre.length;i++){
    if(abbre.length<1) continue;
        var xx=abbre[i];
        var definition=xx.getAttribute("title");
        var key=xx.lastChild.nodeValue;
        defs[key]=definition;
    }
    var dist=document.createElement("dl");
for(var  key in defs){
    var definition=defs[key];
    var dt=createElement("dt");
    var txt=document.createTextNode(key);
    dt.appendChild(txt);
    var dd=createElement("dd");
    var des=document.createTextNode(definition);
    dd.appendChild(des);
    dis.appendChild(dt);
    dis.appendChild(dd)
}
if(dis.childNodes.length<1) return false;
document.body.appendChild(dist)
 }

 显示”文献来源链接表“:
 因为blockquote的cite属性会被浏览器完全忽略 所以 虽然信息就在那里 可无法引用  所以需要用DOM来把这些信息收集起来 
 function displayCitation(){
    if(!document.getElementByTagName||!document.createElement||!document.createTextNode) return false;
    var quotes=document.getElementByTagName("blockquote");
    for(var i=0;i<quotes.length;i++){
        if(!quotes[i].getAttribute("cite")){
            continue;
        }
        var url=quotes[i].getAttribute("cite");
        var quotechilden=document.getElementByTagName("*");//d得到所有元素节点
        if(quotechilden.length<1) continue;
        var elem=quotechilden[quotechilden.length-1];
        var link=document.createElement("p");
        var link_txt=document.createTextNode("source");
        link.appendChild(link);
        link.setAttribute("href",url);
        var super=document.createElement("sup");   //上标
        super.appendChild(link);
        elem.appendChild(super);
    }

 }
 显示快捷键清单
 function displayAccesskeys() {
  if (!document.getElementsByTagName || !document.createElement || !document.createTextNode) return false;
// get all the links in the document
  var links = document.getElementsByTagName("a");
// create an array to store the accesskeys
  var akeys = new Array();
// loop through the links
  for (var i=0; i<links.length; i++) {
    var current_link = links[i];
// if there is no accesskey attribute, continue the loop
    if (current_link.getAttribute("accesskey") == null) continue;
// get the value of the accesskey
    var key = current_link.getAttribute("accesskey");
// get the value of the link text
    var text = current_link.lastChild.nodeValue;
// add them to the array
    akeys[key] = text;
  }
// create the list
  var list = document.createElement("ul");
// loop through the accesskeys
  for (key in akeys) {
    var text = akeys[key];
//  create the string to put in the list item
    var str = key + " : "+text;
// create the list item
    var item = document.createElement("li");
    var item_text = document.createTextNode(str);
    item.appendChild(item_text);
// add the list item to the list
    list.appendChild(item);
  }
// create a headline
  var header = document.createElement("h3");
  var header_text = document.createTextNode("Accesskeys");
  header.appendChild(header_text);
// add the headline to the body
  document.body.appendChild(header);
// add the list to the body
  document.body.appendChild(list);
}
addLoadEvent(displayAccesskeys);
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值