JavaScript中DOM详解

2024-09-28 18:47:31

为了达到平稳退化，向后兼容，标记分离的思想，每次写js代码时做的第一件事应该是必要的测试和检查工作：
在js文件里首先添加以下代码进行检查：

window.onload = function(){
if(!document.getElementsByTagName)  return false;
if(!document.getElementById) return false;
if(!document.getElementsByClassName)  return false;
if(!document.getElementById("selector"))  return false;
if(!document.getElementsByTagName("tag"))  return false;
if(!document.getElementsByClassName("selector"))  return false;
};

通用封装函数：

var $ = function(id){
   return document.getElementBy Id (id);
}
var addEvent = function(obj,event,fn){  //obj：元素对象名字，event：绑定事件，fn：触发的回调函数
   if(obj.addEventListener){
obj.addEventListener(event,fn,false);
   }
   else if(obj.attachEvent){
obj.attachEvent("on"+event,fn);
   }
}

对于很多函数需要页面加载即运行，window.onload封装方法如下：

function addLoadEvent(func){
var oldonload = window.onload;
if(typeof window.onload != "function")
{
window.onload = func;
}
else
{
window.onload = function()
{
oldonload();
func();
}
}
}
addLoadEvent(firstFunction);
addLoadEvent(secondFunction);

火狐和IE之间的JavaScript差异：

1、在大多数情况下,为事件处理函数返回false，可以防止默认的事件行为.例如,默认情况下点击一个a元素，页面会跳转到该元素href属性指定的页。
return false 就相当于终止符，return true 就相当于执行符。
在js中对于return用法的三种景象的总结如下：
retrun true；返回正确的处理惩罚成果。
return false；返回错误的处理惩罚成果；终止处理惩罚；阻拦提交表单；阻拦履行默认的行动。
return；把把握权返回给页面。

2、在绝大多数时候，把一个函数调用赋值给一个变量将是一个好主意。

3、noscript标签可被用于可识别 script标签但无法支持其中的脚本的浏览器。如果浏览器支持脚本，那么它不会显示出 noscript 标签中的文本。

4、在动态设置样式时，只要有可能，最好选用CSS，最简单的就是选择最容易实现的方法。

5、在一个函数中会用到全局对象存储为局部变量来减少全局查找，因为访问局部变量的速度要比访问全局变量的速度更快些。

6、如果针对的是不断运行的代码，不应该使用setTimeout，而应该是用setInterval，因为setTimeout每一次都会初始化一个定时器，而setInterval只会在开始的时候初始化一个定时器。

7、如果要连接多个字符串，应该少使用+= ,条件分支时尽量使用三目运算符替代条件分支。

8、很多人喜欢使用parseInt()，其实parseInt()是用于将字符串转换成数字，而不是浮点数和整型之间的转换，我们应该使用Math.floor()或者Math.round()。

9、在JavaScript中所有变量都可以使用单个var语句来声明，这样就是组合在一起的语句，以减少整个脚本的执行时间。

10、对于大的DOM更改，使用innerHTML要比使用标准的DOM方法创建同样的DOM结构快得多。

11、当同一个对象使用.onclick的写法触发多个方法的时候，后一个方法会把前一个方法覆盖掉，也就是说，在对象的onclick事件发生时，只会执行最后绑定的方法。而用事件监听则不会有覆盖的现象，每个绑定的事件都会被执行。

12、如果定义了toString()方法来进行类型转换的话，推荐显式调用toString()，因为内部的操作在尝试所有可能性之后，会尝试对象的toString()方法尝试能否转化为String，所以直接调用这个方法效率会更高。

13、因为elemet.style只能获取内联样式，而element.currentStyle.width是IE浏览器专有属性，getComputedStyle(element, null).width是火狐和Chrome浏览器的特有属性，所以为了兼容，获取内外样式方法如下(不可取复合样式，如background，border，而是应该写成backgroundColor，borderWidth)：

function getStyle(obj,name) {
   if(obj.currentStyle) {
     return obj.currentStyle[name];
   }
   else
   {
     return getComputedStyle(obj,null)[name];
   }
}

以上所述就是本文的全部内容了，希望大家能够喜欢。

JavaScript DOM基础

DOM(Document Object Model)即文档对象模型,针对HTML和XML文档的API(应用程序接口); DOM描绘了一个层次化的节点树,运行开发人员可以添加/移除和修改页面的某一部分; 一 DOM介绍 D(文档):可以理解为整个Web加载的网页文档; O(对象):可以理解为类似window对象之类的东西,可以调用属性和方法,这里说的是document对象; M(模型):可以理解为网页文档的树形结构; 1.节点加载HTML页面时,Web浏览器生成一个树形结构,用来表示页面内部
JavaScript获取DOM元素的11种方法总结

在Web应用程序特别是Web2.0程序开发中,经常要获取页面中某个元素,然后更新该元素的样式.内容等.如何获取要更新的元素,是首先要解决的问题.令人欣慰的是,使用JavaScript获取节点的方法有很多种,这里简单做一下总结(以下方法在IE7和Firefox2.0.0.11测试通过): 1. 通过顶层document节点获取: (1) document.getElementById(elementId):该方法通过节点的ID,可以准确获得需要的元素,是比较简单快捷的方法.如果页面上含有多个相同i
JavaScript DOM操作表格及样式

一操作表格 <table>标签是HTML中结构最为复杂的一个,我们可以通过DOM来创建生成它,或者HTMLDOM来操作它; // 使用DOM来创建表格; var table = document.createElement('table'); table.border = 1; table.width = 300; var caption = document.createElement('caption'); table.appendChild(caption); caption.appe
JavaScript DOM进阶方法

DOM自身存在很多类型,在上一章中有介绍,比如Element类型:表示的是元素节点;再比如Text类型;表示的是文本节点; 一 DOM类型类型名说明 Node 表示所有类型值的统一接口,IE不支持; Document 表示文档类型; Element 表示元素节点类型; Text 表示文本节点类型; Comment
JavaScript学习笔记之DOM基础 2.4

DOM的发展,与WEB标准化的大趋势相关甚密.只有基于正确的语义逻辑,DOM才能正确地发挥其功用.如今,正确的语义结构.表现与内容分离等要求,都已经成为网页设计中的基本要求.因此,在网页前端开发中,DOM的存在,无疑是为表现层.行为层甚至内容层面的连接提供了一个绝佳的API,成为热门的Ajax应用中不可或缺的组成部分. 一.平稳退化 1.概念早期,在未使用JavaScript之前,网页中的内容可以正常显示出来,用户可以通过外设(如鼠标)操控浏览到相关内容,这种浏览体验对用户而言可能并不理想.
javascript基于DOM实现权限选择实例分析

本文实例讲述了javascript基于DOM实现权限选择的方法.分享给大家供大家参考.具体实现方法如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>权限选择</title> &
你所不了解的javascript操作DOM的细节知识点(一)

一:Node类型 DOM1级定义了一个Node接口,该接口是由DOM中的所有节点类型实现.每个节点都有一个nodeType属性,用于表明节点的类型,节点类型在Node类型中有以下几种: Node.ELEMENT_NODE(1); 元素节点 Node.ATTRIBUTE_NODE(2); 属性节点 Node.TEXT_NODE(3); 文本节点 Node.DOCUMENT_NODE(9); 文档节点其实还有很多种,但是那些都不是很常用,所以就来理解这其中4种就可以了,我们先来看看节点类型,比如如
JavaScript中DOM详解

为了达到平稳退化,向后兼容,标记分离的思想,每次写js代码时做的第一件事应该是必要的测试和检查工作: 在js文件里首先添加以下代码进行检查: window.onload = function(){ if(!document.getElementsByTagName) return false; if(!document.getElementById) return false; if(!document.getElementsByClassName) return false; if(!docu
JavaScript中Function详解

关键字function用来定义函数. 复制代码代码如下: //函数声明式定义: function funcname([arg1[,args[...,argn]]]){ statements } //函数表达式定义: var funcname = function ([arg1[,args[...,argn]]]){ statements }; 注意,function语句里的花括号是必需的,即使函数体只包含一条语句. 在JavaScript中,函数是Function类的具体实例.而且都与其它
JavaScript中Hoisting详解 (变量提升与函数声明提升)

本文主要给大家介绍了关于JavaScript中Hoisting(变量提升与函数声明提升)的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 如何将函数声明 / 变量 "移动" 到作用域的顶部. 术语 Hoisting(提升) 在很多 JavaScript 博文中被用来解释标识符的解析.其实 Hoisting(提升) 这个词是用来解释变量和函数声明是如何被提升到函数或全局作用域顶部的.你在任何的 JavaScript 文档中找不到这个术语,我们说的
JavaScript中this详解

都说 JavaScript 是一种很灵活的语言,这其实也可以说它是一个混乱的语言.它把函数式编程和面向对象编程糅合一起,再加上动态语言特性,简直强大无比(其实是不能和C++比的,^_^ ). 这里的主题是 this ,不扯远了.this 本身原本很简单,总是指向类的当前实例,this 不能赋值.这前提是说 this 不能脱离类/对象来说,也就是说 this 是面向对象语言里常见的一个关键字.说的极端点,如果你编写的 JS 采用函数式写法,而不是面向对象式,你所有的代码里 this 会少很多,
javascript中scrollTop详解

scrollTop 表示滚动的高度,默认从position:0;开始向下滚,scrollTop(offset)的offset表示相对顶部的偏移,以像素计,<br/> scrollTop()滚动的高度既能'设置'滚动值,也能'获取'滚动值. 当设置滚动值时,该方法就会设置所有匹配元素的滚动值. 当获取滚动值时,该方法只返回第一个匹配元素的滚动位置. 需要获取scrollTop的值,可以参考如下代码: 复制代码代码如下: var scrollTop = document.documentElem
Javascript 虚拟 DOM详解

目录什么是虚拟 dom? 为什么需要虚拟dom? 虚拟dom是如何转换为真实dom的? 模板和虚拟dom的关系注入挂载完整流程总结什么是虚拟 dom? 虚拟 dom 本质上就是一个普通的JS对象(mounted 中打印 this. _vnode 就是该对象内容),用于描述视图的界面结构在vue中,每个组件都有一个render函数,每个render函数都会返回一个虚拟dom树,这也就意味着每个组件都对应一棵虚拟DOM树 vnode 是一个普通的 JS 对象,用于描述界面上应该有什么,
JavaScript中BOM和DOM详解

目录 BOM(浏览器对象模型) 1. window 获取浏览器c窗口尺寸 2. screen 获取电脑屏幕大小 3. window 开启关闭窗口 4. 浏览器事件 5. location 6. history 7. navigator 获取浏览器相关信息 8. 弹窗 DOM (文档对象模型) DOM 分类 DOM对象 Document文档对象 element文档对象 DOM事件操作鼠标事件键盘事件触屏事件特殊事件表单事件浏览器兼容处理兼容性写法,封装工具 BOM(浏览器对象模型)
JavaScript中Dom操作实例详解

本文实例讲述了JavaScript中Dom操作.分享给大家供大家参考,具体如下: 博主将按照增删改查的方式来介绍一下Dom的主要操作. 1.增加节点添加节点的操作主要分为3步: (1)创建要添加的新节点 (2)找到要添加到的父节点 (3)父节点添加新节点参考代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Com
实现JavaScript的组成----BOM和DOM详解

我们知道,一个完整的JavaScript的实现,需要由三部分组成:ECMAScript(核心),BOM(浏览器对象模型),DOM(文档对象模型). 今天主要学习BOM和DOM. BOM: BOM提供了很多对象,用来访问浏览器的功能,这些功能于网页内容无关(这些是DOM的事),目前,BOM已经被W3C搬入了HTML5规范中. window对象: BOM的core,表示浏览器的一个实例,它既是通过javascript访问浏览器窗口的一个接口,又是ECMAScript规定的Global对象,这意味着在
Kotlin 语言中调用 JavaScript 方法实例详解

Kotlin 语言中调用 JavaScript 方法实例详解 Kotlin 已被设计为能够与 Java 平台轻松互操作.它将 Java 类视为 Kotlin 类,并且 Java 也将 Kotlin 类视为 Java 类.但是,JavaScript 是一种动态类型语言,这意味着它不会在编译期检查类型.你可以通过动态类型在 Kotlin 中自由地与 JavaScript 交流,但是如果你想要 Kotlin 类型系统的全部威力 ,你可以为 JavaScript 库创建 Kotlin 头文件. 内联 J

JavaScript中DOM详解

相关推荐

随机推荐