HTML DOM总结

MDN的定义

文档对象模型 (DOM) 是 HTML 和 XML 文档的编程接口。它给文档(结构树)提供了一个结构化的表述并且定义了一种方式—程序可以对结构树进行访问,以改变文档的结构,样式和内容。 DOM 提供了一种表述形式— 将文档作为一个结构化的节点组以及包含属性和方法的对象。从本质上说,它将 web 页面和脚本或编程语言连接起来了。

DOM核心API

在DOM编程时,通常使用的最多的就是 Document和 window 对象。 window 对象表示浏览器中的内容,是根元素。而 document 对象是文档本身的根节点。Element 继承了通用的 Node 接口

  1. document.getElementById(id)
  2. element.getElementsByTagName(name)
  3. document.createElement(name)
  4. parentNode.appendChild(node)
  5. element.innerHTML
  6. element.style.left
  7. element.setAttribute
  8. element.getAttribute
  9. element.addEventListener
  10. window.onload

接口及对象

许多对象会对多个不同的接口进行实现。比如table对象实现了HTML Table Element Interface ,由于table对象也是一个HTML元素,所以也实现了Element接口,最后,其还是节点数中的一个节点,所以更基本的还实现了Node接口

属性操作

  1. // 获取一个{name, value}的数组
  2. var attrs = el.attributes;
  3. // 获取、设置属性
  4. var c = el.getAttribute(‘class‘);
  5. el.setAttribute(‘class‘, ‘highlight‘);
  6. // 判断、移除属性
  7. el.hasAttribute(‘class‘);
  8. el.removeAttribute(‘class‘);
  9. // 是否有属性设置
  10. el.hasAttributes();

来自为知笔记(Wiz)

时间: 2024-10-14 18:54:37

HTML DOM总结的相关文章

虚拟DOM

DOM(Document Object Model)是很慢的,其元素非常庞大,页面的性能问题鲜有由JS引起的,大部分都是由DOM操作引起的.如果对前端工作进行抽象的话,主要就是维护状态和更新视图:而更新视图和维护状态都需要DOM操作. 在jQuery出现以前,我们直接操作DOM结构,这种方法复杂度高,兼容性也较差:有了jQuery强大的选择器以及高度封装的API,我们可以更方便的操作DOM,jQuery帮我们处理兼容性问题,同时也使DOM操作变得简单:MVVM使用数据双向绑定,使得我们完全不需要

JS学习--DOM

1.概念 文档对象模型DOM,定义访问和处理HTML文档的标准方法.DOM将HTML呈现为带有元素.属性和文本的树结构(节点树). 2.document.getElementById("id")--获取的是一个元素对象. documment.getElementById("id").innerHTML--才可获取其中的内容. 3.HTML样式 Object.style.property=new style;部分属性: 如: mychar.style.color=&q

高性能WEB开发:DOM编程

我们知道,DOM是用于操作XML和HTML文档的应用程序接口,用脚本进行DOM操作的代价很昂贵.有个贴切的比喻,把DOM和Javascript(这里指ECMscript)各自想象为一个岛屿,它们之间用收费桥梁连接,ECMAscript每次访问DOM,都要途径这座桥,并交纳"过桥费",访问DOM的次数越多,费用也就越高.因此,推荐的做法是尽量减少过桥的次数,努力待在ECMAscript岛上.我们不可能不用DOM的接口,那么,怎样才能提高程序的效率? 1.DOM访问与修改 访问DOM元素是

dom方法insertAfter的实现

在dom的原生api中,只用insertBefore,没有insertAfter,借助原有的api,可以模拟一个insterAfter. function insterAfter(newElement,targetElement){ var parent = targetElement.parentNode; if(parent.lastChild == targetElement){ parent.appendChild(newElement); } else{ parent.insertBe

第十章—DOM(0)—NODE类型

DOM1定义了一个node接口,该接口由DOM的所有节点类型实现. 所有的节点都存在这样或那样的关系.在HTML中,head,body可以看出是html的子元素,html是head,body的父元素,而head,body互为同胞元素. 这里要注意一个概念:nodeList 输出: 如下例子: 1 <div id="myDiv"> </div><!-- 此处有空格 --> 2 <script> 3 var div = document.ge

对dom的初步了解

什么叫DOM,DOM是文档对象模型Document Object Model DOM树 : 根结点(document) 父结点(parentNode) 子结点(childNodes) 兄弟结点 兄弟结点 sibling) (sibling) DOM在HTML文档中常见的几种结点类型:1.DOCUMENT_NODE (document)文档根结点类型,该枚举型的值是9. 2.ELEMENT_NODE (element)元素结点类型,该枚举型的值是1.上文中的html, body, div这些结点都

DOM基础(一)

在我们刚刚学JavaScript的时候,就应该听说过,JavaScript是由三部分组成的.分别是ECMAScript,DOM和BOM组成的.ECMAScript是JavaScript的核心,它描述了JavaScript的基本语法和对象,DOM则是描述了处理网页内容的方法和接口,而BOM描述了与浏览器进行交互的方法和接口.在我之前的关于JS入门系列的文章里,就讲了许多关于JavaScript的基本语法和对象,也就是ECMAScript.而在这个DOM系列的文章里,我将会介绍一些关于DOM的基础.

python2.0_s12_day13_javascript&amp;Dom&amp;jQuery

今天主要内容:JavaScriptDomjQuery http://www.cnblogs.com/wupeiqi/articles/5369773.html 今天主要内容大致了解:javascript 1.首先要知道 JavaScript 和 Java 没有半毛钱关系. 2.JavaScript 和python语言 一样 它也是一门语言.对于python语言需要用python解释器解释.而javascript的解释器是浏览器. 3.javascript 能实现什么.javascript就是让我

BOM和DOM

BOM 浏览器对象模型 BOM中的对象 Window对象:是指窗口对象,可通过Window对象的属性和方法控制窗口,例如打开或关闭一个窗口 History对象:指历史页面,通过History对象的属性和方法实现前进后退的功能 Location对象:指地址栏,通过属性的方法控制页面的跳转 Document对象:指网页中的内容,通过属性和方法控制页面元素 1.Window对象的常用方法: open(); close(); alert(); prompt(); confim(); setTimeout

JavaScript实现绑定DOM的定时器插件

问题 使用原生的setTimeout和setInterval仅仅能够实现, 定时执行事件处理函数, 在网页开发中, 往往会出现一种情况,定时器用于定时更新某个页面区域的数据, 往往在页面加载之后, 就启动这个定时器, 往后则间隔执行此定时器. 页面上定时刷新的区域可能会动态消失, 特别是在ajax被广泛使用的今天, 如果定时刷新的区域被删除了, 则定时器材也需要自动清除掉. 此二个接口,如果实现这种效果需要, 自己维护定时器句柄, 并且在处理定时器事件函数的时候, 首先判断 指定的刷新区域是否还