JavaScript——DOM操作——Window.document对象详解
⼀、找到元素:
docunment.getElementById(\"id\");根据id找,最多找⼀个;
var a =docunment.getElementById(\"id\");将找到的元素放在变量中;
docunment.getElementsByName(\"name\");根据name找,找出来的是数组;
docunment.getElementsByTagName(\"name\");根据标签名找,找出来的是数组; docunment.getElementsByClassName(\"name\") 根据classname找,找出来的是数组;⼆、操作内容: 1. ⾮表单元素:(1)获取内容:
alert(a.innerHTML);标签⾥的html代码和⽂字都获取了,标签⾥⾯的所有内容。如:body中有这么⼀个div:
试试吧
在script中⽤innerHTML获取div中的内容: var a= document.getElementById(\"me\"); alert(a.innerHTML);结果如下图:
alert(a.innerText);只取⾥⾯的⽂字
alert(a.outerHTML);包括标签本⾝的内容(简单了解)(2)设置内容:
a.innerHTML = \"hello world \";如果⽤设置内容代码结果如下,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); 获取;(2)设置内容: t.value=\"内容改变\";3. ⼀个⼩知识点:
转向百度 ;加了return flase则不会跳转,默认是return true会跳转。按钮也⼀样,如果按钮中设置return flase 则不会进⾏提交,利⽤这个可以对提交跳转进⾏控制。三、操作属性
⾸先利⽤元素的ID找到该元素,存于⼀个变量中:
var a = document.getElementById(\"id\");然后可以对该元素的属性进⾏操作:
a.setAttribute(\"属性名\属性值\"); 设置⼀个属性,添加或更改都可以;a.getAttribute(\"属性名\");获取属性的值;a.removeAttribute(\"属性名\");移除⼀个属性。
例⼦1:做⼀个问题,如果输⼊的答案正确则弹出正确,错误弹出错误;
这⾥在text⾥⾯写了⼀个daan属性,⾥⾯存了答案的值,点击检查答案的时候cheak输⼊的内容和答案是否⼀样:Body中代码:
JS中的代码:
function check() {
var a=document.getElementById(\"t1\"); var a1=a.value;
var a2=a.getAttribute(\"daan\"); if(a1==a2) {
alert(\"恭喜你答对了!\"); } else {
alert(\"笨蛋!\"); } }
回答正确时的结果:
例⼦2: 同意按钮,倒计时10秒,同意按钮变为可提交的,这⾥⽤了操作属性:disabled,来改变按钮的状态,当disabled=”disabled”时按钮不可⽤。body中的代码:
JS中的代码:
var n=10;
var a= document.getElementById(\"b1\");function bian() {
n--; if(n==0) {
a.removeAttribute(\"disabled\"); a.value=\"同意\"; return; } else {
a.value= \"同意(\"+n+\")\";
window.setTimeout(\"bian()\ } }
window.setTimeout(\"bian()\
运⾏的结果:
四、操作样式
⾸先利⽤元素的ID找到该元素,存于⼀个变量中:
var a = document.getElementById(\"id\");然后可以对该元素的属性进⾏操作:a. ; 操作此ID样式的属性。
样式为CSS中的样式,所有的样式都可以⽤代码进⾏操作。
document.body.style.backgroundColor=\"颜⾊\"; 整个窗⼝的背景⾊。操作样式的class:a.className=\"样式表中的classname\" 操作⼀批样式例⼦1:展⽰图⽚的⾃动和⼿动切换;
Body中的代码,做⼀个有背景图⽚的div和两侧的控制对象:
样式表中的代码:
JS中的代码,这⾥主要是每隔3秒中调⽤⼀下huan()函数,来将背景图⽚的样式修改,在点击左右切换的时候变为⼿动切换,⾃动切换停⽌: