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. poj3461Oulipo

    Description The French author Georges Perec (1936–1982) once wrote a book, La disparition, without t ...

  2. Javascript中undefined,NaN等特殊比较

    以下内容转自: http://blog.csdn.net/hongweigg/article/details/38090093 1.问题:在Javascript中,typeof(undefined) ...

  3. Redis深入学习（1）前言&Redis简介

    前言 最近工作上使用到Redis,当然以前也使用过redis,win,linux上都使用过,不系统,不深入,仅是头痛医头,脚痛医脚,这里整理一下自己的笔记,一来方便自己记忆,二来对同行提供借鉴,不足错 ...

  4. linux下小记

    今天碰到一个问题 记录下 /usr/bin/ld: cannot find ld 和ldconfig的区别 使用makefile编译的时候提示ld提示某个so找不到 当时使用ldconfig查了下 发 ...

  5. TPen的7种Style和16种Mode

    //TPen 的主要属性有四: Color.Width.Style.Mode {Color: 颜色} {Width: 宽度; 默认是 1; 如果赋予 <= 0 的值, 会使用默认值} {Styl ...

  6. C语言的本质（7）——C语言运算符大全

    C语言的本质(7)--C语言运算符大全 C语言的结合方向 C语言中各运算符的结合性分为两种,即左结合性(自左至右)和右结合性(自右至左).例如算术运算符的结合性是自左至右,即先左后右.如有表达式 x- ...

  7. JenKins 环境搭建 for Centos6.5

    1,JenKines简单介绍--图解

  8. aix puppet agent

    demo控制脚本tel,150 5519 8367 Running Puppet on AIX Puppet on AIX is… not officially supported, yet stil ...

  9. C# DataTable转实体 通用方法【转】

    public static T GetEntity<T>(DataTable table) where T : new()    {        T entity = new T();  ...

  10. 嵌入式OS入门笔记-以RTX为案例：六.RTX的任务调度

    嵌入式OS入门笔记-以RTX为案例:六.RTX的任务调度 上一篇笔记介绍了一些绕开排程器(或调度程序,scheduler)来进行时间管理的一些小方法.这一篇详细介绍RTX的任务调度原理. RTX主要有 ...