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. css3 背景background

    Css3背景<background> Css3包含多个新的背景属性,它们提供了对背景更强大的控制.可以自定义背景图的大小,可以规定背景图片的定位区域,css3还允许我们为元素使用多个背景图 ...

  2. Mac OS X10.9安装的Python2.7升级Python3.4步骤详解

    Mac OS X10.9安装的Python2.7升级Python3.4步骤详解 Mac OS X10.9默认带了Python2.7,不过现在Python3.4.0出来了,如果想使用最新版本,赶紧升级下 ...

  3. POJ 3613 floyd+矩阵快速幂

    题意: 求s到e恰好经过n边的最短路 思路: 这题已经被我放了好长时间了. 原来是不会矩阵乘法,快速幂什么的也一知半解 现在终于稍微明白了点了 其实就是把矩阵乘法稍微改改 改成能够满足结合律的矩阵&q ...

  4. 获取URL路径参数getUrlParams

    function getUrlParams(){ var reg = new RegExp("(^|&)" + name + "=([^&]*)(& ...

  5. phpExcel导出大量数据出现内存溢出错误的解决方法

    phpExcel将读取的单元格信息保存在内存中,我们可以通过 代码如下:PHPExcel_Settings::setCacheStorageMethod() 来设置不同的缓存方式,已达到降低内存消耗的 ...

  6. Qt与OpenCV结合:图像显示

    参考链接: http://www.cnblogs.com/emouse/archive/2013/03/29/2988717.html 注意:为了防止min max 问题,要把opencv的包含放在包 ...

  7. Difference between == and ===

    In swift 3 and above === (or !==) Checks if the values are identical (both point to the same memory ...

  8. java 常用API 包装 数据

    package com.oracel.demo01; public class Sjzhhm { public static void main(String[] args) { method(); ...

  9. 洛谷P3111 [USACO14DEC]牛慢跑Cow Jog_Sliver 性质分析

    Code: #include<cstdio> #include<algorithm> #include<cstring> using namespace std; ...

  10. mysql时区错误问题及命令行登录mysql方法

    spring boot运行报错误信息“The server time zone value 'Öйú±ê׼ʱ¼ä' is unrecognized or represents more than ...