JavaScript之DOM总结

DOM (Document Object Model)即文档对象模型,针对 HTML 和 XML 文档的 API(应用程序接口),是一个能够让程序和脚本动态访问并且更新文档内容、结构及样式语言平台 。D(document),是web加载的网页文档;O(Object),我们熟知的对象,可以调用属性和方法;而M(Model)理解为网页文档的结构。

主要内容概括如下:

DOM将web浏览器加载HTML而生成的树型结构,分成了节点:

其中这些我们在之前的学习过程中都已经接触过,而meta相对来说比较陌生,它的主要用途是设置网页语言的编码方式。一般出现在网页标题部分,但是不会在浏览器页面显示,只会显示在源代码中。

这些节点一般都分为三类:元素节点、文本节点和属性节点。例如<div title=”属性”>测试</div>,div就表示元素节点,title=”属性”为属性节点,“测试”就是文本节点。

DOM类型与节点的类型有很多相似的地方,比如在DOM的Node类型中同样存在元素、属性和文本,他们的存在是为了获取节点中的对应属性值,比如:Node.ELEMENT_NODE可以获取元素节点类型值。

在DOM扩展中,有一个滚动方法,主要用于页面信息过多时,可以设置加载想要的位置。那么这个是否可以应用于评教中呢?大家都知道在评教系统中,如果有一个选项没有选择时,会提示有选项没有选,但是不会跳转到对应的位置。那么,这个方法不就可以实现该跳转吗?具体是否能够实现,有待今后继续学习。

为了减少程序中的代码量,使用DOM可以动态的为网页添加CSS样式、脚本等,实现程序代码与CSS、js等的分离,易于扩展,为我们的程序维护带来很大的便利。

总结:

通过这段时间的学习,对js才算是真正的入门。在之前的学习过程中,只了解了基础知识,具体如何应用现在刚刚开始。DOM中的一些操作,让自己想到了牛腩中的很多方法,之前都是不太了解,仅仅知道能够实现功能,具体的原理却是不清楚。学完这部分内容之后,才摸到一些门道,知道了为什么。但是,想要深入了解,还需进一步学习。。。

时间: 2024-10-15 00:12:36

JavaScript之DOM总结的相关文章

JavaScript总结--DOM

对于Web前端开发,归根结底是三部分内容: 结构:HTML 表现:CSS 行为:JavaScript 在行为方面,主要是由JavaScript通过DOM对网页进行操作来实现的.DOM(Document Object Model),即文档对象模型,可以理解为一种接口. 用导图总结一下DOM涉及的内容. 这里,我们经常用的操作就是元素的获取,添加,如:getElementById,CreateElement,appendChild.不论是之后学的JQuery,还是Ajax,都要对网页进行操作,所以D

JavaScript HTML DOM 元素(节点)

JavaScript HTML DOM 元素(节点) 创建新的 HTML 元素 创建新的 HTML 元素 如需向 HTML DOM 添加新元素,您必须首先创建该元素(元素节点),然后向一个已存在的元素追加该元素. 实例 <div id="div1"><p id="p1">This is a paragraph.</p><p id="p2">This is another paragraph.<

Javascript操作DOM常用API总结

Javascript操作DOM常用API总结 原文地址:http://luopq.com/2015/11/30/javascript-dom/ 类型 Node类型(ELEMENT_NODE:1 ATTRIBUTE_NODE:2 TEXT_NODE:3 COMMENT_NODE:8``DOCUMENT_NODE:9 DOCUMENT_FRAGMENT_NODE:11) 节点创建型(createElement createTextNode cloneNode createDocumentFragme

深入理解JavaScript系列(23):JavaScript与DOM(上)——也适用于新手

文档对象模型Document Object Model DOM(Document Object Model,文档对象模型)是一个通过和JavaScript进行内容交互的API. Javascript和DOM一般常常作为一个总体,由于Javascript通常都是用来进行DOM操作和交互的. 主要内容来自:http://net.tutsplus.com/tutorials/javascript-ajax/javascript-and-the-dom-series-lesson-1/ 关于DOM.有些

JavaScript与DOM(上)

本来像自己写一篇的...结果看到了Tom uncle的这篇..总结的确实很赞,其他文章也非常好推荐 转载自:http://www.cnblogs.com/TomXu/archive/2011/12/15/2288411.html 文档对象模型Document Object Model DOM(Document Object Model,文档对象模型)是一个通过和JavaScript进行内容交互的API.Javascript和DOM一般经常作为一个整体,因为Javascript通常都是用来进行DO

JavaScript HTML DOM EventListener

JavaScript HTML DOM EventListener addEventListener() 方法 实例 点用户点击按钮时触发监听事件: document.getElementById("myBtn").addEventListener("click", displayDate); 尝试一下 » addEventListener() 方法用于向指定元素添加事件句柄. addEventListener() 方法添加的事件句柄不会覆盖已存在的事件句柄. 你可

javascript操作DOM方法整理

原自本人整理,主要来源于这里.大家如果有补充,十分欢迎大家留言. 一.获取节点 document.getElementById();//id="" document.getElementsByName();//name="" document.getElementsByTagName();//"input" document.getElementsByClassName();//class="" 二.css选择器 docume

高性能Javascript(2) DOM编程

第三部分 DOM编程 文档对象模型(DOM)是一个独立于语言的,使用XML和HTML文档操作的应用程序接口(API).在浏览器中,主要与HTML文档打交道,在网页应用中检索XML文档也很常见.DOM APIs主要用于访问这些文档中的数据.尽管DOM是与语言无关的API,在浏览器中的接口却是以JavaScript实现的.客户端大多数脚本程序与文档打交道,DOM就成为JavaScript代码日常行为中重要的组成部分. 2.1 DOM Access and Modification  DOM访问和修改

javascript之DOM优化

DOM访问和操作是现代网页应用中很重要的一部分.但每次你通过“桥梁”从ECMAScript到DOM时,都会被收取“过路费”.为减少DOM编程中的性能损失,具体要注意的有: 一.最小化DOM访问,在javascript端做尽可能多的事. Js代码   function innerHTMLLoop() { for (var count = 0; count < 15000; count++) { document.getElementById('here').innerHTML += 'a'; }

JavaScript网站设计实践(四)编写about.html页面,利用JavaScript和DOM,选择性的显示和隐藏DIV元素

一.现在我们在网站设计(三)的基础上,来编写about.html页面. 这个页面要用到的知识点是利用JavaScript和DOM实现选择性地显示和隐藏某些DIV about.html页面在前面我们为了看导航栏菜单项高亮显示时,已经写了部分内容,只是那时写的代码没有实现div显示和隐藏,现在就在之前编写的基础上,为页面添加显示和隐藏div的效果. 没有写JavaScript之前看到的效果: 实现后的效果图: 这个就是我们现在要做的效果. 1.背景: 我们在about.html页面中写了一个ul列表