Dom丰富内容显示隐藏内容

简介: 注意:元素中的/前面最好要空格在现有元素后面插入一个新元素需要自己写代码无法调用 innerAfter当script外部文件放在head时如果用到DOM方法或者文档中的元素最好用到load 因为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);
目录
相关文章
|
JSON JavaScript 数据格式
jQuery操作页面元素属性和内容
jQuery操作页面元素属性和内容
58 0
|
6月前
|
前端开发
CSS常用属性之(列表、表格、鼠标)属性,(如果想知道CSS的列表、表格、鼠标相关的属性知识点,那么只看这一篇就足够了!)
CSS常用属性之(列表、表格、鼠标)属性,(如果想知道CSS的列表、表格、鼠标相关的属性知识点,那么只看这一篇就足够了!)
|
7月前
|
JavaScript
原生JS修改html内容不影响绑定的点击事件 请认准insertAdjacentHTML、insertAdjacentText方法
原生JS修改html内容不影响绑定的点击事件 请认准insertAdjacentHTML、insertAdjacentText方法
原生JS修改html内容不影响绑定的点击事件 请认准insertAdjacentHTML、insertAdjacentText方法
|
6月前
|
Web App开发 监控 JavaScript
JS 鼠标框选(页面选择)时返回对应的 HTML 或文案内容
JS 鼠标框选(页面选择)时返回对应的 HTML 或文案内容 当用户进行鼠标框选选择了页面上的内容时,把选择的内容进行上报。 分为以下几点: 选择文案时 选择图片、svg、iframe、video、audio 等标签时 选择 input、select、textarea 等标签时 选择 input、textarea 标签内容时 选择类似 &nbsp; 字符时 键盘全选时 鼠标右键选择 以上各模块结合时 当包含标签的时候,返回 html 结构,只有文本时返回文本内容
91 1
|
7月前
|
JavaScript 前端开发
js改变元素的内容、属性、样式
js改变元素的内容、属性、样式
42 3
|
7月前
|
移动开发 前端开发
VUE3一种用户可以设置显示隐藏列表内容的方法
VUE3一种用户可以设置显示隐藏列表内容的方法
85 0
|
JavaScript 前端开发
HTML5-JS操作页面滚动条(禁止、隐藏、显示、不显示)
HTML5-JS操作页面滚动条(禁止、隐藏、显示、不显示)
176 0
|
JavaScript 前端开发
js怎样改变元素的内容、属性、样式
js怎样改变元素的内容、属性、样式
123 0
|
存储
element侧边栏根据权限不同内容改变的实现
今天在搭项目基本大框的时候,发现了一个问题,就是我们的产品后台有两个管理端,并且两个管理端所有的功能仅仅查一个功能页面,这个时候就需要考虑两个管理端使用一套,并且不同的账号有不同的权限和页面
232 1
element侧边栏根据权限不同内容改变的实现
|
JavaScript 前端开发 容器
DOM(二)——动画,改变HTML,事件,节点,集合
JavaScript 动画是通过对元素样式进行渐进式变化编程完成的。 这种变化通过一个计数器来调用,当计数器间隔很小时,动画看上去就是连贯的
137 0
DOM(二)——动画,改变HTML,事件,节点,集合

热门文章

最新文章