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. HDU1789（Doing Homework again）题解

    HDU1789(Doing Homework again)题解 以防万一,题目原文和链接均附在文末.那么先是题目分析: [一句话题意] 给定任务分数和其截止日期,每日可完成一任务,输出当罚分尽可能小时 ...

  2. python学习笔记：python对象

    一.python对象 python使用对象模型来存储数据,构造任何类型的值都是一个对象.所有的python对象都拥有三个特性:身份.类型和值. 身份:每个对象都有一个唯一的身份标识自己,对象的身份可以 ...

  3. webpack 多入口配置

    同事套搭建vue项目,个人推荐了VUE官网的vue-cil的方式,http://cn.vuejs.org/guide/application.html 顺着官网的操作,我们可以本地测试起我们的项目 n ...

  4. MySQL Workbench是一款专为MySQL设计的ER/数据库建模工具

      MySQL  Workbench是一款专为MySQL设计的ER/数据库建模工具.它是著名的数据库设计工具DBDesigner4的继任者.你可以用MySQL  Workbench设计和创建新的数据库 ...

  5. 稀疏图（邻接链表），并查集，最短路径（Dijkstra，spfa），最小生成树（kruskal，prim）

    全部函数通过杭电 1142,1162,1198,1213等题目测试. #include<iostream> #include<vector> #include<queue ...

  6. 4x4矩阵键盘扫描

    4x4矩阵键盘扫描 Windows 10 IoT Core 是微软针对物联网市场的一个重要产品,与以往的Windows版本不同,是为物联网设备专门设计的,硬件也不仅仅限于x86架构,同时可以在ARM架 ...

  7. SQL Server IO系统问题解决

    方法 1. 查询是不是真的要返回这么多的数据. 方法 2. 查询是不是系统的内存不足. 方法 3. 检查查询要访问的数据是不是不常用.如果这个数据不常用,它没有在内存中也就不奇怪了. 方法 4. 是不 ...

  8. Balsamiq Mockups registration code

    最近使用Mockups 进行页面原型设计,发现是未注册的,于是网上查询了下注册码,居然有效,在此记录下.    有需要的朋友也可以试试. Name:Rick Dong     Key:eNrzzU/O ...

  9. zookeeper watch 节点

    zjtest7-redis:/root/zk# cat a1.pl use ZooKeeper; use AnyEvent; use AE; use Data::Dumper; use IO::Soc ...

  10. （译）iPhone: 用公开API创建带小数点的数字键盘 (OS 3.0, OS 4.0)

    (译)iPhone: 用公开API创建带小数点的数字键盘 (OS 3.0, OS 4.0) 更新:ios4.1现在已经将这个做到SDK了.你可以设置键盘类型为UIKeyboardTypeDecimal ...