JavaScript——DOM操作——窗口文档对象详细说明

首先，找到元素：

docunmont . getelementbyid(' id ')；根据id，最多找到一个；var a=docunmont . getelementbyid(' id ')；将找到的元素放入变量中；docunmont . getelementsbyname(' name ')；根据名称，找到数组；docunmont . getelementsbytagname(' name ')；根据标签名，找到数组；文件。getelementsbyclassname ('name ')根据类名查找，找到一个数组；

二、操作内容：

1.非表单元素：

(1)获取内容：

alert(a . innerhtml)；获取标签中的Html代码和文本，并获取标签中的所有内容。

例如，正文中有这样一个div:

Div id='me '试试看/div

用脚本中的innerHTML获取div的内容：

var a=document . getelementbyid(' me ')；

alert(a . innerhtml)；

结果如下：

alert(a . innertext)；只把文本警告(a.outerHTML)带进去；包括标签本身的内容(简单理解)

(2)设置内容：

a . innerHTMl=' font color=red hello world/font '；

如果设置内容代码的结果如下，div中的内容将被替换：

内部文本将按原样呈现分配的内容

空内容：分配一个空字符串

2.表单元素：

(1)获取内容，有两种获取方式：

var t=document . f1 . t1；输入表单标识；f1中的ID为t1；var t=document . getelementbyid(' id ')；直接凭身份证领取。

alert(t . value)；获取输入中的值；alert(t . innerhtml)；在此处获取text area/text area的值；

(2)设置内容：t.value=“内容变更”；

3.一个小知识点：

a href=' http://www . Baidu.com ' onclick=' return false '转百度/a；如果添加了返回瓶，它将不会跳转。默认情况下，返回true会跳转。按钮是一样的。如果在按钮中设置了返回瓶，则不会提交。这可以用来控制提交跳转。

三.操作属性

首先，根据元素的标识找到它，并将其存储在变量中：

var a=document . getelementbyid(' id ')；

然后，您可以操作元素的属性：

A.setAttribute('属性名'，'属性值')；设置一个属性，添加或更改它；

A.getAttribute('属性名')；获取属性的值；

A.removeAttribute('属性名')；移除属性。

例1:做一道题，如果输入的答案正确，就会正确弹出，错误也会弹出；

这里，一个daan属性被写在文本中，它存储答案的值。点击查看答案时，cheak输入的内容是否与答案相同：

正文中的代码：

中华民国成立于哪一年？输入类型中的代码=' text ' daan=' 1912 ' value=' id=' t1 ' name=' t1 '/输入类型=' button ' onclick=' check()' id=' T2 ' name=' T2 ' value=' check answer '/formJS:

函数check(){ var a=document . getelementbyid(' t1 ')；var a1=a.valuevar a2=a . GetAttribute(' daan ')；If(a1==a2) {alert('恭喜你答对了！');} else {alert('白痴！');}}答案正确时的结果：

示例2:同意按钮，倒计时10秒，同意按钮变为可提交。这里操作属性：disabled用于改变按钮状态，disabled=disabled时按钮不可用。

正文中的代码：

forminput中的代码类型=' submit ' id=' B1 ' name=' B1 ' value=' agree(10)' disabled=' disabled '/formjs:

var n=10var a=document . getelementbyid(' B1 ')；函数bian(){ n-；if(n==0){ a . remove Attribute(' disabled ')；A.value='同意'；返回；} else { a . value=' agree(' n ')'；window.setTimeout('bian()'，1000)；} } window.setTimeout('bian()'，1000)；运行结果：

第四，操作风格

首先，根据元素的标识找到它，并将其存储在变量中：

var a=document . getelementbyid(' id ')；

然后，您可以操作元素的属性：

a.操作此标识样式的属性。

样式是CSS样式，所有样式都可以通过代码操作。

document . body . style . background color=' color '；整个窗口的背景色。

操作样式类：在样式表中操作一批样式

示例1:显示图片的自动和手动切换；

正文中的代码，用背景图片和两侧的控件对象做一个div:

div id=' tui Jian ' style=' background-image : URL(imges/tj1 . jpg)；'div class=' pages ' id=' P1 ' onclick=' dodo(-1)'/div class=' pages ' id=' p2 ' onclick=' dodo(1)'/div/div样式表中的代码：

style type=' text/CSS ' * { margin :0 px auto；padding:0pxFont-family: '微软雅黑'；} # tuijian { width:760px高度：350 px；背景-repeat : no-repeat；} .页面{ top:200px背景色： # 000；背景-位置：中心；背景-repeat : no-repeat；opacity: 0.4宽度： 30px；高度：60 px；} # P1 { background-image : URL(imges/prev . png)；float:leftmargin:150px 0px 0px 10px} # p2 { background-image : URL(imges/next . png)；右浮动：margin:150px 10px 0px 0pxstylejs中的代码。在这里，每3秒钟调用一次huan()函数来修改背景图片的样式。当您单击左右切换时，它会变为手动切换，自动切换会停止：

脚本语言=' JavaScript ' var jpg=new Array()；jpg[0]=' URL(imges/tj1 . jpg)'；jpg[1]=' URL(imges/tj2 . jpg)'；jpg[2]=' URL(imges/tj3 . jpg)'；var tjimg=document . getelementbyid(' tui Jian ')；var XB=0；var n=0；函数Huan(){ XB；if(XB==jpg . length){ XB=0；} tjimg . style . background image=jpg[XB]；if(n==0){ var id=window . settimeout(' Huan()'，3000)；} }函数dodo(m){ n=1；XB=XB m；if(XB 0){ XB=jpg . length-1；} else if(XB=jpg . length){ XB=0；} tjimg . style . background image=jpg[XB]；} window.setTimeout('huan()'，3000)；/script的效果如下：

动词（verb的缩写）相关要素的操作：

var a=document . getelementbyid(' id ')；找一个；

Var b=a.nextSibling，找到a的下一个兄弟元素，注意包含空格；

Var b=a.previousSibling，找到A的前一个兄弟元素，注意包含空格；

Var b=a.parentNode，在A的下一级找到父元素；

Var b=a.childNodes，找出数组，找到A的下一个子元素；

Var b=a.firstChild，第一个子元素，最后一个子元素，childNodes[n]找到哪一个；

警报(文本的节点[i]实例)；确定它是否是文本，返回true，而不是flase，并使用if来确定它的值是否为false，这样可以删除空格。

不及物动词元素的创建、添加和删除：

var a=document . getelementbyid(' id ')；找一个；

Var obj=document.createElement('标记名')；创建元素

obj.innerHTML=' hello world添加时，需要先创建一个元素。

a . appendchild(obj)；将子元素添加到。

a . remove child(obj)；删除子元素。

列表中的. selectedIndex:选择了哪一个；

//a.options[a.selectIndex]根据下标取出哪个选项对象

七、弦的操作：

var s=new String()；或者var s=' aaaa

var s=' hello world

alert(s . tolowercase())；将小写变成大写

alert(s.substring(3，8))；从第三个位置切到第八个位置

alert(s.substr(3，8))；从第三个位置开始剪，剪八个字符长，剪到最后不写下面的数字。

s . split(')；根据指定的字符分解字符，将它们放入数组，并自动排序

长度是一个属性

s . indexof(' world ')；字符串中世界的第一次出现没有返回-1

s . LastIndex of(' o ')；o字符串中最后一次出现的位置

八、日期和时间操作

var d=新日期()；目前

d.setFullYear(2015，11，6)；/*从要设置的月份中减去1 */

D.getFullYear:取年份；

D.getMonth():取月，取出的小于1；

D.getDate():取当天；

以一周中的某一天为例

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。

以上对JavaScript——DOM操作——Window.document对象的详细说明就是边肖与大家分享的全部内容。希望能给大家一个参考，支持我们。