一、文档(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. 《剑指offer》— JavaScript（21）栈的压入、弹出序列

    栈的压入.弹出序列 题目描述 输入两个整数序列,第一个序列表示栈的压入顺序,请判断第二个序列是否为该栈的弹出顺序.假设压入栈的所有数字均不相等.例如序列1,2,3,4,5是某栈的压入顺序,序列4,5, ...

  2. window编程之win程序框架

    int APIENTRY _tWinMain(_In_ HINSTANCE hInstance, _In_opt_ HINSTANCE hPrevInstance, _In_ LPTSTR lpCmd ...

  3. 初级:使用MD5对字符串进行加密操作

    加密技术在企业数据安全中的应用: 大型企业管理软件的应用越来越广泛,企业数据平台涉及局域网.广域网. Internet等,在各类系统中保存的企业关键数据量也越来越大,许多数据需要保存数十年以上,甚至是 ...

  4. UCSC genome browser 个人track 安装

    处理基因组数据,很多时候我们会觉得直接看序列文件不够直观,如果绘图的话,把n多G把数据用画图出来不仅费劲,就算操作也不方便.因此我们可以用UCSC开发出的genome browser,可以直接把数据信 ...

  5. 【WCF】错误处理（一）：FaultException 与 FaultReason 的搭配

    这里所说的错误处理主要是指服务代码中抛出的异常,即开发人员主动抛出的错误当然,由于网络问题或者配置不正确,会引发连接超时的错误,但这里老周要说的是,我们在实现服务逻辑时主动抛出的异常,尤其是对客户端传 ...

  6. [转载]解决win10 VC++6.0 应用程序无法正常运行 0xc0000142

    本文转载自http://blog.csdn.net/w_9449/article/details/52864135 转载请申明哦,其实我发现自从我在贴吧发了帖子后,就冒出了不少帖子.经验.当然方法和我 ...

  7. Linux usb子系统(一) _写一个usb鼠标驱动

    USB总线是一种典型的热插拔的总线标准,由于其优异的性能几乎成为了当下大小设备中的标配. USB的驱动可以分为3类:SoC的USB控制器的驱动,主机端USB设备的驱动,设备上的USB Gadget驱动 ...

  8. Prince2学习有感：PRINCE2项目管理到底是什么？

      2007年1月份,我加入了荷兰Irdeto(中国)有限公司.刚进入公司,我就结识了Prince2(受控环境下的项目管理),才知道Prince2是英国政府在政府项目中使用的项目管理标准. 这个标准早 ...

  9. 新学期的第一节Android课

    老师问,你们认为师生关系是什么样子的? 机智的我很快想到啦:或许是猫和老鼠的关系吧,嘿嘿O(∩_∩)O

  10. node插件http-proxy实现反向代理

    最近自己动手做了一个微信小程序,是直接买的腾讯云的小程序解决方案,怎么说那,用起来还是会遇到不少问题的,不过在交流群里还是会有很多人帮助你的. 闲话少说,因为要再做一个别的服务,就想直接用这台小程序的 ...