解决节点的兼容性问题

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

<div id="wrap">
    <p id="p">测试</p>
    <div id="div1">
        <p><span id="span">文字</span></p>
    </div>
    <div id="div2"></div>
    <!--注释-->
    <a href="">链接</a>
</div>

</body>
</html>
<script>
    var wrap = document.getElementById("wrap");
    var div1 = document.getElementById("div1");
    var div2 = document.getElementById("div2");
    var a = document.getElementById("a");
    var p = document.getElementById("p");
    var span = document.getElementById("span");

    //找子节点个数
    function getChild(obj){
        var arr=[];
        for(var i=0;i<obj.childNodes.length;i++){
            if(!(obj.childNodes[i].nodeType==3 && obj.childNodes[i].nodeValue.trim()=="")){
                arr.push(obj.childNodes[i]);
            }
        }
        return arr;
    }
    alert(getChild(wrap).length);

    //找第一个子节点
    function getFirstChild(obj){
        var firstchild=obj.firstChild;
        while(firstchild.nodeType==3 && firstchild.nodeValue.trim()==""){
            firstchild=firstchild.nextSibling;
        }
        return firstchild;
    }
    alert(getFirstChild(wrap).nodeName);

    //找最后一个子节点
    function getLastChild(obj){
        var lastchild=obj.lastChild;
        while(lastchild.nodeType==3 && lastchild.nodeValue.trim()==""){
            lastchild=lastchild.previousSibling;
        }
        return lastchild;
    }
    alert(getLastChild(wrap).nodeName);
</script>
时间: 2024-10-09 17:32:36

解决节点的兼容性问题的相关文章

[js高手之路] dom常用节点属性兼容性详解与应用

一.每个DOM节点都有一个nodeType属性,表示节点类型, NodeType一共有12种类型,我们可以通过遍历内置的Node构造函数获取 1 window.onload = function(){ 2 var str = "<table>"; 3 for( var key in Node ){ 4 str += "<tr>"; 5 str += "<td>" + key + "</td>

DOM节点(首尾子节点、兄弟节点)的兼容性问题处理

首尾子节点:firstChild .firstElementChild lastChild .lastElementChild 兄弟节点:  nextSibling . nextElementSibling previousSiblling .previousElementSibling 以首节点为例: //IE6-8//oUl.firstChild.style.background='red'; //高级浏览器//oUl.firstElementChild.style.background='

JavaScript中解决多浏览器兼容性问题的方案

一.document.formName.item(”itemName”) 问题 问题说 明:IE下,可以使用 document.formName.item(”itemName”) 或 document.formName.elements ["elementName"]:Firefox 下,只能使用document.formName.elements["elementName"]. 解决方法:统一使用document.formName.elements["e

如何解决innnerText的兼容性问题

//获dom对象的innerText的取值 function getInnerText(element) { //判断当前浏览器是否支持innerText if(typeof element.innerText === "string") { //支持返回innerText return element.innerText; }else{ //不支持返回textContent return element.textContent; } }; //获dom对象的innerText的取值

解决uploadify ie兼容性问题一例

uploadify版本是3.2, ie版本是11. 按照官方例子,看起来一切正常,flash的上传按钮也出现了,但点击时报一个js错误,像下图. 真是有点莫名其妙,报错行中的‘elem’是ie的flash对象,标签为object,看起来是jquery在处理这个标签时遇到了问题.不理解啊 后来在网上找到一种方式,试了下还真行,尽管给出这种方法的人自己也不知道为什么 :( 处理方法就是在初始化uploadify控件的js后再添加一行js脚本,看起来像这样. $('#upFile').uploadif

解决窗口属性兼容性问题的一些函数

窗口位置 var leftPos = (typeof window.screenleft == "number")? window.screenleft : window.screenX; var topPos = (typeof window.screentop == "number")? window.screentop : window.screenY; //IE Safai Opera Chrome 支持window.screenleft //Firefox

解决getElementsByClassName的兼容性问题

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <div class="div1"></div> <div class="div1"></div>

ZooKeeper Observers解决节点过多时写性能下降问题

ZooKeeper Observers Observers: Scaling ZooKeeper Without Hurting Write Performance How to use Observers Example use cases Observers: Scaling ZooKeeper Without Hurting Write Performance Although ZooKeeper performs very well by having clients connect d

DIV CSS兼容性解决IE6/IE7/FF浏览器的通用方法完美兼(转)

在网站设计的时候,应该注意css样式兼容不同浏览器问题,特别是对完全使用DIV CSS设计的网,就应该更注意IE6 IE7 FF对CSS样式的兼容,不然,你的网乱可能出去不想出现的效果! 所有浏览器 通用height: 100px; IE6 专用_height: 100px; IE6 专用*height: 100px; IE7 专用*+height: 100px; IE7.FF 共用height: 100px !important; 一.CSS HACK1, !important随着IE7对!i