DOM操作原生js 的bug,使用jQuery 可以消除的解决方法

js的 bug 类型：  Uncaught TypeError：Cannot set/read property 'xxx' of null

在进行DOM操作的时候比较容易发生这个错误，比如：

1.  document.getElementById('test1').style.display='none'

2.  document.getElementById('test1').onclick=function(){/*相关代码*/}

假如DOM中无此 test1对象，将会抛出上面的错误，发生这种错误后，代码后面的模块将会失去效果，这是比较头疼的地方。

要解决这个bug可以用 try/catch 来消除，但是，try/catch 会带来额外开销。如果直接删除，也是可以的，但如果这个js是个公共的，可能对其他页面造成影响。今天无意中将上述代码改成jQuery风格后，bug解决。那么jQuery是如何解决的呢？是try/catch吗？这就需要看看源码了。

以上这篇DOM操作原生js 的bug,使用jQuery 可以消除的解决方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • JS、DOM和JQuery之间的关系示例分析

    DOM(document object model) 其实是浏览器内元素对象的一个总称 我们用JavaScript对网页进行的所有操作都是通过DOM进行的.DOM属于浏览器,而不是JavaScript语言规范里的规定的核心内容,所以如果你下载一个JavaScript语言的参考帮助文档来查的话,就连妇孺皆知的document.write方法也找不到. 文档对象模型(Document Object Model,DOM)是一种用于HTML和XML文档的编程接口.它给文档提供了一种结构化的表示方法,可以

  • js和jquery对dom节点的操作(创建/追加)

    复制代码 代码如下: <script src="jquery-1.9.1.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { $('#Button1').click(function () { // var ha = '<p>a</p>'; // $('div').app

  • javascript中html字符串转化为jquery dom对象的方法

    原html字符串如下: var text="<div id='overLay' style='width:50px;height:60px;background:url(imgs/back.png) left top no-repeat; position: absolute;'>" + "<img style='margin-left:4px;margin-top: 3px;' src='ima.png' width='43px' height='43px

  • NodeJS使用jQuery选择器操作DOM

    注* 这是一个两年多的"老"项目,可以让你在NodeJS中使用jQuery的选择器,像操作前端DOM一样操作后端的HTML/XML,在去除浏览器兼容相关代码后,比JSDOM的操作快8倍. 之前我们曾经提到JSDOM有严重的性能问题:   Debug调试Node.JS:我们是如何定位内存泄漏和无限循环的 cheerio 快速,灵活,在服务器端使用的jQuery. 简介 测试你的服务器端HTML: 复制代码 代码如下: var cheerio = require('cheerio'), $

  • 原生JS和jQuery操作DOM对比总结

    一.创建元素节点 1.1 原生JS创建元素节点 document.createElement("p"); 1.2 jQuery创建元素节点 $('<p></p>');` 二.创建并添加文本节点 2.1 原生JS创建文本节点 `document.createTextNode("Text Content"); 通常创建文本节点和创建元素节点配合使用,比如: var textEl = document.createTextNode("He

  • JavaScript对象之间的转换 jQuery对象和原声DOM

    $("#test") //jQuery对象 $("#test")[0] //jQuery对象->原生的DOM对象 $($("#test")[0]) //DOM对象->jQuery对象(有点绕,但只要明白使用$()后能将原生的DOM对象封装成jQuery对象即可)

  • js/jQuery对象互转(快速操作dom元素)

    复制代码 代码如下: // jquery对象转js对象 $('#search')[0].checked=true; // js对象转jquery对象 var obj = document.getElementById('search'); alert($(obj).checked);

  • jquery对象和javascript对象即DOM对象相互转换

    jQuery 对象是通过 jQuery 包装DOM 对象后产生的对象.jQuery 对象是 jQuery 独有的,其可以使用 jQuery 里的方法,但是不能使用 DOM 的方法:例如: $("#img").attr("src","test.jpg"); 这里的 $("#img")就是 jQuery 对象. DOM对象就是Javascript 固有的一些对象操作.DOM 对象能使用Javascript 固有的方法,但是不能使用

  • JS/jQuery判断DOM节点是否存在的简单方法

    JS原生判断DOM节点是否存在页面中 JavaScript原生函数没有提供判断DOM节点是否存在方法,我们通常获取DOM节点几乎都是document.getElement..方法,会返回一个object数组合集,我们可以通过object[0],object[1]这样来访问这个合集的每一个对象.既然返回的是数组合集,那么就有length属性,而length大于等于1即表示DOM节点存在页面中 代码: Object.prototype.exist = function(){ if(typeof th

  • 使用js dom和jquery分别实现简单增删改

    软件开发实际就是数据的增删改查,javascript前端开发也不例外.今天学了jquery框架的简单使用.于是用它实现简单的增删改,接着也用原始的javascript实现同样的功能,以便看出jquery的强大: 代码如下: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" con

随机推荐