您的位置:首页 > 其它

纠结的DOM 兼容性太差

2013-10-18 17:29 302 查看
var btn1 = document.createElement("input");
btn1.type = "radio";
btn1.name = "choose";
var btn2 = document.createElement("input");
btn2.type = "radio";
btn2.name = "choose";
var btn3 = document.createElement("input");
btn3.type = "radio";
btn3.name = "choose";

document.body.appendChild(btn1);
document.body.appendChild(btn2);
document.body.appendChild(btn3);

var all = document.getElementsByTagName("*");// 取不到文本节点 也取不到注释节点

var images = document.images;
console.log(images);
/*var img = images.namedItem("mypic"); // chrome 不支持 IEff支持
var img = images["mypic"];   // chrome 不支持 IEff支持
alert(img);*/

//alert(document.getElementById("user"));
console.log(document.doctype);// IE 78 Null

var xx = document.getElementById("xx");
console.log("tagName", xx.tagName,"nodeName:", xx.nodeName);

// .style 跟 getAttribute("style") 的差别
console.log("style::", xx.style); // object
console.log("getAttribute() style:::", xx.getAttribute("style"));

xx.removeAttribute("title");
xx.onclick = function(){
alert("寂寞的季节");
};

// .onclick 跟 getAttribute("onclick") 的差别
console.log("1.onclick 作为 元素的属性:", xx.onclick);
console.log("2. getAttribute('onclick')", xx.getAttribute("onclick"));

//xx.setAttribute("mycolor", "red");
xx.mycolor = "red";

var yy = xx.cloneNode(true);
document.body.appendChild(yy);

var newNode = document.createElement("p");
newNode.innerHTML = '<span> js 是怎样创建节点? 怎样添加节点? 不要跟jq 混淆</span>';
var returnedNode = document.getElementById("xxx").appendChild(newNode);
console.log(returnedNode == newNode);    // true
console.log(returnedNode == document.getElementById("xxx").lastChild);// true

document.body.appendChild(xx);// xx 已经是文档的一部分,结果是自己被挪动位置而已

console.log(document.body.firstChild.nodeName);// firstChild 也存在兼容性问题 主要是ie7/8

// slice array ie test
var nodes = document.body.childNodes;
//var arr = Array.prototype.slice.call(nodes, 0);
//console.log("转化为数组", arr);

function convertToArray(nodes){
var arr = [];
try{
arr = Array.prototype.slice.call(nodes, 0);
}catch(e){
for(var i = 0,len = nodes.length; i < len; i++){
arr.push(nodes[i]);
}
}
return arr;
}
var array1 = convertToArray(nodes);
console.log(array1[0]);
console.log(array1);
console.log(array1.length);
//console.log(array1[4]);
console.log(array1[2]);

function Person(){

}

function assignEvents(){
var id = "xx";

document.getElementById("xx").onclick = function(e){
for(var i = 0; i < 1000; i++){
console.log(this);
}
};

id = null;
}

//assignEvents();
//window.onload = function(){
document.write("is right here in front of me "); // document.write() 在window.onload 之后会重写整个页面 跟jq 的domReady 一样
//};
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: