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 相关文章推荐
浅析javascript的间隔调用和延时调用
Nov 12 Javascript
javascript中局部变量和全局变量的区别详解
Feb 27 Javascript
JS实现仿QQ效果的三级竖向菜单
Sep 25 Javascript
Bootstrap布局方式详解
May 27 Javascript
jQuery弹出遮罩层效果完整示例
Sep 13 Javascript
AngularJS的Filter的示例详解
Mar 07 Javascript
关于微信小程序bug记录与解决方法
Aug 15 Javascript
ES6 对象的新功能与解构赋值介绍
Feb 05 Javascript
layui数据表格跨行自动合并的例子
Sep 02 Javascript
layui 表单标签的校验方法
Sep 04 Javascript
从0到1学习JavaScript编写贪吃蛇游戏
Jul 28 Javascript
js实现随机圆与矩形功能
Oct 29 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
使用PHP导出Redis数据到另一个Redis中的代码
2014/03/12 PHP
Zend Framework实现多文件上传功能实例
2016/03/21 PHP
JS运行耗时操作的延时显示方法
2010/11/19 Javascript
由JavaScript中call()方法引发的对面向对象继承机制call的思考
2011/09/12 Javascript
JavaScript 函数惰性载入的实现及其优点介绍
2013/08/12 Javascript
JavaScript获取当前页面上的指定对象示例代码
2014/02/28 Javascript
简介AngularJS的HTML DOM支持情况
2015/06/17 Javascript
js实现select跳转菜单新窗口效果代码分享(超简单)
2015/08/21 Javascript
js实现全国省份城市级联下拉菜单效果代码
2015/09/07 Javascript
javascript日期格式化方法小结
2015/12/17 Javascript
快速使用Bootstrap搭建传送带
2016/05/06 Javascript
BootStrap selectpicker
2016/06/20 Javascript
总结Node.js中的一些错误类型
2016/08/15 Javascript
详解React-Todos入门例子
2016/11/08 Javascript
Ionic3实现图片瀑布流布局
2017/08/09 Javascript
ligerUI---ListBox(列表框可移动的实例)
2017/11/28 Javascript
jQuery实现弹窗下底部页面禁止滑动效果
2017/12/19 jQuery
详解如何构建一个Angular6的第三方npm包
2018/09/07 Javascript
JavaScript中引用vs复制示例详析
2018/12/06 Javascript
后台使用freeMarker和前端使用vue的方法及遇到的问题
2019/06/13 Javascript
JS中数据结构与算法---排序算法(Sort Algorithm)实例详解
2019/06/17 Javascript
vue单页应用的内存泄露定位和修复问题小结
2019/08/02 Javascript
[01:46]DOTA2上海特锦赛小组赛英文解说KotlGuy采访
2016/02/27 DOTA
[40:17]2018DOTA2亚洲邀请赛 4.5 淘汰赛 LGD vs Liquid 第一场
2018/04/06 DOTA
python解决方案:WindowsError: [Error 2]
2016/08/28 Python
python+VTK环境搭建及第一个简单程序代码
2017/12/13 Python
Python 利用内置set函数对字符串和列表进行去重的方法
2018/06/29 Python
Django高并发负载均衡实现原理详解
2020/04/04 Python
详细分析Python collections工具库
2020/07/16 Python
Django Auth用户认证组件实现代码
2020/10/13 Python
介绍一下游标
2012/01/10 面试题
2014年社区民政工作总结
2014/12/02 职场文书
2014年青年志愿者工作总结
2014/12/09 职场文书
2014年电教工作总结
2014/12/19 职场文书
婚礼上证婚人致辞
2015/07/28 职场文书
《蟋蟀的住宅》教学反思
2016/02/17 职场文书