五、相关元素操作：

var a = document.getElementById("id");                找到a；

var b = a.nextSibling，                                         找a的下一个同辈元素，注意包含空格；

var b = a.previousSibling，                                    找a的上一个同辈元素，注意包含空格；

var b = a.parentNode，                                          找a的上一级父级元素；

var b = a.childNodes，                                          找出来的是数组，找a的下一级子元素；

var b = a.firstChild，                                             第一个子元素，lastChild最后一个，childNodes[n]找第几个；

alert(nodes[i] instanceof Text);                             判断是不是文本，是返回true，不是返回flase，用if判断它的值是不是false，可以去除空格。

六、元素的创建、添加、删除：

var a = document.getElementById("id");            找到a；

var obj = document.createElement("标签名")；    创建一个元素

obj.innerHTML = "hello world";                          添加的时候首先需要创建出一个元素。

a.appendChild(obj);                                          向a中添加一个子元素。

a.removeChild(obj);                                          删除一个子元素。

列表中a.selectedIndex:                                       选中的是第几个;

//a.options[a.selectIndex]                                 按下标取出第几个option对象

七、字符串的操作：

var s = new String();                                        或var s ="aaaa";

var s = "hello world";

alert(s.toLowerCase());                                     转小写 toUpperCase() 转大写

alert(s.substring(3,8));                                      从第三个位置截取到第八个位置

alert(s.substr(3,8));                                          从第三个位置开始截取，截取八个字符长度，不写后面的数字是截到最后.

s.split('');                                                         将字符换按照指定的字符拆开，放入数组，自动排序

s.length是属性

s.indexOf("world");                                           world在字符串中第一次出现的位置，没有返回-1

s.lastIndexOf("o");                                           o在字符串中最后一次出现的位置

八、日期时间的操作

var d = new Date();                                        当前时间

d.setFullYear(2015,11,6);                                /*在想要设置的月份上减1设置*/

d.getFullYear:                                                 取年份；

d.getMonth():                                                取月份，取出来的少1；

d.getDate():                                                   取天；

d.getDay():                                                   取星期几

d.getHours():                                                取小时；

d.getMinutes():                                              取分钟；d.getSeconds():取秒

d.setFullYear():                                              设置年份，设置月份的时候注意-1。

八、数学函数的操作

Math.ceil();                           大于当前小数的最小整数

Math.floor();                         小于当前小数的最大整数

Math.sqrt();                           开平方

Math.round();                       四舍五入

Math.random();                     随机数，0-1之间

十、小知识点

外面双引号，里面的双引号改为单引号；

在div里面行高设置时，无论设置多么高，所占用的行默认在中间位置（div上下区域内中间——【默认】垂直居中）。

文本框取出来的值是字符串，需要用parseint（）转化为数字

s.match(reg); s代表一个字符串，reg代表一个字符串，两者进行匹配，如果两个字符串不匹配，返回一个null。

总结：

三、document：

1.找

var d = document.getElementById("元素的ID");

var d = document.getElementsByName("元素名称")

var d = document.getElementsByTagName("标签名")

2.操作元素内容：

（1）表单元素：文本（input:type=text,input:type=password;textarea;input:type=hidden）按钮（submit,reset,button image）选择（radio,checkbox,select,file） d.value=xxxx; var s = d.value;

（2）非表单元素：h1...h6,p,div,ul,ol,li d.innerHTML = xxxx; var s = d.innerHTML;

3.操作元素属性：

d.setAttribute(名，值) var s = d.getAttribute(名) d.removeAttribute(名);

4.操作元素样式：

(1)内联样式： d.style.backgroundColor = "#FFFF00"; var s = d.style.backgroundColor;

(2)class属性： d.className=""

5.操作相关元素： 父，子，兄，弟

拓展：匿名函数

不需要调用，并且不需要给函数命名

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<style>

.aa

{

    float:left;

    width:80px;

    height:40px;

    margin-left:20px;

    position:relative;

    border:1px solid red;

    text-align:center;

    line-height:40px;

    cursor:pointer;}

.aa:hover

{

    background-color:#C6C;}

</style>

</head>

<body>

<div class="aa">1111</div>

<div class="aa">2222</div>

<div class="aa">3333</div>

<div class="aa">4444</div>

<div class="aa">5555</div>

<div class="aa">6666</div>

</body>

</html>

<script>

var array= document.getElementsByClassName("aa");

for(var i =0;i<array.length;i++)

{

    array.item(i).onclick=function(){

            alert(this.innerHTML)

        }

}

</script>

document对象（二）的更多相关文章

  1. dom对象详解--document对象(二)

       dom对象详解--style对象 style对象 style对象和document对象下的集合对象styleSheets有关系,styleSheets是文档中所有style对象的集合,这里讲解的 ...

  2. javascript之DOM(二Document对象)

    javascript通过Document类型来表示文档.在浏览器中document是HTMLDocument对象(继承自Document)的一个实例,表示整个html页面.而且在浏览器中documen ...

  3. Window.document对象

    1.Window.document对象 一.找到元素: docunment.getElementById("id"):根据id找,最多找一个:     var a =docunme ...

  4. 9.22 window对象、document对象

    一.window对象: 属性(值或者子对象): opener:打开当前窗口的源窗口,如果当前窗口是首次启动浏览器打开的,则opener是null,可以利用这个属性来关闭源窗口 dialogArgume ...

  5. Window.document对象 轮播练习

    Window.document对象 一.找到元素:     docunment.getElementById("id"):根据id找,最多找一个:     var a =docun ...

  6. HTML Window.document对象

    1.Window.document对象 一.找到元素: docunment.getElementById("id"):根据id找,最多找一个:    var a =docunmen ...

  7. javascript之document对象

    一.修改网页元素 当使用document提供的方法和Element的属性得到网页元素之后,就可以对元素的内容进行修改,如下例所示的“全选/全不选”的实现. 例3-17 <html> < ...

  8. HTML--8Window.document对象

    1.Window.document对象 一.找到元素: docunment.getElementById("id"):根据id找,最多找一个:     var a =docunme ...

  9. 课堂所讲整理：HTML--8Window.document对象

    1.Window.document对象 一.找到元素: docunment.getElementById("id"):根据id找,最多找一个:    var a =docunmen ...

  10. Window.document对象（1）

    1.Window.document对象 一.找到元素: docunment.getElementById("id"):根据id找,最多找一个:     var a =docunme ...

随机推荐

  1. cocos2dx旧版本支持arm64修改

    修改的版本是cocos2dx.2.2 1.在neon_matrix_impl.c中修改 #if defined(__ARM_NEON__)为 #if defined(_ARM_ARCH_7) 2.在m ...

  2. mysql日常语句总结

    #删除mysql的二进制日志文件 #将删除mysql-bin.*****1之前的日志文件 purge binary logs to 'mysql-bin.*****1'; #重新生成一个二进制日志文件 ...

  3. java sleep() 、yield()

    1.sleep() 使当前线程(即调用该方法的线程)暂停执行一段时间,让其他线程有机会继续执行,但它并不释放对象锁.也就是说如果有synchronized同步快,其他线程仍然不能访问共享数据.注意该方 ...

  4. a byte of python (摘01)

    a byte of python 第一章 介绍 Python 特色 简单.易学.免费.开源 高层语言.可移植性.解释性 面向对象.可扩展性.可嵌入性 丰富的库 第二章 安装Python http:// ...

  5. Effective C++ -----条款49：了解new-handler 的行为

    set_new_handler允许客户指定一个函数,在内存分配无法获得满足时被调用. Nothorw new 是一个颇为局限的工具,因为它只适用于内存分配:后继的构造函数调用还是可能抛出异常.

  6. 【leetcode】Spiral Matrix（middle）

    Given a matrix of m x n elements (m rows, n columns), return all elements of the matrix in spiral or ...

  7. 【编程题目】n 个数字（0,1,…,n-1）形成一个圆圈，从数字 0 开始

    第 18 题(数组):题目:n 个数字(0,1,…,n-1)形成一个圆圈,从数字 0 开始,每次从这个圆圈中删除第 m 个数字(第一个为当前数字本身,第二个为当前数字的下一个数字).当一个数字删除后, ...

  8. LeetCode 217 Contains Duplicate

    Problem: Given an array of integers, find if the array contains any duplicates. Your function should ...

  9. September 21st 2016 Week 39th Wednesday

    Don't try so hard, the best things come when you least expect them. 不要着急,最好的总会在最不经意的时候出现. Always tur ...

  10. September 18th 2016 Week 39th Sunday

    Be the king of the spiritual kingdom that is your heart. 在心灵的国土上,做自己的国王. Most often we are not able ...