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


Posted in Javascript onJuly 14, 2016

一、找到元素:

    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);

结果如下图:

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

    alert(a.innerText);只取里面的文字
    alert(a.outerHTML);包括标签本身的内容(简单了解)

(2)设置内容:

a.innerHTML = "<font color=red >hello world </font>";

如果用设置内容代码结果如下,div中的内容被替换了:

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

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="http://www.baidu.com" onclick ="return false">转向百度</a> ;加了return flase则不会跳转,默认是return true会跳转。按钮也一样,如果按钮中设置return flase 则不会进行提交,利用这个可以对提交跳转进行控制。

三、操作属性

首先利用元素的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" onclick="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("笨蛋!");   
  } 
}

回答正确时的结果:

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

例子2: 同意按钮,倒计时10秒,同意按钮变为可提交的,这里用了操作属性:disabled,来改变按钮的状态,当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);   
   } 
} 
window.setTimeout("bian()",1000);

运行的结果:

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

四、操作样式

首先利用元素的ID找到该元素,存于一个变量中:

var a = document.getElementById("id");

然后可以对该元素的属性进行操作:

a. ; 操作此ID样式的属性。

样式为CSS中的样式,所有的样式都可以用代码进行操作。

document.body.style.backgroundColor="颜色"; 整个窗口的背景色。

操作样式的class:a.className="样式表中的classname" 操作一批样式

例子1:展示图片的自动和手动切换;

Body中的代码,做一个有背景图片的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>

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>

效果如下图:

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

五、相关元素操作:

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判断它的值是不是false,可以去除空格。

六、元素的创建、添加、删除:

var a = document.getElementById("id");找到a;

var obj = document.createElement("标签名");创建一个元素

obj.innerHTML = "hello world";添加的时候首先需要创建出一个元素。

a.appendChild(obj);向a中添加一个子元素。

a.removeChild(obj);删除一个子元素。

列表中a.selectedIndex:选中的是第几个;

//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();当前时间

d.setFullYear(2015,11,6);/*在想要设置的月份上减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里面行高设置时,无论设置多么高,所占用的行默认在中间位置(div上下区域内中间——【默认】垂直居中)。

文本框取出来的值是字符串,需要用parseint()转化为数字

s.match(reg); s代表一个字符串,reg代表一个字符串,两者进行匹配,如果两个字符串不匹配,返回一个null。

以上这篇JavaScript——DOM操作——Window.document对象详解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
基于jquery的DIV随滚动条滚动而滚动的代码
Jul 20 Javascript
jquery表单验证使用插件formValidator
Nov 10 Javascript
解析John Resig Simple JavaScript Inheritance代码
Dec 03 Javascript
javascript数组去重的方法汇总
Apr 14 Javascript
Nginx上传文件全部缓存解决方案
Aug 17 Javascript
jquery实现标题字体变换的滑动门菜单效果
Sep 07 Javascript
jQuery带进度条全屏图片轮播特效代码分享
Jun 28 Javascript
几种经典排序算法的JS实现方法
Mar 25 Javascript
Vue动态加载异步组件的方法
Nov 21 Javascript
Angular使用Restful的增删改
Dec 28 Javascript
微信小程序bindinput与bindsubmit的区别实例分析
Apr 17 Javascript
详解使用JWT实现单点登录(完全跨域方案)
Aug 02 Javascript
window.close(); 关闭浏览器窗口js代码的总结介绍
Jul 14 #Javascript
Jquery实现遮罩层的简单实例(就是弹出DIV周围都灰色不能操作)
Jul 14 #Javascript
jQuery实现公告新闻自动滚屏效果实例代码
Jul 14 #Javascript
jQuery mobile在页面加载时添加加载中效果 document.ready 和window.onload执行顺序比较
Jul 14 #Javascript
javascript运算符语法全面概述
Jul 14 #Javascript
jQuery实现下拉框多选 jquery-multiselect 的实例代码
Jul 14 #Javascript
浅谈addEventListener和attachEvent的区别
Jul 14 #Javascript
You might like
基于qmail的完整WEBMAIL解决方案安装详解
2006/10/09 PHP
windows服务器中检测PHP SSL是否开启以及开启SSL的方法
2014/04/25 PHP
从零开始学YII2框架(三)扩展插件yii2-gird
2014/08/20 PHP
PHP中cookie和session的区别实例分析
2014/08/28 PHP
CI框架简单邮件发送类实例
2016/05/18 PHP
深入理解PHP之源码目录结构与功能说明
2016/06/01 PHP
ThinkPHP中类的构造函数_construct()与_initialize()的区别详解
2017/03/13 PHP
PHP实现删除多重数组对象属性并重新赋值的方法
2017/06/07 PHP
EditPlus注册码生成器(js代码实现)
2013/03/25 Javascript
jQuery淡入淡出元素让其效果更为生动
2014/09/01 Javascript
JavaScript中的ubound函数使用实例
2014/11/04 Javascript
javascript实现选中复选框后相关输入框变灰不可用的方法
2015/08/11 Javascript
js实现带圆角的多级下拉菜单效果
2015/08/28 Javascript
详解JavaScript中的构造器Constructor模式
2016/01/14 Javascript
12个非常实用的JavaScript小技巧【推荐】
2016/05/18 Javascript
将html页面保存成图片,图片写入pdf的实现方法(推荐)
2016/09/17 Javascript
详解Angular4中路由Router类的跳转navigate
2017/06/09 Javascript
nodejs Assert中equal(),strictEqual(),deepEqual(),strictDeepEqual()比较
2017/09/18 NodeJs
keep-alive保持组件状态的方法
2020/12/02 Javascript
[17:13]DOTA2 HEROS教学视频教你分分钟做大人-斯拉克
2014/06/13 DOTA
python实现问号表达式(?)的方法
2013/11/27 Python
21行Python代码实现拼写检查器
2016/01/25 Python
Python实现判断一个字符串是否包含子串的方法总结
2017/11/21 Python
python 应用之Pycharm 新建模板默认添加编码格式-作者-时间等信息【推荐】
2019/06/17 Python
Python将文字转成语音并读出来的实例详解
2019/07/15 Python
Python 堆叠柱状图绘制方法
2019/07/29 Python
python实现12306登录并保存cookie的方法示例
2019/12/17 Python
基于MSELoss()与CrossEntropyLoss()的区别详解
2020/01/02 Python
Python程序控制语句用法实例分析
2020/01/14 Python
利用HTML5实现使用按钮控制背景音乐开关
2015/09/21 HTML / CSS
Kate Spade美国官网:纽约新兴时尚品牌,以包包闻名于世
2017/11/09 全球购物
Intimissimi德国网上商店:意大利知名内衣品牌
2018/04/03 全球购物
英国最受欢迎的在线隐形眼镜商店:VisionDirect.co.uk
2018/12/06 全球购物
竞选村长演讲稿
2014/04/28 职场文书
2014乡镇党委副书记对照检查材料思想汇报
2014/10/09 职场文书
2015清明节祭奠英烈寄语大全
2015/03/04 职场文书