一、文档(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文档对象模型的更多相关文章

  1. Javascript学习8 - 脚本化文档(Document对象)

    原文:Javascript学习8 - 脚本化文档(Document对象) 每个Web浏览器窗口(或帧)显示一个HTML文档,表示这个窗口的Window对象有一个document属性,它引用了一个Doc ...

  2. 认识DOM 文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法。元素、属性和文本的树结构(节点树)。

    认识DOM 文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法.DOM 将HTML文档呈现为带有元素.属性和文本的树结构(节点树). 先来看看下面代码 ...

  3. Javascript - DOM文档对象模型

    文档对象模型(DOM) DOM(Document Object Model,文档对象模型)是一个通过和JavaScript进行内容交互的APIJavascript和DOM一般经常作为一个整体,因为Ja ...

  4. xml.dom——文档对象模型API

    文档对象模型,或者“DOM”,是一个跨语言API的World Wide Web Consortium(W3C)来访问和修改XML文档.DOM的实现提供了一个XML文档树结构,或允许客户机代码从头开始建 ...

  5. Javascript 强制浏览器渲染Dom文档

    在Cordova+Framework7开发Hybrid App时,在iPhone 7上遇到一个诡异的现象(Chrome浏览器.Android都正常):js修改手风琴中的input文本框的值后,但页面仍 ...

  6. JavaScript学习笔记7 之DOM文档对象模型

    一.什么是DOMDocument Object Model 文档 -------对象 ----模型-------缩写DOM DOM是针对HTML和XML文档的一个API(应用程序编程接口).DOM描绘 ...

  7. JS第二部分--DOM文档对象模型

    一.DOM的概念 二.DOM可以做什么 三.DOM对象的获取 四.事件的介绍 五.DOM节点标签样式属性的操作 六.DOM节点对象对值的操作 七.DOM节点-标签属性的操作(例如id class sr ...

  8. JavaScirpt(JS)——DOM文档对象模型

    一.HTML DOM介绍 HTML DOM 是 W3C 标准(是 HTML 文档对象模型的英文缩写,Document Object Model for HTML). HTML DOM 定义了用于 HT ...

  9. JS学习总结之操作文档对象模型

    操作文档对象模型 DOM 结构树 文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可拓展置标语言的标准编程接口.它是一种与平台和语言无关的应用程序接口(A ...

随机推荐

  1. JS事件绑定深入

    W3C很好地解决了覆盖问题.相同函数屏蔽的问题.this传递问题.添加额外方法不被覆盖等问题. 但是IE8之前的版本并不支持,IE9已完全支持了. IE和W3C在事件绑定上存在很多差异,我们以冒泡和捕 ...

  2. java 线程及synchronized关键字

         从本篇开始,我们将会逐渐总结关于java并发这一块的内容,也可以理解为是我的笔记,主要来自于一些博客和java书籍中的内容,所有的内容都是来自于他们之中并且加上了我自己的理解和认识.     ...

  3. daterangepicker 时间插件

    在工作中学习到的一种插件 上网查询之后发现 在bootstrap中的时间选择器有两种:dateTimePicker和dateRangePicker HTML <div id="repo ...

  4. jquery 中时间的运用

    运用Moment插件比较方面,有兴趣可以仔细阅读 http://momentjs.cn/

  5. 在.NET项目中使用PostSharp,使用CacheManager实现多种缓存框架的处理

    在前面几篇随笔中,介绍了PostSharp的使用,以及整合MemoryCache,<在.NET项目中使用PostSharp,实现AOP面向切面编程处理>.<在.NET项目中使用Pos ...

  6. 1724: [Usaco2006 Nov]Fence Repair 切割木板

    1724: [Usaco2006 Nov]Fence Repair 切割木板 Time Limit: 5 Sec  Memory Limit: 64 MBSubmit: 854  Solved: 42 ...

  7. casperjs环境安装

    1.python 环境安装 2.PhantomJs安装,戳这里,安装的1.9.8版本的,配置环境变量path:";C:\phantomjs"(注意:安装2.0.0版本,运行casp ...

  8. javascript中常用的

    1.javascript中构造equals().trim()方法并应用 String.prototype.Trim = function() { return this.replace(/(^\s*) ...

  9. 深入理解CPU和异构计算芯片GPU/FPGA/ASIC (上篇)

    王玉伟,腾讯TEG架构平台部平台开发中心基础研发组资深工程师,专注于为数据中心提供高效的异构加速云解决方案.目前,FPGA已在腾讯海量图片处理以及检测领域已规模上线. 随着互联网用户的快速增长,数据体 ...

  10. 分解机(Factorization Machines)推荐算法原理

    对于分解机(Factorization Machines,FM)推荐算法原理,本来想自己单独写一篇的.但是看到peghoty写的FM不光简单易懂,而且排版也非常好,因此转载过来,自己就不再单独写FM了 ...