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 ...
随机推荐
- ETL kettle 数据调取防止意外停止处理
pentaho kettle是目前使用比较广泛的一种etl工具 但是在使用的时候如做定时任务 会存在如果任务异常停止会发生数据不准或者丢失数据的情况 这种情况在<Pentho Kettle So ...
- [Hadoop] - Protocol Buffer安装
Hadoop从2.x版本开始,底层的RPC远程调用使用ProtocolBuffer格式来传递数据,所以在编译Hadoop的过程中有可能出现提示缺少Protocol服务的异常信息,类似:'protoc ...
- Mixin模式：带实现的协议
Mixin(织入)模式并不是GOF的<设计模式>归纳中的一种,但是在各种语言以及框架都会发现该模式(或者思想)的一些应用.简单来说,Mixin是带有全部实现或者部分实现的接口,其主要作用是 ...
- 信号处理——Hilbert变换及谱分析
作者:桂. 时间:2017-03-03 23:57:29 链接:http://www.cnblogs.com/xingshansi/articles/6498913.html 声明:转载请注明出处, ...
- golang中的reflect包用法
最近在写一个自动生成api文档的功能,用到了reflect包来给结构体赋值,给空数组新增一个元素,这样只要定义一个input结构体和一个output的结构体,并填写一些相关tag信息,就能使用程序来生 ...
- v3学院带你一次性认清UART、RS-232、RS-422、RS-485的区别
通讯问题,和交通问题一样,也有高速.低速.拥堵.中断等等各种情况.如果把串口通讯比做交通,UART比作车站,那么一帧的数据就好比汽车.汽车跑在路上,要遵守交通规则.如果是市内,一般限速30.40,而高 ...
- 【JS】JavaScript中的参数传递
ECMAScript中所有函数的参数都是按值传递的,简单讲就是函数外部的值 复制给函数内部的参数,就和把值从一个变量复制到另一个变量一样.切记访问变量有按值访问和按引用访问,而参数只能按值传递. 在向 ...
- std::copy性能分析与memmove机器级实现
复制数据的快速方法std::copy C++复制数据各种方法大家都会,很多时候我们都会用到std::copy这个STL函数,这个效率确实很不错,比我们一个一个元素复制或者用迭代器复制都来的要快很多. ...
- 如何使用Vue2做服务端渲染
花费了一个月时间,终于在新养车之家项目中成功部署了vue2服务端渲染(SSR),并且使用上了Vuex 负责状态管理,首屏加载时间从之前4G网络下的1000ms,提升到了现在500-700ms之间,SS ...
- cuda编程学习1——hello world！
将c程序最简单的hello world用cuda编写在GPU上执行,以下为代码: #include<iostream>using namespace std;__global__ void ...