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. Servlet 浅谈（一）

    Servlet 的生命周期 类加载.实例化,init方法,service方法,destroy方法.关于这点,后面会有详细介绍. 什么是容器? 因为Servlet没有main方法,所以它受控于另一个Ja ...

  2. hibernate中先建表还是先建实体类

    在实际工作中往往是先建表然后再生成类原因:建好数据库表之后往往要对数据表进行一些优化,比如说建索引,比如说建中间表,比如建视图.如果先建类的话这些优化是无法生成的

  3. Android 圆形背景shape定义

    <?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http: ...

  4. 【Chromium中文文档】OS X 沙箱设计

    OS X 沙箱设计 转载请注明出处:https://ahangchen.gitbooks.io/chromium_doc_zh/content/zh//General_Architecture/OSX ...

  5. java改变图片文件尺寸

    package test.common; import java.awt.Graphics; import java.awt.Image; import java.awt.image.Buffered ...

  6. 在Linux下sqlplus 登录时显示SID 和用户名

    一般显示为: SQL> show user USER 为 "SYS" SQL> 在 $ORACLE_HOME/sqlplus/admin目录下 编辑glogin.sql ...

  7. rhel6.4 配置本地yum的源

    1 创建rhel-debuginfo.repo,如果有则先备份再删除       cd  /etc/yum.repos.d    rm  rhel-debuginfo.repo    vi  rhel ...

  8. 利用boost做string到wstring转换，以及字符集转换 - Error - C++博客

    利用boost做string到wstring转换,以及字符集转换 - Error - C++博客 利用boost做string到wstring转换,以及字符集转换 #include <boost ...

  9. mac隐藏或显示文件

    1,显示方法:在“终端” 输入命令 defaults write com.apple.finder AppleShowAllFiles TRUE killall Finder 重启Finder,系统隐 ...

  10. 高效搭建Spark全然分布式集群

    写在前面一: 本文具体总结Spark分布式集群的安装步骤,帮助想要学习Spark的技术爱好者高速搭建Spark的学习研究环境. 写在前面二: 使用软件说明 约定,Spark相关软件存放文件夹:/usr ...