javascript笔记整理(DOM对象)
DOM--document(html xml) object modle,document对象(DOM核心对象),document对象是 Window 对象的一部分,可通过window.document属性对其进行访问,document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问
1.属性
title--返回或设置当前文档的标题
url--返回当前文档的URL
bgColor--设置文档的背景色
fgColor 设置文档的前景色(设置文字颜色)
2.方法
getElementById(idname)--返回拥有指定id的(第一个)对象的引用
getElementsByTagName(tagname)--返回带有指定标签名的对象集合
getElementsByName(name)--返回带有指定名称的对象集合
getElementsByName(name)是不兼容的,主要是适用于表单。
IE(6-8):如果该对象的标准属性包含有name,那么可以正确的使用。否则不可以使用,返回0。
FF:该方法可以适用于任何情况。
getElementsByClassName()--返回带有指定class名称的对象集合
//getElementsByClassName,兼容处理 ie6-8
function WClassName(className){
if(document.getElementsByClassName){
return document.getElementsByClassName(className);
}else{
var tag= document.getElementsByTagName("*");
var lengths=tag.length;
var divs=[];
for (var i=0; i<lengths; i++) {
if(tag[i].className==className){
divs.push(tag[i])
}
}
return divs;
}
}
3.对象集合
all--所有元素的集合(有兼容性问题)
forms--返回对文档中所有Form对象引用
anchors--返回对文档中所有Anchor对象的引用(a链接)
images--返回对文档中所有Image对象引用
links--返回对文档中所有Area和Link对象引用
对文档对象的内容、属性、样式的操作
一、操作内容
innerHTML--用来设置或获取对象起始和标签内的内容(识别html标签)
innerText--用来设置或获取对象起始和标签内的内容 (IE)
textContent--用来设置或获取对象起始和标签内的内容 (FF)
outerHTML--用来设置或获取包括本对象在内起始和标签内的内容(识别html标签)
outerText--用来设置或获取包括本对象在内起始和标签内的内容
二、操作属性
对象.属性=值 (设置、获取、添加属性(属性值))
getAttribute("属性") 获取给定的属性的值
setAttribute("属性","值") 设置或是添加属性
三、操作样式
对象.style.属性=值 (设置、获取、添加属性)
遇到属性是"-"链接的,要将"-"去掉,后面的单词的首字母大写
表单对象操作
一、获得表单引用
1.通过直接定位的方式来获取
document.getElementById();
document.getElementsByName();
document.getElementsByTagName();
<form name="myform" id="form1" action="" method="post">
</form> document.getElementById('form1');
document.getElementsByName('myform')[0];
document.getElementsByTagName('form')[0];
2.通过集合的方式来获取引用
document.forms[下标]
document.forms["name"]
document.forms.name
<form name="myform" id="form1" action="" method="post">
</form> document.forms[0];
document.forms['myform'];
document.forms.name;
3.通过name直接获取“(只适用于表单)如果表单下元素有一样的name名,则调用的是其下的元素
document.name
<form name="myform" id="form1" action="" method="post">
</form> document.myform;
二、获得表单引用
1.直接获取
document.getElementById();
document.getElementsByName();
document.getElementsByTagName();
<input type="text" name="name" id="IDname" value="zhangsan"> document.getElementById('IDname');
document.getElementsByName('name')[0];
document.getElementsByTagName('input')[0];
2.通过集合来获取
表单对象.elements----获得表单里面所有元素的集合
表单对象.elements[下标]
表单对象.elements["name"]
表单对象.elements.name
<form name="names" id="form1" action="" method="post">
<input type="text" name="name" id="IDname" value="zhangsan">
</form> document.getElementById('form1').elements[0];
document.getElementsByName('names').elements['name'];
document.getElementsByTagName('form')[0].elements.name;
3.直接通过name的形式
表单对象.name
<form name="names" id="form1" action="" method="post">
<input type="text" name="name" id="IDname" value="zhangsan">
</form> document.getElementById('form1').name;
二、表单元素共同的属性和方法
1.获取表单元素的值
表单元素对象.value---获取或是设置值
<input type="text" name="name" id="IDname" value="zhangsan"> var a=document.getElementById('IDname');
a.value;
a.value='chen'
2.属性
disabled---获取或设置表单控件是否禁用 true false
form--- 指向包含本元素的表单的引用
3.方法
blur()失去焦点
focus() 获得焦点
************************************
<input type="text" >
value---设置或获取文本域的值
//点击清除默认value
<input type="text" value="搜索" onfocus="if(this.value=='搜索')this.value=''" onblur="this.value=this.value==''?'搜索':this.value">
<input type="radio">
checked---返回或设置单选的选中状态。选中(true),未选中(false)
value---获取选中的值,必须先判断选中状态。
<input type="checkbox">
checked---返回或设置按钮的选中状态。选中(true),未选中(false)
value---获取选中的值,必须先判断选中状态
<select><option></option></select>
selected---返回或设置单选的选中状态。选中(true),未选中(false)
selectedIndex---设置或返回下拉框被选中的索引号
<textarea></textarea>
value 获文本区域中的值
onkeyup 按键离开
onkeydowm 按键按下
事件
onsubmit---当表单提交的时候触发的事件
onblur---当输入框失去焦点
onfocus---当输入框得到焦点
onchange---下拉框值改变
表单提交
表单对象.submit()
javascript笔记整理(DOM对象)的更多相关文章
- javascript笔记整理(对象的继承顺序、分类)
Object.prototype.say=function(){ alert("我是顶层的方法"); } children.prototype=new parent(); pare ...
- javascript笔记整理(对象遍历封装继承)
一.javascript对象遍历 1.javascript属性访问 对象.属性名 对象['属性名'] var obj={name:'chen',red:function(){ alert(1);ret ...
- javascript笔记整理(对象基础)
一.名词解释 1.基于对象(一切皆对象,以对象的概念来编程) 2.面向对象编程(Object Oriented Programming,OOP) A.对象(JavaScript 中的所有事物都是对象) ...
- 运维开发笔记整理-QueryDict对象
运维开发笔记整理-QueryDict对象 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 客户端发送数据请求有很多种,相信运维人员已经很清楚了,如果不太清楚的话可以参考我之前的学习笔 ...
- 运维开发笔记整理-JsonResponse对象
运维开发笔记整理-JsonResponse对象 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.使用HttpResponse发送json格式的数据 1>.HttpRespo ...
- 运维开发笔记整理-Request对象与Response对象
运维开发笔记整理-Request对象与HttpResponse对象 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.request对象 1>.什么是request 首先,我 ...
- Javascript学习,DOM对象,方法的使用
JavaScript: ECMAScript: BOM: DOM: 事件 DOM的简单学习 功能:控制html文档内容 代码:获取页面标签(元素)对象和Element document.getElem ...
- JavaScript学习-4——DOM对象、事件
本章目录 --------window对象 --------document对象 --------事件 一.window对象 函数调用: 自己封装的函数只写:函数名(): 数学函数Math 例:绝对值 ...
- javascript总结44: DOM对象的dataset属性方式
1 DOM设置属性的特殊方式: DOM对象的dataset属性方式获取data-xxx方式定义的属性 由于我们经常需要在标签上自定义属性来存储数据或状态,但是如果用传统的方式操作起来比较繁琐,而且不熟 ...
随机推荐
- 使用JS进行pc端、手机端判断
<script type="text/javascript"> (function(){ var ua = nav ...
- ubuntu 10.04 下 samba 服务的配置
1. 安装 $ sudo apt-get install samba $ sudo apt-get install samba-common $ sudo apt-get install samb . ...
- android linearlayout 把控件view置底部(放在页面最下方)
<LinearLayout android:id="@+id/recLayout" android:layout_width="fill_parent" ...
- 强大的Mockito测试框架(转)
1.自动生成Mock类在需要Mock的属性上标记@Mock注解,然后@RunWith中配置Mockito的TestRunner或者在setUp()方法中显示调用MockitoAnnotations.i ...
- 转:C++中引用传递与指针传递区别
从概念上讲.指针从本质上讲就是存放变量地址的一个变量,在逻辑上是独立的,它可以被改变,包括其所指向的地址的改变和其指向的地址中所存放的数据的改变. 而引用是一个别名,它在逻辑上不是独立的,它的存在具有 ...
- vim Ctags 和taglist安装和使用
Ctags是一个用于从程序源代码树产生索引文件(或tag文件),从而便于文本编辑器来实现快速定位的实用工具.在产生的tag文件中,每一个tag的入口指向了一个编程语言的对象.这个对象可以是变量定义.函 ...
- BZOJ 1684: [Usaco2005 Oct]Close Encounter
题目 1684: [Usaco2005 Oct]Close Encounter Time Limit: 5 Sec Memory Limit: 64 MB Description Lacking e ...
- 从零开始学C++之IO流类库(三):文件的读写、二进制文件的读写、文件随机读写
一.文件的读写 如前面所提,流的读写主要有<<, >>, get, put, read, write 等操作,ofstream 继承自ostream, ifstream 继承自 ...
- - 通过 UIBezierPath 做一个中空的扫描器
今天在公司的代码里看到通过 UIBezierPath 绘制 CALayer 然后实现中空的正方形,感觉还挺有意思的,简单记录一下 UIBezierPath 这个东西. 一条线 我们自定义一个 Bezi ...
- GDG shanghai programming one hour by JavaScript
刚在昨天参加了一场JS入门编程的活动,目的就是提升对JS的兴趣. 因为是针对零基础开发者的,一上来就是“Hello World!”了 当然,想用JS输出"Hello World!" ...