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对象)的更多相关文章

  1. javascript笔记整理(对象的继承顺序、分类)

    Object.prototype.say=function(){ alert("我是顶层的方法"); } children.prototype=new parent(); pare ...

  2. javascript笔记整理(对象遍历封装继承)

    一.javascript对象遍历 1.javascript属性访问 对象.属性名 对象['属性名'] var obj={name:'chen',red:function(){ alert(1);ret ...

  3. javascript笔记整理(对象基础)

    一.名词解释 1.基于对象(一切皆对象,以对象的概念来编程) 2.面向对象编程(Object Oriented Programming,OOP) A.对象(JavaScript 中的所有事物都是对象) ...

  4. 运维开发笔记整理-QueryDict对象

    运维开发笔记整理-QueryDict对象 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 客户端发送数据请求有很多种,相信运维人员已经很清楚了,如果不太清楚的话可以参考我之前的学习笔 ...

  5. 运维开发笔记整理-JsonResponse对象

    运维开发笔记整理-JsonResponse对象 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.使用HttpResponse发送json格式的数据 1>.HttpRespo ...

  6. 运维开发笔记整理-Request对象与Response对象

    运维开发笔记整理-Request对象与HttpResponse对象 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.request对象 1>.什么是request 首先,我 ...

  7. Javascript学习,DOM对象,方法的使用

    JavaScript: ECMAScript: BOM: DOM: 事件 DOM的简单学习 功能:控制html文档内容 代码:获取页面标签(元素)对象和Element document.getElem ...

  8. JavaScript学习-4——DOM对象、事件

    本章目录 --------window对象 --------document对象 --------事件 一.window对象 函数调用: 自己封装的函数只写:函数名(): 数学函数Math 例:绝对值 ...

  9. javascript总结44: DOM对象的dataset属性方式

    1 DOM设置属性的特殊方式: DOM对象的dataset属性方式获取data-xxx方式定义的属性 由于我们经常需要在标签上自定义属性来存储数据或状态,但是如果用传统的方式操作起来比较繁琐,而且不熟 ...

随机推荐

  1. .NET参数化Oracle查询参数

    最近在做数据库移植工作(SqlServer 2008 -> Oracle 11g),遇到一些不兼容的问题,以下是一个参数化方面的区别,资料来自其他网友,在此整理了一下. public stati ...

  2. PHPExcel 生成图形报表

    db.php为数据库操作类, $config为数据库配置,PHPExcel版本为PHPExcel_1.8.0,  PHP代码: $dir = dirname(__FILE__); require $d ...

  3. linux 下dd命令直接清除分区表(不用再fdisk一个一个的删除啦)

    分区表是硬盘的分区信息,要删除一个硬盘的所有分区表很麻烦的,需要fdisk一个一个的删除,其实dd命令可直接清除分区信息,当然,这也是linux给root用户留下的作死方法之一.dd 命令主要参数如下 ...

  4. 查找最小的k个元素

    题目:输入n个整数,输出其中最小的k个. 例如输入1,2,3,4,5,6,7和8这8个数字,则最小的4个数字为1,2,3和4. 两种思路,无非就是时间与空间的妥协. 限制空间的时候要对原数组进行排序, ...

  5. Qt 技巧:去除对话框边框 + 设置窗口可移动和透明

    1.去除对话框标题栏和边框 在构造函数里设置:    this->setWindowFlags(Qt::FramelessWindowHint); Qt::Dialog     (按照对话框的形 ...

  6. BZOJ 1684: [Usaco2005 Oct]Close Encounter

    题目 1684: [Usaco2005 Oct]Close Encounter Time Limit: 5 Sec  Memory Limit: 64 MB Description Lacking e ...

  7. BZOJ 1324: Exca王者之剑

    1324: Exca王者之剑 Description Input 第一行给出数字N,M代表行列数.N,M均小于等于100 下面N行M列用于描述数字矩阵 Output 输出最多可以拿到多少块宝石 Sam ...

  8. apache2.4.x三种MPM介绍

    三种MPM介绍                                                                               Apache 2.X  支持 ...

  9. 轻量级数据sqlite的C++调用示例

    原文地址:http://www.cnblogs.com/kfqcome/archive/2011/06/27/2136999.html #include "stdafx.h" #i ...

  10. Content Providers的步骤,来自官网文档

    Content Providers In this document Content provider basics Querying a content provider Modifying dat ...