一、找到元素:

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. 用eclipse还是myeclipse好

    工欲善其事,必先利其器.工具,只是一个达成目的的手段,如果你的目的是更关心业务逻辑和开发效率,使用myeclipse.如果你的目的是对eclipse的插件的安装,使用更加了解,业余可以研究一下ecli ...

  2. Zipf’s Law

    Let f(w) be the frequency of a word w in free text. Suppose that all the words of a text are ranked ...

  3. mysql之SQL---存储过程

    1.存储过程简介  我们常用的操作数据库语言SQL语句在执行的时候需要要先编译,然后执行,而存储过程(Stored Procedure)是一组为了完成特定功能的SQL语句集,经编译后存储在数据库中,用 ...

  4. js Date 日期格式化(转)

    var myDate = new Date();myDate.getYear();        //获取当前年份(2位)myDate.getFullYear();    //获取完整的年份(4位,1 ...

  5. BZOJ 2209: [Jsoi2011]括号序列 [splay 括号]

    2209: [Jsoi2011]括号序列 Time Limit: 20 Sec  Memory Limit: 259 MBSubmit: 1111  Solved: 541[Submit][Statu ...

  6. STM32硬件IIC操作

    Stm32具有IIC接口,接口有以下主要特性 多主机功能:该模块既可做主设备也可做从设备 主设备功能 C地址检测 位/10位地址和广播呼叫 支持不同的通讯速度 状态标志: 发送器/接收器模式标志 字节 ...

  7. git 常用命令--Linus Torvalds

    1.git log 显示仓库的历史记录,默认显示所有记录, 1)git log -m,显示最近的几次提交,, 2)git log --pretty=oneline  显示提交hash和注释 -p 按补 ...

  8. IOS之富文本编辑 分类: ios技术 2015-03-06 22:51 89人阅读 评论(0) 收藏

    之前做项目时遇到一个问题:          使用UITextView显示一段电影的简介,由于字数比较多,所以字体设置的很小,行间距和段间距也很小,一大段文字挤在一起看起来很别扭,想要把行间距调大,结 ...

  9. FUNCTION CALL STACK FRAME

    function call stack frame 两个寄存器 esp 栈顶指针寄存器,指向调用栈的栈顶(始终指向,意味着栈分配到哪里了,从当前栈往高地址是已经分配了的) ebp 基址指针寄存器,指向 ...

  10. bzoj 4383: [POI2015]Pustynia

    复习了一下线段树优化建图的姿势,在线段树上连边跑拓扑排序 这题竟然卡vector……丧病 #include <bits/stdc++.h> #define N 1810000 using ...