网站首页  汉语字词  英语词汇  考试资料  写作素材  旧版资料

请输入您要查询的考试资料：

　

标题 各浏览器中的 NodeList 接口存在差异
内容
    标准参考
    NodeList 接口是由 DOM Level-1-Core 引入的，它是一个有序的节点集合抽象，它提供了一个用来获取节点数量的属性 length 和一个用来获得集合中指定索引的节点的方法 item。
    在有些浏览器中，一个 NodeList 对象也具备 HTMLCollection 接口提供的方法。
    关于 NodeList 接口的更详细信息，请参考 DOM Level-1-Core 中的内容。
    关于 HTMLCollection 接口的详细信息，请参考 DOM Level-2-HTML 中的内容。
    问题描述
    各浏览器中的 NodeList 接口存的实现有差异。
    造成的影响
    该问题在某些情况下将导致脚本异常。
    受影响的浏览器
    所有浏览器
    问题分析
    1. 各浏览器中 NodeList 接口的实现
    在 Firefox Chrome Safari 中，对于 NodeList 的定义与 W3C 相同；而在 IE Opera 中，NodeList 继承了 Collection 接口，所以 NodeList 也支持 Collection 接口中的方法。
    关于各浏览器 NodeList 接口的说明，请参考 Mozilla 的 、Safari Webkit DOM 的 和 MSDN 的 中的信息。
    2. 各浏览器中从 NodeList 中获取节点的方法支持差异
    2.1. NodeList[index] 和 NodeList[name]
    以上两种方式各浏览器都支持。以下测试代码中分别用这两种方式获取节点，然后将这两个节点的 id 属性值输出：
    <script type="text/javascript">
    window.onload = function() {
    var spans = document.getElementsByTagName("span");
    var span2 = spans[1];
    var span3 = spans["span3"];
    document.getElementById("info").innerHTML = "<br/>NodeList[index].id: " + span2.id + "<br/>NodeList[name].id: " + span3.id;
    }
    </script>
    <span id="span1"></span>
    <span id="span2"></span>
    <span id="span3"></span>
    <div id="info"></div>
    在各浏览器中表现如下：
    所有浏览器NodeList[index].id: span2
    NodeList[name].id: span3
    2.2. NodeList(index)
    只有 Firefox 不支持 NodeList(index) 。以下测试代码中使用这种方式获取节点，然后输出 id 属性值；如果程序出错，则输出抛出异常：
    <script type="text/javascript">
    window.onload = function() {
    var spans = document.getElementsByTagName("span");
    try {
    var span2 = spans(1);
    document.getElementById("info").innerHTML = "NodeList(index).id: " + span2.id;
    } catch(err) {
    document.getElementById("info").innerHTML = "NodeList(index): " + err;
    }
    }
    </script>
    <span id="span1"></span>
    <span id="span2"></span>
    <div id="info"></div>
    各浏览器中表现如下：
    IE Chrome Safari OperaNodeList(index).id: span2
    FirefoxNodeList(index): TypeError: spans is not a function
    2.3. NodeList(name)
    Firefox 以及 Webkit 浏览器不支持这种方式从集合中获取元素。以下测试代码中用 NodeList(name) 的方式获取一个节点，并输出 id 属性值；如果程序出错，则输出异常：
    <script type="text/javascript">
    window.onload = function() {
    var spans = document.getElementsByTagName("span");
    try {
    var span2 = spans("span2");
    document.getElementById("info").innerHTML = "NodeList(name).id: " + span2.id;
    } catch(err) {
    document.getElementById("info").innerHTML = "NodeList(name): " + err;
    }
    }
    </script>
    <span id="span1"></span>
    <span id="span2"></span>
    <div id="info"></div>
    各浏览器中表现如下：
    FirefoxNodeList(name): TypeError: spans is not a function
    ChromeNodeList(name) : TypeError: Cannot read property 'id' of undefined
    SafariNodeList(name): TypeError: Result of expression 'span2' [undefined] is not an object.
    IE OperaNodeList(name).id: span2
    2.4. NodeList.item(index)
    所有浏览器都支持此方法。以下测试代码中使用该方法获取节点，并输出节点 id 属性值；如果程序出错，则输出异常：
    <script type="text/javascript">
    window.onload = function() {
    var spans = document.getElementsByTagName("span");
    try {
    var span2 = spans.item(1);
    document.getElementById("info").innerHTML = "NodeList.item(index).id: " + span2.id;
    } catch(err) {
    document.getElementById("info").innerHTML = "NodeList.item(index): " + err;
    }
    }
    </script>
    <span id="span1"></span>
    <span id="span2"></span>
    <div id="info"></div>
    各浏览器中表现如下：
    所有浏览器NodeList.item(index).id: span2
    2.5. NodeList.namedItem(name)
    Webkit 浏览器不支持 NodeList.namedItem(name)。以下测试代码中使用该方法获取节点，并输出节点 id 属性值。如果程序出错，则输出异常：
    <script type="text/javascript">
    window.onload = function() {
    var spans = document.getElementsByTagName("span");
    try {
    var span2 = spans.namedItem("span2");
    document.getElementById("info").innerHTML = "NodeList.namedItem(name).id: " + span2.id;
    } catch(err) {
    document.getElementById("info").innerHTML = "NodeList.namedItem(name): " + err;
    }
    }
    </script>
    <span id="span1"></span>
    <span id="span2"></span>
    <div id="info"></div>
    各浏览器中表现如下：
    ChromeNodeList.namedItem(name): TypeError: Object # has no method 'namedItem'
    SafariNodeList.namedItem(name): TypeError: Result of expression 'spans.namedItem' [undefined] is not a function.
    IE Firefox OperaNodeList.namedItem(name).id: span2
    3. 差异汇总
    IEFirefoxChromeSafariOpera
    NodeList[index]支持支持支持支持支持
    NodeList[name]支持支持支持支持支持
    NodeList.item(index)支持支持支持支持支持
    NodeList(index)支持不支持支持支持支持
    NodeList(name)支持不支持不支持不支持支持
    NodeList.namedItem(name)支持支持不支持不支持支持
    可见：
    在 IE Opera 中，NodeList 也具备了 HTMLCollection 接口提供的方法，而在 Firefox 中，也不支持通过 NodeList(index) 来获取元素。
    解决方案
    要从 NodeList 中获取元素，请使用 NodeList[index]、NodeList[name] 或 NodeList.item(index)，以保证兼容各浏览器。
随便看

　

在线学习网考试资料包含高考、自考、专升本考试、人事考试、公务员考试、大学生村官考试、特岗教师招聘考试、事业单位招聘考试、企业人才招聘、银行招聘、教师招聘、农村信用社招聘、各类资格证书考试等各类考试资料。

　

Copyright © 2002-2024 cuapp.net All Rights Reserved
更新时间：2025/5/21 2:49:56