javascript中的DOM分析

什么是Dom？

1.介绍

文档对象模型(DOM)是W3C推荐的处理可扩展标记语言的标准编程接口。文档模型的历史可以追溯到20世纪90年代末微软和网景之间的“浏览器战争”。为了在JavaScript和JScript中争个你死我活，双方都大规模赋予了浏览器强大的功能。微软在网页技术中加入了很多特殊的东西，包括VBScript、ActiveX和微软自己的DHTML格式，使得很多网页无法使用非微软平台和浏览器正常显示。DOM是当时的杰作。

DOM(文档对象模型)是一种用于HTML和XML的应用程序接口。DOM会将整个页面规划成一个由节点级别组成的文档。

所谓的文档对象模型，其实就是网页HTML中各种元素的内部表示，比如标题、段落、列表、样式、id等。所有元素都可以通过DOM访问。

归根结底，JavaScript就是操纵Html页面，把Html变成DHtml，操纵Html页面需要DOM。DOM将Html页面模拟为一个对象。如果JavaScript只执行一些计算、循环等操作，而不能操作Html，那就失去了意义。

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

2.说明

关于窗口整个页面或窗口是一个窗口对象-窗口是一个顶级对象。

页面中定义的变量和方法在窗口中。

window.id

document.getElementById()

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

例如：

window . alert(' hello ')；

可以省略为alert(' hello ')；

Window.document可以直接写文档。

如果写不出窗口，就不要写。这可以减少js文件中的字节数。

复制的代码如下： window . alert(‘大家好！’);//出现警告对话框窗口，弹出确认(()确定要删除吗？');//确认并取消对话框，返回真或假；window . navigate(URL)；//将网页重新导航到url，并支持IE和Opera11.6，不推荐。有些浏览器不起作用。

窗口；位置；建议使用href=' URL//支持大多数浏览器。

动态操作DOM元素。

1.去找多姆。

GetElementById()，(非常常用)，根据元素的Id获取对象，网页中的Id不能重复。您也可以通过元素的id直接引用它，但是它有一个有效的范围。

GetElementsByName()根据元素的名称获取对象。由于页面中元素的名称可以重复，例如多个RadioButton的名称，因此getElementsByName的返回值是一个对象数组。

GetElementsByTagName()，获取具有指定标记名的元素数组。例如，getElementsByTagName(“input”)可以获得所有的输入标签。*表示所有标签。

2.添加、移除和替换。

Document.write只能在页面加载期间动态创建。

可以调用文档的createElement方法创建一个带有指定标签的DOM对象，然后调用元素的appendChild()；方法将新创建的元素添加到相应的元素下。//父元素对象。removeChild(子元素对象)；删除元素。

create element(' element ')；创建一个节点。

appendChild(节点)；添加一个节点。

removeChild(节点)；移除节点。

replaceChild(新的、旧的)；替换节点。

InsertBefore(新的，引用)；在前面添加一个节点(将其插入节点前面)。

方法：

属性：

第一个孩子

最后一个孩子

使用innerHTML或createElement()、appendChild()和removeChild()？

页面元素是在innerHTML中操作还是在createElement()、appendChild()和removeChild()中操作？

1.对于大量的节点操作，innerHTML的性能要优于频繁的Dom操作(有专门用c或c编写的HTML解析器)。)。先写页面的HTML代码，然后调用innerHTML一次，而不是反复调用innerHTML。

2.在某些情况下，使用innerhtml=' ' '删除节点时会出现内存问题。例如，div下还有许多其他元素，每个元素都绑定了一个事件处理程序。此时，innerHTML只从节点树中移除当前元素，但是那些事件处理程序仍然占用内存。

Js操作风格。

修改后的元素的样式是类名属性。

(class是JavaScript中的保留字，属性不能使用关键字或保留字，所以变成了className。)打开和关闭网页上的灯的效果。

被修改元素的样式不能是这样的。style=' background-color : red '。

使用“样式。属性名称"来单独修改样式的属性。注意css中的属性名在JavaScript中操作时可能会有所不同，主要集中在属性名中带有-in的那些属性，因为-不能在JavaScript中作为属性或类名使用。

操作浮子式时。

ie : obj . style . style float=' right '；

其他浏览器：obj . style . CSS float=' right '；

表单对象

常用：点击()、聚焦()、模糊()；//相当于通过程序触发元素点击，获得焦点，失去焦点。

表单对象是表单的Dom对象。

方法：submit()提交表单，但不会触发onsubmit事件。

实现了自动发布，即在焦点离开控件后立即提交页面，而不是只在提交按钮后提交。当光标离开时，onblur事件被触发，表单的提交方法在onblur中被调用。

点击提交后，触发表单的onsubmit事件，可以在onsubmit验证数据。如果数据有任何问题，返回false取消提交。

以上是我个人对javascript的DOM的理解，希望大家能喜欢。