javascript DOM和DOM操作的四种基本方法
在了解了javascript的语言特性后,javascript真正大放光彩的地方来了——这就是javascript DOM
Javascript DOM
DOM(Document Object Model),文档对象模型。
简单的说就是一套操作文档内容的方法。
文档:DOM的D
如果没有document(文档),DOM就无从谈起。当创建了一个网页并把它加载到web浏览器中,DOM就悄然而生,它将根据你编写的网页文档创建一个文档对象。
对象:DOM的O
javascript中的对象分为三种:用户自定义对象(用户自己创建的对象),内建对象(内建在js语言的对象,如Array,Math,Date),宿主对象(由浏览器提供的对象,最基础的就是window对象)
Window对象对应浏览器窗口的本身,这个对象的属性和方法通常称为BOM(浏览器对象模型)。但我们不需要与BOM打太多交道,我们需要将注意力集中到浏览器窗口的内部而不是浏览器窗口本身。我们将着重探讨如何对网页的内容进行处理,而用来实现这一目标的载体就是document对象。
模型:DOM的M
代表某种事物的表现形式。就像一个火车模型代表一列火车,一张地图代表一个城市一样,DOM代表被加载到浏览器窗口里的当前网页。浏览器向我们提供了当前网页的“地图”,我们可以通过javascript去读取这张“地图”。既然是地图,就必须有诸如方向,比例尺等记号。要想看懂地图,就必须弄懂这些记号的含义。所以我们必须要把各种用来描述文档的记号弄明白。
需要注意的是,我们需要把DOM当作一个整体,不能分割看待,即DOM(文档对象模型)是一套操作文档内容的方法。
DOM把一份文档表示为一棵树(节点树),是我们理解和运用这一模型的关键。
例如:
<!DOCTYPE html>
<html>
<head>
<title>Shopping list</title>
<meta charset="utf-8">
</head>
<body>
<h1>What to buy</h1>
<p id="buy" title="a gentle reminder">Don't forget to buy this stuff</p>
<ul id="purchases">
<li>A tin od beans</li>
<li>Cheese</li>
<li>Milk</li>
</ul>
</body>
</html>
用树表示这个网页的结构:
DOM存在着不同类型的节点:
1.元素节点:DOM的原子是元素节点。事实上,文档的每一个元素都是一个对象。
2.文本节点:元素节点构成文档的结构,则文本节点构成文本的内容。文本节点总是被包含在元素节点的内部,但并不是所有元素节点都包含文本节点。
3.属性节点:元素或多或少都具有一些属性。
(除外,还有一些其它类型的节点,如注释)
DOM操作的四种基本方法
DOM操作的四种基本方法:getElementById(), getElementsByTagname(), getAttribute(), setAttribute()
1. getElementById():
参数:元素的ID值。 (元素节点简称元素)
返回值:一个有指定ID的元素对象(元素是对象)
注:这个方法是与document对象相关联,只能由document对象调用。
用法:document.getElementById(Id)
例:
typeof document.getElementById("purchases");//object
2. getElementsByTagName():
参数:元素名
返回值:一个对象数组。这个数组里每个元素都是对象,每个对象分别对应着文档里给定标签的一个元素。
注:这个方法可和一般元素关联。这个方法允许我们把通配符当作它的参数,返回在某份html文档里总共有多少个元素节点。
用法:element.getElementsByTagName(TagName)
例:
var items=document.getElementsByTagName("li");
items.length;//
document.getElementsByTagName(“*”);//
3. getAttribute():
参数:元素的某个属性名
返回值:这个元素属性的属性值
注:getAttribute()不能通过document对象调用,只能通过元素对象去调用它。
用法:object.getAttribute(Attribute)
例:
var para=document.getElementsByTagName("p");//返回的是数组
para[].setAttribute("title","a list of goods");
para[].getAttribute("title");//a list of goods
说明:
通过setAttribute()方法对文档作出的改变,但这张改变并未反映到源代码中,也就是说,源代码中属性值仍旧是原来的属性值。这种“表里不一”的现象缘于DOM的工作模式:先加载文档的静态内容,再以动态方式对它们进行刷新,动态刷新不改变文档的静态内容,而对页面内容的刷新,不需要用户在他们的浏览器里执行刷新操作就可以实现。
DOM中还有许多其它的属性和方法,但这四种基本方法是编写许多DOM脚本的基石。
javascript DOM和DOM操作的四种基本方法的更多相关文章
- 百度地图和高德地图坐标系的互相转换 四种Sandcastle方法生成c#.net帮助类帮助文档 文档API生成神器SandCastle使用心得 ASP.NET Core
百度地图和高德地图坐标系的互相转换 GPS.谷歌.百度.高德坐标相互转换 一.在进行地图开发过程中,我们一般能接触到以下三种类型的地图坐标系: 1.WGS-84原始坐标系,一般用国际GPS纪录仪记 ...
- c#数据四种执行方法(ExecuteNonQuery)-----转载
c#数据四种执行方法(ExecuteNonQuery) 1.使用ExecuteReader()操作数据库 2.使用ExecuteNonQuery()操作数据库 3.使用ExecuteScalar( ...
- get,post,put,delete四种基础方法对应增删改查
PUT,DELETE,POST,GET四种基础方法对应增删改查 1.GET请求会向数据库发索取数据的请求,从而来获取信息,该请求就像数据库的select操作一样,只是用来查询一下数据,不会修改.增加数 ...
- C#四种深拷贝方法
//四种深拷贝方法 public static T DeepCopyByReflect<T>(T obj) { //如果是字符串或值类型则直接返回 if (obj is string || ...
- C语言中返回字符串函数的四种实现方法 2015-05-17 15:00 23人阅读 评论(0) 收藏
C语言中返回字符串函数的四种实现方法 分类: UNIX/LINUX C/C++ 2010-12-29 02:54 11954人阅读 评论(1) 收藏 举报 语言func存储 有四种方式: 1.使用堆空 ...
- CSS当中color的四种表示方法
这是我的第一篇博客,所以写的东西会比较简单. css当中,好多地方都会用到color属性,用来使html内容丰富多彩,例如:background-color:border-color: 第一种表示法使 ...
- C语言中返回字符串函数的四种实现方法
转自C语言中返回字符串函数的四种实现方法 其实就是要返回一个有效的指针,尾部变量退出后就无效了. 有四种方式: 1.使用堆空间,返回申请的堆地址,注意释放 2.函数参数传递指针,返回该指针 3.返回函 ...
- sass学习笔记 -- sass的四种编译方法
sass的四种编译方法:(.scss) (一)ruby下的命令行编译 首先需要安装ruby,注意需勾选Add Ruby executables to your PATH选项,以添加环境变量. ruby ...
- Django的POST请求时因为开启防止csrf,报403错误,及四种解决方法
Django默认开启防止csrf(跨站点请求伪造)攻击,在post请求时,没有上传 csrf字段,导致校验失败,报403错误 解决方法1: 注释掉此段代码,即可. 缺点:导致Django项目完全无法防 ...
随机推荐
- react图片预览插件尝试
npm install react-zmage -S https://blog.csdn.net/Wcharles666/article/details/90262525 启动报错 直接执行 npm ...
- Cogs 329. K- 联赛(最大流)
K- 联赛 ★★★ 输入文件:kleague.in 输出文件:kleague.out 简单对比 时间限制:1 s 内存限制:32 MB [问题描述] K- 联赛职业足球俱乐部的球迷们都是有组织的训练有 ...
- spring boot + mybaits 处理枚举类 enum
枚举: //实现层调用 orderMapper.getOrder(OrderStatus.DISCOUNT); sql打印: 实际sql: select * from order where orde ...
- maven下载与安装
1.下载地址:http://maven.apache.org/download.cgi(Windows平台下载*.zip压缩包,Linux平台下载*.gz压缩包) 2.解压到E:\JAVA\Maven ...
- 洛谷P1021邮票面值设计
题目 一道很经典的搜索题,可以锻炼搜索的能力,比如可以用dfs覆盖加dp的方式来寻找+更新答案.而且还可以通过在递归中增加数组的方式来辅助搜索. #include <bits/stdc++.h& ...
- 如何实现一个 windows 桌面动态壁纸
更新: 2018/08/31 WS_MOUSE_LL 钩子,实现底层壁纸交互效果. 一.介绍 国内玩家第一次看到动态壁纸,都是出于一款来自 Wallpaper Engine 的 Steam 程序. ...
- 经常用到(创建OS)的命令
1. 将汇编代码编译为二进制模块文件 nasm mbr.asm -o mbr nasm loader.asm -o loader 2. 将wirte.c ...
- mutex,thread(c++11 windows linux三种方式)
一 c++11 windows linux三种方式 //#include <stdio.h> //#include <stdlib.h> //#include <uni ...
- 使用python2 对服务器监控(监控内存,CPU,网卡流量等)
#!/usr/bin/env python # -*- coding:utf- -*- #create at -- 'this is a system monitor scripts' __autho ...
- map判断
返回的map对象在!=null的时候有两种情况,一种是没有数据 返回的是{},另外一种是有数据. 判断的时候map!=null&&!map.isEmpty()