DOM基础----DOM（一）
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（一）的更多相关文章
- JavaScript基础—dom,事件
Js基础-DOM 1:dom:文档对象模型 Dom就是html页面的模型,将每个标签都作为一个对象,js通过调用dom中的属性,方法就可以对网页中的文本框,层等元素进行编程控制.Dom就是一些让jav ...
- HTML DOM基础知识
HTML DOM基础知识 一.什么是DOM? 1.HTML DOM 定义了访问和操作HTML文档的标准方法. 2.HTML DOM 把 HTML 文档呈现为带有元素.属性和文本的树结构(节点树). 3 ...
- Javascript DOM基础（一）概念
Dom基础概念: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" ...
- jQuery DOM基础
jQuery DOM基础 1.对元素内容的获取和修改: 表单用value(),普通元素用html()和text(). html() html(value)设置和获取html内容,有html标签会自动 ...
- 基础DOM和CSS操作(三)
CSS方法 jQuery不但提供了CSS的核心操作方法,比如.css()..addClass()等.还封装了一些特殊功能的CSS操作方法,我们分别来了解一下. width()方法 方法名 描述 wid ...
- 基础DOM和CSS操作(二)
元素样式操作 元素样式操作包括了直接设置CSS样式.增加CSS类别.类别切换.删除类别这几种操作方法.而在整个jQuery使用频率上来看,CSS样式的操作也是极高的,所以需要重点掌握. CSS操作方法 ...
- 基础DOM和CSS操作(一)
DOM简介 DOM是一种文档对象模型,方便开发者对HTML结构元素内容进行展示和修改.在JavaScript中,DOM不但内容庞大繁杂,而且我们开发的过程中需要考虑更多的兼容性.扩展性.在jQuery ...
- js入门——Dom基础
DOM=DocumentObject Model,文档对象模型. Dom有三个不同的部分. 1.核心DOM 也是最基础的文档结构的标准模型 2.XMLDOM 针对XML文档的标准模型 3.HTML D ...
- 第一百一十三节，JavaScript文档对象，DOM基础
JavaScript文档对象,DOM基础 学习要点: 1.DOM介绍 2.查找元素 3.DOM节点 4.节点操作 DOM(Document Object Model)即文档对象模型,针对HTML和XM ...
随机推荐
- ubantu安装jdk
环境:ubantu16.04下安装jdk1.8 1,在当前用户根目录下创建目录,本人所用的用户为bruce: mkdir /home/bruce/jdk 2,官网下载jdk1.8,网址为http:// ...
- mysql 登录与权限
一.mysql 登录方式 1.1 格式:mysql -u用户名 -p密码 -h ip -P 端口 -S 套接字 mysql -uvagrant -pvagrant -h 127.0.0.1 -P 33 ...
- NSKeyedUnarchiver归档
把自定义的类对象编码到NSData中 NSData *data = [NSKeyedArchiver archivedDataWithRootObject:bc];//归档,bc是一个自定义的类对象, ...
- webkitdirectory 实现文件夹上传
文件夹上传这个功能在web端可能有需求,这里就简单介绍下用法. 目前只有谷歌浏览器还有Microsoft Edge支持按照文件夹进行上传,具体可以看下百度云盘的网页版的上传按钮,在火狐下就支持按照文件 ...
- Domain=NSOSStatusErrorDomain Code=1937337955 关于iOS录音AVAudioRecorder与音频播放AVAudioPlayer真机调试录音不能播放的问题
error:Domain=NSOSStatusErrorDomain Code=1937337955 ,这个错误很常见, 原因是因为我们需要调用另外一个AVAudioPlayer 的初始化方法,来确定 ...
- Java中将JSON格式的数据转换成对应的Bean、Map、List数据
简单说明: 为了方便数据在客户端及服务器端的传输,有时候我们会用一些比较方便组织的数据类型,比如json.xml等传给客户端,客户端也可以重新组织数据传回服务器端.JSON和XML提供了一套比较方便的 ...
- 参数转对象 类似 ?camera=1&travel=0&faceScore=1
parseQueryString(url) { var obj = {}; var keyvalue = []; var key = "", value = "" ...
- 动漫绘画软件优动漫PAINT最近所用文件
在使用优动漫PAINT的时候有时候会遇到这样的问题,近期编辑的文件找不见了,或者想要接着之前的文件进行编辑,如何快速找到这些文件呢?其实在最近所用文件中一目了,本文我们一起来看看. 如果您想接着上次未 ...
- __str__和__repr__
Python 中的 __str__ 与 __repr__ 到底有什么差别 很多时候我们自己编写一个类,在将它的实例在终端上打印或查看的时候,我们往往会看到一个不太满意的结果. 类默认转化的字符串基 ...
- 如何分页爬取数据--beautisoup
'''本次爬取讲历史网站'''#!usr/bin/env python#-*- coding:utf-8 _*-"""@author:Hurrican@file: 分页爬 ...