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:
<div id="me"><b>试试吧</b></div>
在script中用innerHTML获取div中的内容:
var a= document.getElementById("me"); alert(a.innerHTML);
结果如下图:
alert(a.innerText);只取里面的文字
alert(a.outerHTML);包括标签本身的内容(简单了解)
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="内容改变";
三、操作属性
首先利用元素的ID找到该元素,存于一个变量中:
var a = document.getElementById("id");
然后可以对该元素的属性进行操作:
a.setAttribute("属性名","属性值"); 设置一个属性,添加或更改都可以;
a.getAttribute("属性名");获取属性的值;
a.removeAttribute("属性名");移除一个属性。
例子1:做一个问题,如果输入的答案正确则弹出正确,错误弹出错误;
这里在text里面写了一个daan属性,里面存了答案的值,点击检查答案的时候cheak输入的内容和答案是否一样:
Body中代码:
<form>中华民国成立于哪一年?<input type="text" daan="1912年" value="" id="t1" name="t1" /><input type="button" οnclick="check()" id="t2" name="t2" value="检查答案" /></form>
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秒,同意按钮变为可提交的,这里用了操作属性:disable,来改变按钮的状态,当disabled=”disabled”时按钮不可用。
body中的代码:
<form><input type="submit" id="b1" name="b1" value="同意(10)" disabled="disabled" /></form>
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()",1000); }}
四、操作样式
首先利用元素的ID找到该元素,存于一个变量中:
var a = document.getElementById("id");
然后可以对该元素的属性进行操作:
a.style="" ; 操作此ID样式的属性。
样式为CSS中的样式,所有的样式都可以用代码进行操作。
document.body.style.backgroundColor="颜色"; 整个窗口的背景色。
操作样式的class:a.className="样式表中的classname" 操作一批样式
例子1:展示图片的自动和手动切换;
Body中的代码,做一个有背景图片的div和两侧的控制对象:
</div><div id="tuijian" style=" background-image:url(imges/tj1.jpg);"><div class="pages" id="p1" onclick="dodo(-1)"></div><div class="pages" id="p2" onclick="dodo(1)"></div></div> 样式表中的代码: <style type="text/css"> *{margin:0px auto;padding:0px;font-family:"微软雅黑"; } #tuijian{width:760px;height:350px;background-repeat:no-repeat; } .pages{top:200px;background-color:#000;background-position:center;background-repeat:no-repeat;opacity: 0.4;width: 30px;height:60px;} #p1{background-image:url(imges/prev.png);float:left;margin:150px 0px 0px 10px;} #p2{background-image:url(imges/next.png);float:right;margin:150px 10px 0px 0px; } </style>
View Code
JS中的代码,这里主要是每隔3秒中调用一下huan()函数,来将背景图片的样式修改,在点击左右切换的时候变为手动切换,自动切换停止:
<script language="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("tuijian"); var xb=0; var n=0; function huan() {xb++;if(xb == jpg.length){xb=0;}tjimg.style.backgroundImage=jpg[xb];if(n==0){var id = window.setTimeout("huan()",3000);}} function dodo(m) { n=1;xb = xb+m;if(xb < 0){xb = jpg.length-1;}else if(xb >= jpg.length){xb = 0;}tjimg.style.backgroundImage=jpg[xb]; } window.setTimeout("huan()",3000);</script>
View Code
转载于:https://www.cnblogs.com/1030351096zzz/p/6024140.html
Window.document对象相关推荐
- JS中window.document对象
小知识点注:外面双引号,里面的双引号改为单引号: 在div里面行高设置和整个外面高度一样,才能用竖直居中,居中是行居中 文本框取出来 ...
- HTML Window.document
1.Window.document对象 一.找到元素: docunment.getElementById("id"):根据id找,最多找一个: var a =doc ...
- jquery插件开发;(function ( $, window, document, undefined ){}(jQuery, window,document)分析
经常看到许多jquery插件是这种形式: ;(function( $, window, document, undefined ){}){//...code }(jquery,window,docum ...
- JS中document对象 window对象
所有的全局函数和对象都属于Window对象的属性和方法. 区别: 1.window 指窗体.Window 对象表示浏览器中打开的窗口. document指页面.document是window的一个子对 ...
- window对象与document对象的区别
[window对象] 它是一个顶层对象,而不是另一个对象的属性,即浏览器的窗口. 属性 defaultStatus 缺省的状态条消息 document 当前显示的文档(该属性本身也是一个对象) fra ...
- Selenium Webdriver 的使用java执行js代码 解决 ScriptEngine不支持浏览器内置对象window,document的问题
问题场景: 使用java 掉用js代码,发现 ScriptEngine不支持浏览器内置对象window,document的问题: 问题一:为什么要 用java掉用js代码? 比如在 抓取(爬取)对方网 ...
- JavaScript入门3JS外置对象:Window、Document对象与DOM实例详解
一)window对象 1.什么是DHTML? 1)DHTML是指操作HTML以创造各种动态视觉效果,是一种浏览器端的动态网页技术. 2)DHTML的功能: ①动态改 ...
- 什么是 window 对象?什么是 document 对象?
1.什么是 window 对象 简单来说,document 是 window 的一个对象属性 Window 对象表示浏览器中打开的窗口. 如果文档包含框架(frame 或 iframe 标签),浏览器 ...
- JavaScript window.document的属性、方法和事件小结
javascript中window.document的属性.方法和事件的总结,有需要的朋友可参考一下本文章. 属性: Attributes 存储节点的属性列表(只读) childNodes 存储节点的 ...
最新文章
- 新的工作电脑 神州优雅A550-i7
- 将LSTM与word2vec结合实现中文自动写作
- 【从零学习OpenCV】4Ubuntu系统中安装OpenCV 4
- jQuery常用事件处理
- 在SAP云平台的API portal里创建和管理API
- BZOJ-2463 谁能赢呢?
- IPsec ***基础:认识IPsec ***
- mysql procedure
- Hive External Table of Doris(详细)
- 数据分析中数据概览神器pandas_profiling介绍
- C# Microsoft.Office.Interop.Word 将多个word合成一个并插入图片 转换成pdf
- 移动端车牌识别sdk——技术干货
- LeapFTP 使用指南
- word文档怎么生成html,word文档怎么排版
- 第五届强网杯全国网络安全挑战赛writeup
- 出行必备:手机1秒调出健康码 !
- 阿ken的HTML、CSS的学习笔记_CSS3选择器(笔记四)
- linux系统英语词汇大全,linux系统中常命令和英语词汇.docx
- android向DDR读写数据,透过数据看本质 - 被“吹爆”的LPDDR5内存究竟有多强大?...
- 大力哥谈 DALI - 灯具内部 DALI 产品的新标识 - D4i
热门文章
- jq获取最后一个子节点_如何选择jQuery中的最后一个子元素?
- BD和DBMS和SQL概念
- 为什么要用 redis/为什么要用缓存
- WebBrowser控件的常用方法、属性和事件
- java if else过多_Spring Boot中如何干掉过多的if else!
- Linux常用初级指令介绍
- bootstrap 合并菜单_Bootstrap与tab组合,切换菜单实例
- ios 刷新遮罩遮罩_在Adobe XD中进行遮罩的3种方法
- 全球 化 化_全球化设计
- 基于上下文的rpn_构建事物-产品评论视频中基于上下文的情感分析