DOM

DOM：文档对象模型document object model

DOM三层模型：

DOM1；将HTML文档封装成对象

DOM2：将XML文档封装成对象

DOM3：将XML文档封装成对象

DOM树：将HTML中的标签按照层级关系封装成节点对象

DOM的出现使静态的HTML页面的标签变为动态的可操作的节点对象

DHTML：动态的HTML，是HTML、CSS、DOM、JavaScript四种技术的综合体

HTML：封装页面数据

CSS：设置标签中的数据样式

DOM：将标签封装成对象

JavaScript：将三者进行融合，通过程序设计方式完成动态效果的操作

标记型文档一加载进内存，内存中就产生了相应的DOM树，由此产生的弊端就是，文档国大时，消耗资源。对于大型文档，可用SAX方式解析。

HTML文档中的层次关系，DOM树的层次结构

document              HTML文档对象

|——head

|——title

|——base

|——meta

|——link

|——body

|——form

|——input

|——select

|——textarea

|——div

|——table

|——tbody     默认都有，不写也有

|——tr

|——td

|——th

|——a

……

将HTML文档及其中的标签都封装成对象，方便操作。

节点都有的属性：nodeName      nodeType        nodeValue

注意区分DOM代码中对象的属性和HTML、CSS代码中的属性写法上的不同

节点类型

标签型节点：nodeType为1，容器型节点的nodeValue为空null 没有值

文本型节点：名字#text              类型为3

注释型节点：#comment      类型为8

文档型节点：#document      类型为9

属性型节点：类型为2  属性可通过对象的attributes集合属性获取

节点关系

父节点：每个节点有且只有一个父节点    通过节点parentNode属性获取

子节点：可以有多个    通过节点childNodes属性获取子节点集合（数组）

兄弟节点：分上一个和下一个，通过previousSibling和nextSibling属性获取

注意页面中标签之间的空行也是文本节点，浏览器解析时可能出现也可能没有这个节点

获取节点的方法：

1、getElementById(HTML标签中定义的id值)

获取文档中指定id对应的标签对象，注意保证id值唯一；

如果多个标签id相同，获取的是id对应的第一个对象

<script type=”text/javascript”>

var divObj = document.getElementById(“divid”);

divObj.style.backgroundColor=”blue”;注意DOM代码与CSS代码的不同

</script>

<html>

<div id=”divid” style=”background-color:red”>div内部数据</div>

style属性中的内容为CSS代码，注意区分DOM中的相同属性名称

</html>

2、getElementsByName(HTML标签中定义的name值)

获取文档中所有与name值相同的标签对象，封装为数组返回

3、getElementsByTagName(HTML标签名)

获取文档中与指定标签名相同的所有对象，返回数组

容器型标签中都有该方法，如div、table、p

JS---DOM概述的更多相关文章

  1. 货架工程项目之js dom实现项目工程进度图

    笔者最近要负责有个项目工程网站的安装进度过程,实现的效果要求大概如下图所示 由于笔者没有参与到数据库的制作,得知他们这个项目设计工序的时候就一个开始日期的和完成日期,连整个项目的安装结束时间都没有简直 ...

  2. js DOM优化相关探索

    我在这尝试两个方面:-->DOM与js -->DOM与浏览器 (最近在秒味视频上学到不少,哈哈哈) 一.DOM与js 1.js与dom的交互问题 频繁的与dom交互,是一件浪费时间与金钱的 ...

  3. js DOM的几个常用方法

    <div id="div1">这是个测试</div> <p </p> <p </p> //js DOM的几个常用方法 / ...

  4. JS DOM 来控制HTML元素

    JS DOM 来控制HTML元素 (ps:这个有很多方法,挑一些详解,嘻嘻) 1.getElementsByName():获取name. ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ...

  5. JS Dom节点操作demo!

    通过黑马课程的学习,在这里分享一个js Dom中节点操作的小练习 需求:使用js创建一个4*3的表格table. onload = function(){ function c(tagName){ r ...

  6. Js DOM 详解

    DOM事件类 基本概念 DOM事件的级别 1.DOM0 element.onclick = function(){} 2.DOM2 element.addEventListener("cli ...

  7. JS DOM对象控制HTML元素详解

    JS DOM对象控制HTML元素详解 方法: getElementsByName()  获取name getElementsByTagName()  获取元素 getAttribute()  获取元素 ...

  8. css3动画和JS+DOM动画和JS+canvas动画比较

    css3兼容:IE10+.FF.oprea(animation):safari.chrome(-webkit-animation) js+dom:没有兼容问题: js+canvas:IE9+:(性能最 ...

  9. JS(DOM 和 BOM)

    JS(DOM 和 BOM) 常说的JS(浏览器执行的JS)包含两部分:1.JS基础知识(语法)(ECMA262标准)2.JS-Web-API(W3C标准) W3C 标准中关于 JS 的规定有:(只管定 ...

  10. JS DOM（文档对象模型）与BOM（浏览器对象模型）

    在JS中,对DOM(Document Object Model)对象和BOM(Browser Object Model )对象的操作是非常重要的内容.DOM主要包括HTML文档的属性和方法,像对HTM ...

随机推荐

  1. 整数转字符与字符转整数的C系统函数

    atoi (表示 alphanumeric to integer)是把字符串转换成整型数的一个函数 http://baike.baidu.com/link?url=VTP54JT5-EY5TL0GFf ...

  2. 一个可以拓展的垂直多级导航栏 Demo

    大四党忙忙碌碌找工作,博客荒废久矣,可谓:终日昏昏醉梦间,忽闻春尽强登山.因过竹院逢僧话,偷得浮生半日闲. 这是个垂直的导航栏,可以有无限多层的子级菜单,看代码注释就够了: <!DOCTYPE ...

  3. Android03－Activity生命周期及启动模式

    1.返回栈概念 2.生命周期 1. onCreate() 这个方法你已经看到过很多次了,每个活动中我们都重写了这个方法,它会在活动 第一次被创建的时候调用.你应该在这个方法中完成活动的初始化操作,比如 ...

  4. 限制TextBox输入，只能输入整数

    public class TextBoxInt : TextBox { public TextBoxInt() { KeyDown += TextBoxInt_KeyDown; TextChanged ...

  5. C语言入门（19）——C语言的编码风格

    代码风格好不好就像字写得好不好看一样,如果一个公司招聘秘书,肯定不要字写得难看的,同理,代码风格糟糕的程序员肯定也是不称职的.虽然编译器不会挑剔难看的代码,照样能编译通过,但是和你一个团队进行协作的其 ...

  6. Hadoop-Yarn-框架原理及运作机制（原理篇）

    文件为转载:http://blog.csdn.net/liuwenbo0920/article/details/43304243 一.YARN基本架构 YARN是Hadoop 2.0中的资源管理系统, ...

  7. 消除“Permission is only granted to system apps”错误

    遇见这个问题我百度搜了一大堆说是须要clean项目,可是我每次clean项目的时候我的R文件总是丢失. 如今我给大家介绍一下避免授予系统权限报错更改方法 在AndroidManifest.xml中使用 ...

  8. 开发汉澳即时通信网，2006年上线，QQ死期到了

    为汉澳sinox用户打造即时通信网让大家用上即时通信软件 近期腾讯关闭了linuxQQ登录,汉澳 sinox也登陆不上.非windows用户再也不能用上即时通信软件了! 这是多么可悲的事,可是我们必须 ...

  9. Sizzle一步步实现所有功能（层级选择）

    第二步:实现Sizzle("el,el,el..."),Sizzle("el > el"),Sizzle("el el"),Sizzl ...

  10. sqlserver数据库差异比较

    相信这个功能会对好多网友有帮助,不得不说vs的功能很强大,废话不多说,切入正题 我们可以使用 vs自带的工具比较两个数据库的架构差异和数据差异,这篇文章只是写了架构的差异,我相信看完以后, 如何进行数 ...