您好,欢迎来到华佗小知识。
搜索
您的当前位置:首页JavaScript——DOM操作——Window.document对象详解

JavaScript——DOM操作——Window.document对象详解

来源:华佗小知识
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()函数,来将背景图⽚的样式修改,在点击左右切换的时候变为⼿动切换,⾃动切换停⽌:

Copyright © 2019- huatuo0.cn 版权所有 湘ICP备2023017654号-2

违法及侵权请联系:TEL:199 18 7713 E-MAIL:2724546146@qq.com

本站由北京市万商天勤律师事务所王兴未律师提供法律服务