javascript DOM dindow.docunment对象
一、找到元素:
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);包括标签本身的内容(简单了解)
(2)设置内容:
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="内容改变";
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中代码:
JS中的代码:
回答正确时的结果:
例子2: 同意按钮,倒计时10秒,同意按钮变为可提交的,这里用了操作属性:disabled,来改变按钮的状态,当disabled=”disabled”时按钮不可用。
body中的代码:
<form><input type="submit" id="b1" name="b1" value="同意(10)" disabled="disabled" /></form>
JS中的代码:
运行的结果:
四、操作样式
首先利用元素的ID找到该元素,存于一个变量中:
var a = document.getElementById("id");
然后可以对该元素的属性进行操作:
a.style="" ; 操作此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>
样式表中的代码:
JS中的代码,这里主要是每隔3秒中调用一下huan()函数,来将背景图片的样式修改,在点击左右切换的时候变为手动切换,自动切换停止:
效果如下图:
五、相关元素操作:
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 dindow.docunment对象的更多相关文章
- javascript知识点之DOM与window对象
在学习javascript过程中只是一知半解好多,碰到自己不知道属性方法,到最后都不知道自己学到了什么 js代码为什么这样写 为什么你知道这方法或属性可以这样用. DOM和window对象 DOM基本 ...
- JavaScript DOM编程基础精华01(DOM入门,DOM模型和获取页面元素,事件,window对象的方法)
DOM入门 DOM就是Html页面的模型,将每个标签都做为一个对象,JavaScript通过调用DOM中的属性.方法就可以对网页中的文本框.层等元素进行编程控制.比如通过操作文本框的DOM对象,就可以 ...
- JavaScript DOM对象和JQuery对象相互转换
1.分析源代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www ...
- javascript DOM对象转jquery对象
首先,假设一种情形:要在HTML文件中为一个select对象添加一个函数,这个函数的名字叫dynamic_change(this),当select的option被改变的时候调用onchange事件来处 ...
- JavaScript DOM 对象
JavaScript DOM 对象 什么叫DOM,DOM是文档对象模型(Document Object Model,是基于浏览器编程(在本教程中,可以说就是DHTML编程)的一套API接口,W3C ...
- 前端基础:JavaScript DOM对象
JavaScript DOM对象 通过HTML DOM,可以访问JavaScript HTML文档的所有元素. 一.HTML DOM(文档对象模型) 当网页被加载时,浏览器会创建页面的文档对象模型(D ...
- 【JavaScript】DOM之Document对象
JS(JavaScript) 一.Document对象 1.Document对象是什么 Document对象 是DOM的基本规范也是重要的对象之一,以访问,更新页面内容的属性和方法通过conslie. ...
- 浏览器环境下的javascript DOM对象继承模型
这张图是我直接在现代浏览器中通过prototype原型溯源绘制的一张浏览器宿主环境下的javascript DOM对象模型,对于有效学习和使用javascript DOM编程起到高屋建瓴的指导作用, ...
- 读书笔记:JavaScript DOM 编程艺术(第二版)
读完还是能学到很多的基础知识,这里记录下,方便回顾与及时查阅. 内容也有自己的一些补充. JavaScript DOM 编程艺术(第二版) 1.JavaScript简史 JavaScript由Nets ...
随机推荐
- 完成blog后台一枚
技术实现:纯jfinal+AmazeUI
- XML简单学习
XML简单概述 1.Extensible Markup language可扩展标记语言; 2.作用:具有层次性的描述有关系的数据: 体现在:描述数据关系:软件配置,以描述程序模块之间的关系: 语法介绍 ...
- c#上传大文件方法
客户端代码: /// <summary> /// 将本地文件上传到指定的服务器(HttpWebRequest方法) /// </summary> /// <param n ...
- structure machine learning projects 课程笔记
orthogonalization/ one metric train.dev/test 划分 开发集和测试集一定来自同一分布 onthe same distribution Human leve ...
- c++ 流继承关系
- java上传图片,把图片存到本地
思路:js通过FileReader获取图片的Base64,Java解码用IO存到本地. HTML 代码 <input type="file" ng-model="f ...
- phpstrrchr()函数的问题
strrchr — 查找指定字符在字符串中的最后一次出现 说明 string strrchr ( string $haystack , mixed $needle ) 该函数返回 haystack 字 ...
- Storm-源码分析-Topology Submit-Executor
在worker中通过executor/mk-executor worker e, 创建每个executor (defn mk-executor [worker executor-id] (let [e ...
- php中get_cfg_var()和ini_get()的用法及区别
php里get_cfg_var()和ini_get()都是取得配置值的函数,当你需要获取php.ini里的某个选项的配置值时,这两个函数都都可以使用,得到的结果是一样的. 不过,get_cfg_var ...
- Struts 2.0 入门
1. Struts2.0 概述 Struts 2.0 是以 WebWork 为核心,采用拦截器的机制来处理用户的请求; Struts 2.0 是一个基于 MVC 设计模式的 Web 层框架; Stru ...