浅析javascript中的DOM

  本文主要给大家简单介绍了是什么是DOM、动态操作DOM元素的方法、使用jsjs操作样式以及Form对象的简介,是个人对于javascript中的DOM的理解的总结,推荐给小伙伴们。

  什么是Dom?

  1.简介

  文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标志语言的标准编程接口。Document Object Model的历史可以追溯至1990年代后期微软与Netscape的“浏览器大战”,双方为了在JavaScript与JScript一决生死,于是大规模的赋予浏览器强大的功能。微软在网页技术上加入了不少专属事物,计有VBScript、ActiveX、以及微软自家的DHTML格式等,使不少网页使用非微软平台及浏览器无法正常显示。DOM即是当时蕴酿出来的杰作。

  DOM(文档对象模型)是HTML和XML的应用程序接口(API)。DOM将把整个页面规划成由节点层级构成的文档。

  所谓文档对象模型,其实就是对网页HTML中的各种元素的一种内部的表示,例如HTML中的头、段落、列表、风格、ID等,所有的元素都能通过DOM来访问 。

  JavaScript最终是要操作Html页面,让Html变成DHtml,而操作Html页面就要用到DOM。DOM就是把Html页面模拟成一个对象,如果JavaScript只是执行一些计算、循环等操作,而不能操作Html也就失去了它存在的意义。

  DOM就是Html页面的模型,将每个标签都做为一个对象,JavaScript通过调用DOM中的属性、方法就可以对网页中的文本框、层等元素进行编程控制。比如通过操作文本框的DOM对象,就可以读取文本框中的值、设置文本框中的值。

  2.图解


  关于window整个页面或者说窗口就是一个window对象---------------window是顶级对象

  页面中定义的变量和方法都是window的

  window.id

  document.getElementById()

  使用window对象的属性、方法的时候可以省略window。

  比如:

  window.alert(‘hello');

  可以省略成alert(‘hello');

  window.document可以直接写document

  能不写window就不要写,这样可以减少js文件的字节数。

  复制代码 代码如下:

  window.alert(‘大家好!');//弹出警告对话框

  window.confirm(‘确定要删除吗?');//确定、取消对话框,返回true或false;

  window.navigate(url);//将网页重新导航到url,支持IE、Opera11.6。并不推荐,有些浏览器不行,

  建议使用window.location.href=‘url';//支持大多数浏览器

  动态操作DOM元素

  1.获取DOM

  getElementById(), (非常常用),根据元素的Id获得对象,网页中id不能重复。也可以直接通过元素的id来引用元素,但是有有效范围、

  getElementsByName(),根据元素的name获得对象,由于页面中元素的name可以重复,比如多个RadioButton的name一样,因此getElementsByName返回值是对象数组。

  getElementsByTagName(),获得指定标签名称的元素数组,比如getElementsByTagName(“input”)可以获得所有的标签。*表示所有标签

  2.添加、移除、替换

  document.write只能在页面加载过程中才能动态创建。

  可以调用document的createElement方法来创建具有指定标签的DOM对象,然后通过调用某个元素的appendChild();方法将新创建元素添加到相应的元素下。//父元素对象.removeChild(子元素对象);删除元素。

  createElement(‘element');创建一个节点

  appendChild(node); 追加一个节点

  removeChild(node);移除一个节点

  replaceChild(new,old);替换一个节点

  insertBefore(new,参照);把节点加到前面(插到某个节点前面)

  方法:

  属性:

  firstChild

  lastChild

  3.用innerHTML还是createElement()、appendChild()与removeChild()?

  操作页面的元素的时候是用innerHTML的方式还是createElement()、appendChild()与removeChild()的方式?

  1.对于大量进行节点操作时,使用innerHTML的方式性能要好于频繁的Dom操作(有专门用C或C++写的html解析器。)。先将页面的HTML代码写好,然后调用一次innerHTML,而不要反复调用innerHTML.

  2.对于使用innerHTML=‘'的方式来删除节点,在某些情况下会存在内存问题。比如:div下面有很多其他元素,每个元素都绑定有事件处理程序。此时,innerHTML只是把当前元素从节点树上移除了,但是那些事件处理程序依然占用内存。

  js操作样式

  修改元素的样式是className属性。

  (class是JavaScript的一个保留字,属性不能用关键字、保留字所以就变成className了)网页开关灯的效果。

  修改元素的样式不能this.style="background-color:Red"。

  单独修改样式的属性使用“style.属性名”。注意在css中属性名在JavaScript中操作的时候属性名可能不一样,主要集中在那些属性名中含有-的属性,因为JavaScript中-是不能做属性、类名的。

  操作float样式的时候

  IE:obj.style.styleFloat=‘right';

  其他浏览器:obj.style.cssFloat=‘right';

  Form对象

  常用:click(),focus(),blur();//相当于通过程序来触发元素的单击、获得焦点以及失去焦点的事件。

  form对象是表单的Dom对象。

  方法:submit()提交表单,但是不会触发onsubmit事件。

  实现autopost,也就是焦点离开控件以后页面立即提交,而不是只有提交submit按钮以后才提交,当光标离开的时候触发onblur事件,在onblur中调用form的submit方法。

  在点击submit后form的onsubmit事件被触发,在onsubmit中可以进行数据校验,如果数据有问题,返回false即可取消提交

 

  以上所述就是个人对于javascript的DOM的理解了,希望大家能够喜欢。

 

时间: 2024-10-03 12:17:13

浅析javascript中的DOM的相关文章

浅析javascript中函数声明和函数表达式的区别

这篇文章主要介绍了浅析javascript中函数声明和函数表达式的区别,需要的朋友可以参考下     javascript中声明函数的方法有两种:函数声明式和函数表达式. 区别如下: 1).以函数声明的方法定义的函数,函数名是必须的,而函数表达式的函数名是可选的. 2).以函数声明的方法定义的函数,函数可以在函数声明之前调用,而函数表达式的函数只能在声明之后调用. 3).以函数声明的方法定义的函数并不是真正的声明,它们仅仅可以出现在全局中,或者嵌套在其他的函数中,但是它们不能出现在循环,条件或者

浅析 JavaScript 中的 函数 currying 柯里化

原文:浅析 JavaScript 中的 函数 currying 柯里化 何为Curry化/柯里化? curry化来源与数学家 Haskell Curry的名字 (编程语言 Haskell也是以他的名字命名). 柯里化通常也称部分求值,其含义是给函数分步传递参数,每次传递参数后部分应用参数,并返回一个更具体的函数接受剩下的参数,这中间可嵌套多层这样的接受部分参数函数,直至返回最后结果.因此柯里化的过程是逐步传参,逐步缩小函数的适用范围,逐步求解的过程. 柯里化一个求和函数 按照分步求值,我们看一个

浅析Javascript中bind()方法的使用与实现_javascript技巧

我们先来看一道题目 var write = document.write; write("hello"); //1.以上代码有什么问题 //2.正确操作是怎样的 不能正确执行,因为write函数丢掉了上下文,此时this的指向global或window对象,导致执行时提示非法调用异常,所以我们需要改变this的指向 正确的方案就是使用 bind/call/apply来改变this指向 bind方法 var write = document.write; write.bind(docum

深入浅析JavaScript中的Function类型_javascript技巧

Function是javascript里最常用的一个概念,javascript里的function是最容易入手的一个功能,但它也是javascript最难理解最难掌握的一个概念. 1. Function类型是js中引用类型之一,每个函数实际上都是Function类型的实例对象,具有自己的属性和方法.正因为函数式对象,所以函数名实际上也是一个指向函数对象的指针. 2. 常用的函数定义方式 1. 函数声明: function sum(a , b ){ return a+b; } 2. 表达式: va

浅析JavaScript中浏览器的兼容问题_javascript技巧

浏览器兼容性问题是在实际开发中容易忽略而又最重要的一部分.我们在讲老版本浏览器兼容问题之前,首先要了解什么是能力检测,它是来检测浏览器有没有这种能力,即判断当前浏览器是否支持要调用的属性或者方法.下面做了一些简短的介绍. 1.innerText 和 innerContent 1)innerText 和 innerContent 的作用相同 2)innerText IE8之前的浏览器支持 3)innerContent 老版本的Firefox支持 4)新版本的浏览器两种方式都支持 1 // 老版本浏

浅析javascript中的事件代理_javascript技巧

本文的主要内容是根据前不久面试某家公司Web前端开发岗位,面试时做的一道数组去重问题的解题思路进行整理的,分享给大家. 题目本身很简单:一个ul中有一千个li,如何给这一千个li绑定一个鼠标点击事件,当鼠标点击时alert出这个li的内容和li的位置坐标xy, <ul id="ulItem"> <li id="li1">1</li> <li id="li2">2</li> <li

浅析JavaScript中的事件机制

  这篇文章主要介绍了JavaScript中的事件机制,即JS与HTML的一般交互,需要的朋友可以参考下 事件是什么 ? JavaScript与HTML交互是通过在用户或浏览器操纵页面上发生的事件进行处理. 当页面加载,这是一个事件.当用户点击一个按钮,这一下,也就是一个事件.事件的另一个例子是类似按下任意键,关闭窗口,调整窗口等. 开发者可以使用这些事件执行JavaScript编码响应,这引起按钮以关闭视窗,消息,以便显示给用户,要验证的数据,以及几乎任何其它类型的响应可以发生的. 事件是文档

JavaScript中对DOM节点的访问、创建、修改、删除_基础知识

DOMDOM就是Document object Model的缩写.文档对象模型是把XML或HTML以树节点为表现形式的文档.用DOM方法和属性,你可以访问,修改,删除页面上任意一个元素,也是可以添加一个元素.DOM是独立于语言的API,可以被任意语言所实现,当然也包括了Javascript 看看下面的一个文本. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/x

浅析JavaScript中的array数组类型系统_javascript技巧

前面的话 数组是一组按序排列的值,相对地,对象的属性名称是无序的.从本质上讲,数组使用数字作为查找键,而对象拥有用户自定义的属性名.javascript没有真正的关联数组,但对象可用于实现关联的功能 Array()仅仅是一种特殊类型的Object(),也就是说,Array()实例基本上是拥有一些额外功能的Object()实例.数组可以保存任何类型的值,这些值可以随时更新或删除,且数组的大小是动态调整的 除了对象之外,数组Array类型可能是javascript中最常用的类型了.而且,javasc