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 篱式条件判断
Aug 22 Javascript
JavaScript 语法集锦 脚本之家基础推荐
Nov 15 Javascript
Js实现滚动变色的文字效果
Jun 16 Javascript
函数式 JavaScript(一)简介
Jul 07 Javascript
js实现图片上传并正常显示
Dec 19 Javascript
Node.js的基本知识简单汇总
Sep 19 Javascript
WEB 前端开发中防治重复提交的实现方法
Oct 26 Javascript
微信小程序-获得用户输入内容
Feb 13 Javascript
用angular实现多选按钮的全选与反选实例代码
May 23 Javascript
vue--点击当前增加class,其他删除class的方法
Sep 15 Javascript
JS拖动选择table里的单元格完整实例【基于jQuery】
May 28 jQuery
JavaScript设计模式之门面模式原理与实现方法分析
Mar 09 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
有道搜索和IP138的IP的API接口(PHP应用)
2012/11/29 PHP
php实现的网页版剪刀石头布游戏示例
2016/11/25 PHP
js通过地址栏给action传值(中文乱码全是问号)
2013/05/02 Javascript
jQuery的显示和隐藏方法与css隐藏的样式对比
2013/10/18 Javascript
js与jQuery 获取父窗、子窗的iframe
2013/12/20 Javascript
鼠标经过tr时,改变tr当前背景颜色
2014/01/13 Javascript
javascript得到当前页的来路即前一页地址的方法
2014/02/18 Javascript
jquery移动节点实例
2015/01/14 Javascript
JavaScript与HTML的结合方法详解
2015/11/23 Javascript
jquery实现一个简单的表单验证实例
2016/03/30 Javascript
浅谈js中同名函数和同名变量的执行问题
2017/02/12 Javascript
Vue keep-alive实践总结(推荐)
2017/08/31 Javascript
封装运动框架实战左右与上下滑动的焦点轮播图(实例)
2017/10/17 Javascript
jQuery实现下拉菜单动态添加数据点击滑出收起其他功能
2018/06/14 jQuery
Vue路由钩子之afterEach beforeEach的区别详解
2018/07/15 Javascript
Vue.use()在new Vue() 之前使用的原因浅析
2019/08/26 Javascript
[51:50]完美世界DOTA2联赛 Magma vs GXR 第一场 11.07
2020/11/10 DOTA
python正则表达式re模块详细介绍
2014/05/29 Python
基于python3实现倒叙字符串
2020/02/18 Python
selenium判断元素是否存在的两种方法小结
2020/12/07 Python
python脚本定时发送邮件
2020/12/22 Python
详解HTML5中的Communication API基本使用方法
2016/01/29 HTML / CSS
美国在线宠物用品商店:Entirely Pets
2017/01/01 全球购物
购买200个世界上最好的内衣品牌:Bare Necessities
2017/02/11 全球购物
YSL圣罗兰美妆英国官网:Yves Saint Laurent Beauty UK
2019/08/03 全球购物
什么是属性访问器
2015/10/26 面试题
工程造价专业大学生自荐信
2013/10/01 职场文书
人力资源部副职的竞聘演讲稿
2014/01/07 职场文书
《学棋》教后反思
2014/04/14 职场文书
设备管理实施方案
2014/05/31 职场文书
运动会广播稿200米(5篇)
2014/10/15 职场文书
晋江市人民政府党组群众路线教育实践活动整改方案
2014/10/25 职场文书
黑白记忆观后感
2015/06/18 职场文书
TV动画《史上最强大魔王转生为村民A》番宣CM公布
2022/04/01 日漫
Mysql查询时间区间日期列表,不会由于数据表数据影响
2022/04/19 MySQL
Python中tqdm的使用和例子
2022/09/23 Python