一、找到元素:

docunment.getElementById("id");根据id找,最多找一个;
    var a =docunment.getElementById("id");将找到的元素放在变量中;
    docunment.getElementByName("name");根据name找,找出来的是数组;
    docunment.getElementByTagName("name");根据标签名找,找出来的是数组;
    docunment.getElementByClassName("name") 根据classname找,找出来的是数组;

二、操作内容:

1. 非表单元素:

1)获取内容:

alert(a.innerHTML);标签里的html代码和文字都获取了

如:body中有这么一个div:

<div id="me"><b>试试吧</b></div>

在script中用innerHTML获取div中的内容:

var a= document.getElementById("me");    alert(a.innerHTML);

alert(a.innerText);只取里面的文字
    alert(a.outHTML);包括标签本身的内容(简单了解)

1)设置内容:

a.innerHTML = "<font color=red >hello world </font>";

如果用设置内容代码结果如下,div中的内容被替换了:

a.innerText会将赋的东西原样呈现

清空内容:赋值个空字符串

2. 表单元素:

1)获取内容,有两种获取方式:

var t = document.f1.t1; form表单ID为f1里面的ID为t1的input;
    var t = document.getElementById("id"); 直接用ID获取。

alert(t.value); 获取input中的value值;
    alert(t.innerHTML); 获取<textarea> 这里的值 </textarea>;

2)设置内容: t.value="内容改变";

3. 一个小知识点:

<a href="www.baidu.com" onclick ="return flase">转向百度</a> ;加了return flase则不会跳转,默认是return true会跳转。按钮也一样,如果按钮中设置return        flase 则不会进行提交,利用这个可以对提交跳转进行控制。

三、操作属性

首先利用元素的ID找到该元素,存于一个变量中:

var a = document.getElementById("id");

然后可以对该元素的属性进行操作:

a.setAttribute("属性名","属性值"); 设置一个属性,添加或更改都可以;

a .getAttribute("属性名");获取属性的值;

a.removeAttribute("属性名");移除一个属性。

四、操作样式

首先利用元素的ID找到该元素,存于一个变量中:

var a = document.getElementById("id");

然后可以对该元素的属性进行操作:

a.style.样式="" ; 操作此ID样式的属性。

样式为CSS中的样式,所有的样式都可以用代码进行操作。

document.body.stye.backgroundColor="颜色"; 整个窗口的背景色。

操作样式的class:a.className="样式表中的classname" 操作一批样式

五、相关元素操作:

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判断它的值是不是flase,可以去除空格。

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

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

var obj = document.createElement("标签名");创建一个元素 obj.innerHTML = "hello world";添加的时候首先需要创建出一个元素。

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

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

列表中a.selectIndex:选中的是第几个;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();当前时间

var d = new Date(1999,3,2);定义一个时间,1999年4月2日,3要加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里面行高设置和整个外面高度一样,才能用竖直居中,居中是行居中。

文本框取出来的值是字符串,需要用parseint()转化为数字

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

JavaScript Window.document对象的更多相关文章

  1. JavaScript的DOM操作。Window.document对象

    间隔执行一段代码:window.setlnteval("需要执行的代码",间隔毫秒数) 例 :      window.setlnteval("alert("你 ...

  2. Window.document对象

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

  3. Window.document对象 轮播练习

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

  4. HTML Window.document对象

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

  5. JavaScript window.location对象

    JavaScript window.location对象   示例 注意 方法 经常使用window.location,它的结构总是记不住,简单梳理下,方便以后查询. 示例 URL:http://b. ...

  6. JS中window.document对象

    小知识点注:外面双引号,里面的双引号改为单引号:                  在div里面行高设置和整个外面高度一样,才能用竖直居中,居中是行居中                  文本框取出来 ...

  7. 1、Window.document对象

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

  8. 3.26课·········window.document对象

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

  9. 2016/2/22 1、Window.document对象

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

随机推荐

  1. 说说Android应用的persistent属性

    转载地址:http://my.oschina.net/youranhongcha/blog 摘要 在Android系统中,有一种永久性应用.它们对应的AndroidManifest.xml文件里,会将 ...

  2. Frequent Distribution sorted by frequency

    import nltk def freq_sorted(text,ranklimit): fd=nltk.FreqDist(text) cumulative = 0.0 for rank, (word ...

  3. 使用eclipse和JavaFX Scene Builder进行快速构建JavaFX应用程序

    http://blog.csdn.net/wingfourever/article/details/7726724 使用eclipse和JavaFX Scene Builder进行快速构建JavaFX ...

  4. linux 驱动入门3

    不吃苦中苦,难为人上人.努力,给老婆孩子提供个良好的生活居住环境. http://www.cnblogs.com/nan-jing/articles/5806399.html 上文提到.可以自动创建了 ...

  5. LPC1788做U盘的时候对命令的响应

    首先是对于端点的数据处理 #ifndef __USBEP2_H_ #define __USBEP2_H_ #include "usb.h" #include "usbhw ...

  6. LPC1768的iic通讯

    LPC1768有三路IIC,其中IIC0支持高速模式和plus模式,另外两路是普通IIC,使用IIC的过程如下 首先依然是打开IIC时钟,同时打开GPIO时钟 然后配置引脚为IIC功能 另外,因为ii ...

  7. Java通过JNI调用dll详细过程(转)

    源:Java通过JNI调用dll详细过程 最近项目有这样一个需求,在已有的CS软件中添加一个链接,将当前登录用户的用户名加密后放在url地址中,在BS的login方法里通过解密判断,如果为合法用户则无 ...

  8. memcache和memcached之间的区别和联系

    memcache和memcached区别: Memcache是什么?Memcache是一个自由和开放源代码.高性能.分配的内存对象缓存系统.用于加速动态web应用程序,减轻数据库负载.它可以应对任意多 ...

  9. node.js 下依赖Express 实现post 4种方式提交参数

    上面这个图好有意思啊,哈哈, v8威武啊.... 在2014年的最后一天和大家分享关于node.js 如何提交4种格式的post数据. 上上一篇说到了关于http协议里定义的4种常见数据的post方法 ...

  10. IOS开发-UI学习-UITextField的具体属性及用法

    直接上代码,里面有各种属性的用法注释,至于每个属性有多个可以设置的值,每个值的效果如何,可以通过查看这个函数参数的枚举量,并逐一测试. //制作登陆界面 #import "ViewContr ...