javascript学习笔记(二)
二、DOM
DOM是"Document Object Model"(文档对象模型)的首字母缩写,当创建了一个网页并把它加载到WEB浏览器
中时,DOM就在后台生成,它讲根据你编写的网页文档创建一个文档对象。
javascript语言里的对象可以分为三种类型:
①用户定于对象(user-defined object):由程序员自行创建的对象
②内建对象(native object):内建在javascript语言里的对象,如Array,math,date等。
③宿主对象:(host object):由浏览器提供的对象
getElementById()方法
DOM提供一个名为getElementById()的方法,这个方法将返回一个与那个有着给定ID属性值得元素节点相对应
的对象。(注意:javascript区分大小写)
这个方法是与document对象相关联的函数,在脚本代码里,函数名的后面必须根由一组圆括号,这组圆括号
包含着函数的参数。getElementById()方法只有一个参数:你想获得的那个元素的id属性值,这个id值必须
放在单引号或双引号里。
document.getElementById(id)
例:

结果返回的事:object
getElementsByTagName()方法
getElementsByTagName()方法将返回一个对象数组,每个对象分别对应着文档里有着定标签的一个元素。
例

将会返回object
小结:
一份文档就是一颗节点树
节点分为不同的类型:元素节点、属性节点和文本节点等。
getElementById()方法将返回一个对象,该对象对应着文档里的一个特定的元素节点。
这些节点中的每个都是一个对象。
getAttribute()方法
getAttribute()方法是一个函数。它只有一个参数--你打算查询的属性的名字:
Object.getAttribute(attribute)
getAttribute()方法不能通过document对象调用,我们只能通过一个元素节点对象调用它。
例

与getElementsByTagName方法结合,去查询每个<p>元素的title属性
setAttribute()方法
setAttribute()方法与其他几个方法的区别是它允许我们队属性节点的值进行修改。
setAttribute()方法要求我们向他传递两个参数:
setAttribute(attribute,value)

javascript学习笔记(二)的更多相关文章
- Javascript学习笔记二——操作DOM
Javascript学习笔记 DOM操作: 一.GetElementById() ID在HTML是唯一的,getElementById()可以定位唯一的一个DOM节点 二.querySelector( ...
- JavaScript学习笔记(二)——闭包、IIFE、apply、函数与对象
一.闭包(Closure) 1.1.闭包相关的问题 请在页面中放10个div,每个div中放入字母a-j,当点击每一个div时显示索引号,如第1个div显示0,第10个显示9:方法:找到所有的div, ...
- javascript学习笔记二
1.js的string对象 **创建 String对象 *** var str = "abc"; **方法 和 属性(文档) *** 属性 length : 字符串的长度 ***方 ...
- javascript学习笔记(四) Number 数字类型
数字格式化方法toFixed().toExponential().toPrecision(),三个方法都四舍五入 toFixed() 方法指定小数位个数 toExponential() 方法 用科学 ...
- JavaScript学习笔记之数组(二)
JavaScript学习笔记之数组(二) 1.['1','2','3'].map(parseInt) 输出什么,为什么? ['1','2','3'].map(parseInt)//[1,NaN,NaN ...
- amazeui学习笔记二(进阶开发4)--JavaScript规范Rules
amazeui学习笔记二(进阶开发4)--JavaScript规范Rules 一.总结 1.注释规范总原则: As short as possible(如无必要,勿增注释):尽量提高代码本身的清晰性. ...
- Javascript学习笔记三——操作DOM(二)
Javascript学习笔记 在我的上一个博客讲了对于DOM的基本操作内容,这篇继续巩固一下对于DOM的更新,插入和删除的操作. 对于HTML解析的DOM树来说,我们肯定会时不时对其进行一些更改,在原 ...
- AJax 学习笔记二(onreadystatechange的作用)
AJax 学习笔记二(onreadystatechange的作用) 当发送一个请求后,客户端无法确定什么时候会完成这个请求,所以需要用事件机制来捕获请求的状态XMLHttpRequest对象提供了on ...
- ES6学习笔记<二>arrow functions 箭头函数、template string、destructuring
接着上一篇的说. arrow functions 箭头函数 => 更便捷的函数声明 document.getElementById("click_1").onclick = ...
- JavaScript学习记录二
title: JavaScript学习记录二 toc: true date: 2018-09-13 10:14:53 --<JavaScript高级程序设计(第2版)>学习笔记 要多查阅M ...
随机推荐
- nodejs实现请求代理
通常我们常用的请求方法只有GET.POST.PUT和DELETE,所以在此只介绍这四种和文件上传的代理方式 在此我们使用request.js第三方模块实现 GET(DELETE同GET,将reques ...
- 构建RequestDelegate管道
1. 创建 Context.cs using System; using System.Threading.Tasks; namespace MyPipeline { public class Con ...
- android平台一些常用代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 3 ...
- Ant运行build.xml执行服务器scp,异常解决jsch.jar
公司ant打包上线 一直出现这个问题. Ant运行build.xml执行服务器scp,异常解决jsch.jar BUILD FAILEDD:\eclipse\eclipse-jee-luna-SR2- ...
- (转)Windows下MySQL :GUI安装和使用(MySQL GUI tools)
原文:http://blog.csdn.net/dahunbi/article/details/52970815 MySQL GUI Tools是MySQL官方提供的图形化管理工具,功能很强大,值得推 ...
- windows本地调试安装hadoop(idea) : ERROR util.Shell: Failed to locate the winutils binary in the hadoop binary path
1,本地安装hadoop https://mirrors.tuna.tsinghua.edu.cn/apache/hadoop/common/ 下载hadoop对应版本 (我本意是想下载hadoop ...
- 如何使用Android Studio提高App质量
Android Studio作为现在谷歌主推的Android开发功能,除了提供了大量的功能帮助快速开发Android代码之外,在代码质量控制方面也提供了很多工具,这些工具都放在Analyze菜单下, ...
- android-zip解压缩方法
/** * 解压缩文件到指定的目录. * * @param unZipfileName * 需要解压缩的文件(带路径) * @param mDestPath * 解压缩后存放的路径 **/ publi ...
- CentOS6.5下Ambari安装搭建部署大数据集群(图文分五大步详解)(博主强烈推荐)
第一步: Ambari安装之Ambari安装前准备(CentOS6.5)(一) 第二步: Ambari安装之部署本地库(镜像服务器)(二) 第三步: Ambari安装之安装并配置Ambari-serv ...
- 原来你一直写错了?!实力分享一波 CSS 使用的书写规范顺序与偏门又实用的样式...
我们在埋头写代码的时候,还要学会收集整理一些常用的代码小技巧,以便在工作时候,可以及时调取,提高工作效率. 今天,我把之前收集整理的一些CSS代码小技巧分享出来,供你参考学习,希望对你有帮助. 一.C ...