注意:元素中的/前面最好要空格
在现有元素后面插入一个新元素需要自己写代码无法调用 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类型
for(var 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);