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. Unix下C程序内存泄露检测工具：valgrind的安装使用

    Valgrind是一款用于内存调试.内存泄漏检测以及性能分析的软件开发工具. Valgrind的最初作者是Julian Seward,他于2006年由于在开发Valgrind上的工作获得了第二届Goo ...

  2. Android 获取系统图库和相机照片 裁剪并显示

    接上一篇 package com.example.image; import android.app.Activity; import android.content.Intent; import a ...

  3. WdatePicker日历控件使用方法

    1. 跨无限级框架显示 无论你把日期控件放在哪里,你都不需要担心会被外层的iframe所遮挡进而影响客户体验,因为My97日期控件是可以跨无限级框架显示的 示例2-7 跨无限级框架演示 可无限跨越框架 ...

  4. django之HttpRequest对象

    class HttpRequest[source] 属性 所有的属性都是只读的,除非另有说明 HttpRequest.scheme 字符串(http/https)表示http还是https请求 Htt ...

  5. 《UNIX网络编程》UDP客户端服务器：消息回显

    udp写的程序相比tcp简单一些,在socket()与bind()之后,不需要connect(),accept()等步骤,直接简化为了sendto()与recvfrom(). 编译运行同前面的tcp. ...

  6. 使用Flex图表组件

    原文 http://blog.csdn.net/mylxiaoyi/article/details/1618470 使用Flex图表组件 以图表或是图的方式显示数据的能力可以使得Flex程序用户的数据 ...

  7. Firebug入门指南（转）

    据说,对于网页开发人员来说,Firebug是Firefox浏览器中最好的插件之一. 我最近就在学习怎么使用Firebug,网上找到一篇针对初学者的教程,感觉比较有用,就翻译了出来. 作者:Estell ...

  8. perl 正则命名捕获

    #!/usr/bin/perl -w =pod 命名捕获--给匹配上的内容加上标签 捕获到的内容都会保存在%+散列中,这个散列的key为对应的标签: 方便之处就是利于程序扩展和阅读,不用繁琐的一个一个 ...

  9. js调用打印机

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  10. JavaEE Tutorials (21) - Java EE安全：高级主题

    21.1使用数字证书331 21.1.1创建服务器证书332 21.1.2向证书安全域增加用户334 21.1.3为GlassFish服务器使用一个不同的服务器证书33421.2认证机制335 21. ...