JavaScript学习总结(一)DOM文档对象模型
一、文档(D)
一个网页运行在浏览器中,他就是一个文档对象。
二、对象(O)
“对象”是一种自足的数据集合。与某个特定对象相关联的变量被称为这个对象的属性,只能通过某个对象调用的函数被称为这个对象的方法。
JavaScript中有三种类型的对象:
①用户自定义对象:不做了解
②内建对象(native object):JavaScript中一开始就存在的。列如Array,Math,Date等(JavaScript语法区分大小写)
③宿主对象(host object):由浏览器提供的对象。列如window对象,尽量不使用这种对象。
三、模型(M)
DOM中M,既Model模型,代表这某种一类事物的表现形式,浏览器提供了网页的模型,JavaScript读取模型,获取信息,操作DOM。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
</head>
<body>
<h1>DOM</h1>
<ul>
<li>1</li>
<li>2</li> </ul> </body>
</html>
html代表整个文档,<html>标签下包含两个分支<head>和<body>,<body>下包含<h1>和<ul>,<ul>下包含<li>。这些节点元素组成了一个完整的网页。JavaScript通过获取节点元素来操作DOM模型。
四、DOM对象获取元素节点的方法
1.getElementById
document对象特有的函数。document.getElementById(id),id对应节点元素的id值,用“id的值”或'id的值'表示。改方法返回的是一个对象object
2.getElementsByTagName
getElementsByTagName类似于getElementById,它的参数是标签的名字;列如想获取标签li的对象,即为document.getElementsByTagName(“li”),返回类型为object数组。获取某个文档有多少个元素节点可以用alert(document.getElementByTagName("*").length)。*为通配符,代表所有元素节点。
3.getElementByClassName
getElementByClassName为HTML5新增方法,通过class属性中的类型访问元素。getElementByClassName(class)也与getElementsByTagName类似,返回值也是一个具有相同元素的数组。
五、获取和设置属性
1.getAttribute
getAttribute是一个函数,可以返回一个元素的属性值。object.getAttribute("元素")
例如获取p元素的title属性
var paras = document.getElementTagName("p");
for(var i=0;i<paras.length;i++){
alert(paras[i].getAttribute("title"));+}
2.setAttribute
设置修改元素节点的值,只能用于元素节点。
objet.setAttribute(attribute,value)
JavaScript学习总结(一)DOM文档对象模型的更多相关文章
- Javascript学习8 - 脚本化文档(Document对象)
原文:Javascript学习8 - 脚本化文档(Document对象) 每个Web浏览器窗口(或帧)显示一个HTML文档,表示这个窗口的Window对象有一个document属性,它引用了一个Doc ...
- 认识DOM 文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法。元素、属性和文本的树结构(节点树)。
认识DOM 文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法.DOM 将HTML文档呈现为带有元素.属性和文本的树结构(节点树). 先来看看下面代码 ...
- Javascript - DOM文档对象模型
文档对象模型(DOM) DOM(Document Object Model,文档对象模型)是一个通过和JavaScript进行内容交互的APIJavascript和DOM一般经常作为一个整体,因为Ja ...
- xml.dom——文档对象模型API
文档对象模型,或者“DOM”,是一个跨语言API的World Wide Web Consortium(W3C)来访问和修改XML文档.DOM的实现提供了一个XML文档树结构,或允许客户机代码从头开始建 ...
- Javascript 强制浏览器渲染Dom文档
在Cordova+Framework7开发Hybrid App时,在iPhone 7上遇到一个诡异的现象(Chrome浏览器.Android都正常):js修改手风琴中的input文本框的值后,但页面仍 ...
- JavaScript学习笔记7 之DOM文档对象模型
一.什么是DOMDocument Object Model 文档 -------对象 ----模型-------缩写DOM DOM是针对HTML和XML文档的一个API(应用程序编程接口).DOM描绘 ...
- JS第二部分--DOM文档对象模型
一.DOM的概念 二.DOM可以做什么 三.DOM对象的获取 四.事件的介绍 五.DOM节点标签样式属性的操作 六.DOM节点对象对值的操作 七.DOM节点-标签属性的操作(例如id class sr ...
- JavaScirpt(JS)——DOM文档对象模型
一.HTML DOM介绍 HTML DOM 是 W3C 标准(是 HTML 文档对象模型的英文缩写,Document Object Model for HTML). HTML DOM 定义了用于 HT ...
- JS学习总结之操作文档对象模型
操作文档对象模型 DOM 结构树 文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可拓展置标语言的标准编程接口.它是一种与平台和语言无关的应用程序接口(A ...
随机推荐
- 【Zookeeper】源码分析之网络通信(二)
一.前言 前面介绍了ServerCnxn,下面开始学习NIOServerCnxn. 二.NIOServerCnxn源码分析 2.1 类的继承关系 public class NIOServerCnxn ...
- mysql uodate select子查询
UPDATE user SET pwd='123' WHERE id in ( SELECT id from user WHERE username = 'zx' ); 报错[Err] 1093 ...
- 转 jquery怎么在header中设置请求信息
jquery是js的类库,js本身不能操作header,因为js是在浏览器加载页面过程中才开始执行的 header需要服务器端执行操作 如果是ajax,是可以设置header $.ajax({ url ...
- 提交Sublime Text 插件到Package Control
最近写了一个lua智能提示的插件LuaSmartTips.这个插件一直都是自己一个人在用,昨天突然想把插件提交到Package Control,如果其他的人有这样的需求就可以直接安装. Package ...
- Modbus软件开发实战指南 之 开发自己的Modbus Poll工具 - 1
在开发Modbus程序的过程中,也可以发现经常需要使用诸如Modbus Poll和Modbus Slave等辅助调试工具, 用于验证MODBUS通讯消息是否正确.但是,Modbus Poll和Modb ...
- 关于Http请求后返回json乱码的问题
其实很多时候我们在做http请求数据返回的时候经常会莫名发现会出现乱码,大部分时候我们都觉得是编码不对造成的. 一般情况下正常我们默认都是作个很简单的操作,直接使用UTF-8编码基本问题就搞定了 Ht ...
- 3DES 加密 解密
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 18.0px Menlo; color: #c91b13 } p.p2 { margin: 0.0px 0. ...
- requireJS的配置心得
1.html页面中如果同时存在data-main和require()和配置(config中的baseUrl),那么定义根路径 baseUrl > data-main > index.htm ...
- 使用 @Qualifier 注释和 @Autowired 注释通过指定哪一个真正的 bean 将会被装配来消除混乱
1.当你创建多个具有相同类型的 bean 时,并且想要用一个属性只为它们其中的某一个进行装配,在这种情况下,你可以使用 @Qualifier 注释和 @Autowired 注释来精确配置. 2.示例 ...
- Android在未来对 Java 8 特性的支持
在谷歌, 我们总是努力做正确的事. 这意味着有时候我们会调整自己的计划. 我们深切地知道开发者社区是多少地关注 Android 能够对 Java 8 良好的支持, 并且我们正在改变自己对 Java 8 ...