javascript - Javascript 中 DOM 元素的跨浏览器导航

Question

我的一个队友不久前编写了一些代码，该代码在 HTML 页面中导航 DOM 元素，以根据对象中已有的数据预先填充模式中的一些字段(该模式允许用户编辑该数据)。这些项目通常是从数据库表生成的。

function showModal(editImage) {
    var modal = document.getElementById('myModal');
    var span = document.getElementsByClassName("close")[0];
    var nameAndTitle = editImage.srcElement.parentElement.innerHTML;
    var parent = editImage.srcElement.parentElement.parentElement;
    etc....

问题是，他们只测试了它在 Chrome 中是否有效。看来这段代码在 Firefox 中从来没有工作过。当我尝试在 Firefox 中打开模式之一时，我收到控制台输出“TypeError: editImage.srcElement is undefined”

我的问题是，是否有一种更“正确”的方式来访问适用于任何浏览器的数据，或者我是否需要检查我使用的浏览器并根据浏览器以不同的方式访问该信息用过吗？

Answer 1

您的直接答案是:将 srcElement 更改为 target。 Mozilla 开发者网络是检查标准合规性的一个非常好的资源(众多资源之一)。 <强> visit to their site for srcElement 表示它是非标准的，并以正确的方式(target)提出建议。

不幸的是，即使是标准 API 也并不总是适用于所有浏览器。通常，标准的各个部分是逐件实现的。查阅权威来源对于了解哪些地方受支持至关重要。

其他资源:

• World Wide Web Consortium (W3C)，适用于 HTML、CSS、XML 等
• European Computer Manufacturer's Association (ECMA) JavaScript
• CanIUse.com适合快速兼容性合规性检查

至于你的明确问题:

“我的问题是，是否有一种更“正确”的方式来访问适用于任何浏览器的数据，或者我是否需要检查我使用的浏览器并以不同的方式访问该信息，具体取决于在正在使用的浏览器上？”

使用标准并检查支持(通过我上面提供的资源)以获得跨浏览器代码的最佳机会。

不要编写检查浏览器类型和版本的代码来查看您的代码是否会运行(浏览器检测)，因为:

1. 浏览器太多，版本太多 - 这太糟糕了!
2. 浏览器可以而且将会向您撒谎!

如有疑问，请使用“特征检测”。特征检测是评估某个特征是否存在并在存在时使用它的代码。如果没有，则提供后备方案。以下是 IE8(及更低版本)浏览器中非常常见的一个，该浏览器尚不支持事件处理的 W3C 标准:

// Here we are attempting to obtain the value of the 
// addEventListener property of the window object.
// IE 8 doesn't implement this property so "undefined"
// will be returned. But, because we are attempting to
// use the  value as the condition of an if/then construct
// "undefined" will be converted to a boolean. "undefined"
// is a "falsey" value, so it will convert to false. 
// This means that if the else portion of our construct
// is reached, we have a browser that doesn't support
// addEventListener
if(window.addEventListener){
   // W3C standards are supported - do things the standard way
   obj.addEventListener("click", someFunction, capture);
} else {
   // Must be IE 8 or less - do things the IE way
   obj.attachEvent("onclick", someFunction);
}

这只是使用特征检测的一种方法，但它通常取决于将值转换为 bool 值。查看更多信息 here 。