一、文档(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. [编织消息框架][rpc]使用篇

    rpc 分两部份,一个是调用者,另一方是服务提供者 调用者只关心那个服务,传相应参数,返回内容就可以 而提供者根据调用相应服务同参数,工作处理后响应内容即可 根据他们的关系可以用JAVA 接口同实现类 ...

  2. 利用jink的驱动软件j-flash 合并两个hex的方法，bootloader+app

    由于前几天要给工厂app和bootloader的hex的文件,网上很多都是bin的合并方法,bin的方法不再赘述,相信大家都能找到,现在将hex合并的方法写下来: 第一步:先打开第一个hex文件, 第 ...

  3. C++ 友元函数的函数指针

    成员函数的指针 讲友元之前先讲普通的成员函数的函数指针 class Std_interface { public: virtual void suspend() = 0; }; // define t ...

  4. 通讯录--(iOS9独有的方法)

    导入库文件   #import <ContactsUI/ContactsUI.h> #pragma mark iOS9 新出的点击通讯录的获取信息的办法 #pragma mark - 先弹 ...

  5. C++ 带有指针成员的类处理方式

    在一个类中,如果类没有指针成员,一切方便,因为默认合成的析构函数会自动处理所有的内存.但是如果一个类带了指针成员,那么需要我们自己来写一个析构函数来管理内存.在<<c++ primer&g ...

  6. 腾讯云数据库团队：phpMyAdmin中sql-parser组件的使用

    phpMyAdmin是一款基于Web端运行的开源数据库管理工具,支持管理MySQL和MariaDB两种数据库. phpMyAdmin的程序主要使用php和javascript开发,它的安装使用都比较简 ...

  7. 对象作为 map 的 key 时，需要重写 equals 方法和 hashCode 方法

    对象作为 map 的 key 时,需要重写 hashCode 和 equals方法 如果没有重写 hashCode 方法,那么下面的代码示例会输出 null 我们首先定义一个对象:BmapPoint, ...

  8. Codeforces Gym 100269E Energy Tycoon 贪心

    题目链接:http://codeforces.com/gym/100269/attachments 题意: 有长度为n个格子,你有两种操作,1是放一个长度为1的东西上去,2是放一个长度为2的东西上去 ...

  9. 深入浅出数据结构C语言版（5）——链表的操作

    上一次我们从什么是表一直讲到了链表该怎么实现的想法上:http://www.cnblogs.com/mm93/p/6574912.html 而这一次我们就要实现所说的承诺,即实现链表应有的操作(至于游 ...

  10. C# 6 与 .NET Core 1.0 高级编程 - 41 ASP.NET MVC（中）

    译文,个人原创,转载请注明出处(C# 6 与 .NET Core 1.0 高级编程 - 41 ASP.NET MVC(中)),不对的地方欢迎指出与交流. 章节出自<Professional C# ...