DOM（Document Object Model），中文名称为文档对象模型。是处理可扩展标识语言的标准编程接口，主要针对HTML和XML。DOM描绘了一个层次化的节点树，开发者能够加入、改动和移除页面的某一部分，也就说改变文编的内容和呈现方式。

D（Document）：能够理解为整个Web载入的网页文档。

O（Object）：对象。能够调用属性和方法。

M（Model）：能够理解为网页文档的树型结构。一个节点有分支。

先对DOM有一个简单的介绍，在从基础来学习一下DOM,DOM有自己的节点和元素。

DOM的树型就是由节点组成的，W3C提供了比較方便的定位节点的方法和属性，这样我们就能够对节点进行操作，找到所须要的值。

查找元素节点的方法：

getElementById() :获取特定ID元素的节点

getElementsByTagName():获取同样元素的节点列表

getElementsByName():获取同样名称的节点列表

getAttribute():获取特定元素节点属性的值

setAttribute():设置特点元素节点属性的值

removeAttribute():移除特定元素节点属性

查找元素节点的方法有非常多。我就以getElementById()为例。来说明一下获取元素节点的方法：

window.onload=function (){

varbox =document.getElementById('box');

alert(box);

};

显示效果：

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">

节点：

节点（node）：了解什么是节点（JavaScript节点）相当于树分叉的地方，通过以下的图我们就能非常清晰的了解节点。

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">

节点分这么多种，我们怎样来划分元素节点、属性节点、文本节点呢？这是一个小样例，能说明各个的差别：

 <HTML>

<HEAD>

<TITLE>生活</TITLE>

</HEAD>

<BODY>

    <table>

        <tr>

            <td id="john" name="myname">John</td>

            <td>Doe</td>

            <td id="jack">Jack</td>

        </tr>

    </table>

    <script>

        var d = document.getElementById("john");

        alert(d.nodeType)

        alert(d.nodeName)

        alert(d.nodeValue)

    </script>

</BODY>

</HTML>

输出结果：其三个属性的值分别为：

nodeType:ELEMENT_NODE

nodType值:1

nodeName（元素标记 ）：td

nodeValue:null

经过这个过程，对于DOM有一个初步的了解，DOM的发展，基本组成，以及元素、节点的属性。在当中有大量是讲的方法。元素方法、节点操作方法，这些方法的学习为以后做基础，期待有更一步的提高。

DOM基础----DOM（一）的更多相关文章

  1. JavaScript基础—dom,事件

    Js基础-DOM 1:dom:文档对象模型 Dom就是html页面的模型,将每个标签都作为一个对象,js通过调用dom中的属性,方法就可以对网页中的文本框,层等元素进行编程控制.Dom就是一些让jav ...

  2. HTML DOM基础知识

    HTML DOM基础知识 一.什么是DOM? 1.HTML DOM 定义了访问和操作HTML文档的标准方法. 2.HTML DOM 把 HTML 文档呈现为带有元素.属性和文本的树结构(节点树). 3 ...

  3. Javascript DOM基础（一）概念

    Dom基础概念: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" ...

  4. jQuery DOM基础

    jQuery DOM基础 1.对元素内容的获取和修改: 表单用value(),普通元素用html()和text(). html()  html(value)设置和获取html内容,有html标签会自动 ...

  5. 基础DOM和CSS操作(三)

    CSS方法 jQuery不但提供了CSS的核心操作方法,比如.css()..addClass()等.还封装了一些特殊功能的CSS操作方法,我们分别来了解一下. width()方法 方法名 描述 wid ...

  6. 基础DOM和CSS操作(二)

    元素样式操作 元素样式操作包括了直接设置CSS样式.增加CSS类别.类别切换.删除类别这几种操作方法.而在整个jQuery使用频率上来看,CSS样式的操作也是极高的,所以需要重点掌握. CSS操作方法 ...

  7. 基础DOM和CSS操作(一)

    DOM简介 DOM是一种文档对象模型,方便开发者对HTML结构元素内容进行展示和修改.在JavaScript中,DOM不但内容庞大繁杂,而且我们开发的过程中需要考虑更多的兼容性.扩展性.在jQuery ...

  8. js入门——Dom基础

    DOM=DocumentObject Model,文档对象模型. Dom有三个不同的部分. 1.核心DOM 也是最基础的文档结构的标准模型 2.XMLDOM 针对XML文档的标准模型 3.HTML D ...

  9. 第一百一十三节，JavaScript文档对象，DOM基础

    JavaScript文档对象,DOM基础 学习要点: 1.DOM介绍 2.查找元素 3.DOM节点 4.节点操作 DOM(Document Object Model)即文档对象模型,针对HTML和XM ...

随机推荐

  1. ACM_支离破碎（递推dp）

    支离破碎 Time Limit: 4000/2000ms (Java/Others) Problem Description: 远古时期有一位魔王想向一座宫殿里的公主求婚.为了考验魔王的智力,太后给了 ...

  2. 4、Collection接口功能测试（所有的All方法）

    package cn.itcast_01; import java.util.ArrayList; import java.util.Collection; /* * 所有带All的方法:(听完就忘) ...

  3. Nginx 404 500

    Nginx反向代理自定义404错误页面 http中添加 proxy_intercept_errors on; server中添加 error_page 404 = https://www.longda ...

  4. 对比JavaScript的入口函数和jQuery的入口函数

    JavaScript的入口函数要等到页面中所有的资源(包括图片.文件)加载完成才开始执行. jQuery的入口函数只会等待文档数加载完成就开始执行,并不会等待图片.文件的加载.

  5. Android 通用Dialog中设置RecyclerView

    通用Dialog public class IOSRecyclerViewDialog{ private Context context; private Dialog dialog; private ...

  6. SQL Server将数据导出到SQL脚本文件

    http://www.studyofnet.com/news/list-8883.2-1-4.html 一.SQL Server 2008将数据导出到SQL脚本文件 1.打开SQL Server200 ...

  7. CorelDRAWX8新功能摆脱传统工作模式

    最近,有一则好消息CorelDRAW X8特惠啦!功能不少价格却不高的CDR X8很快成了设计师们的新宠,三折之后你动心了么? 点击这里了解更多.. 那么CDR X8到底有何功能和亮点呢? 完全可自定 ...

  8. vc++如何创建程序01

    1 .选择文件+新建(ctrl+N),然后选择一个空的工程,完成 2 然后在选择file新建,在files文件下面选择一个C++Source File,并取个文件名(比如为point可以不带.c) 我 ...

  9. poj 3669 bfs（这道题隐藏着一个大坑）

    题意 在x,y坐标系,有流星会落下来,给出每颗流星落下来的坐标和时间,问你能否从(0,0)这个点到一个安全的位置.所谓的安全位置就是不会有流星落下的位置. 题解: 广搜,但是这里有一个深坑,就是搜索的 ...

  10. linux下查看mysql版本的四种方法

    Linux查看MySQL版本的四种方法 1 在终端下执行 mysql -V 2 在help中查找 mysql --help |grep Distrib 3 在mysql 里查看 select vers ...