Window.document 对象

一、找到元素

　　document.getElementById("id"); 根据id找，最多找一个；

　　var a = document.getElementById("id"); 将找到的元素放在变量中；

　　document.getElementsByName("name"); 根据name找，找出来的是数组；

　　document.getElementsByTagName("name"); 根据标签名找，找出来的是数组；

　　document.getElementsByClassName("name"); 根据Classname找，找出来的是数组；

二、操作内容

　　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.outHTML); 包括标签本身的内容；（inner不包括外标签，而out包括外标签）

　　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="www.baidu.com" onclick="return.flase">转向百度</a>;加了 return.flase 则不会跳转，默认是 return.ture 则会跳转。按钮也一样，如果按钮中设置 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" />

    <input type="button" id="t2" value="检查答案" onclick="cheak()" />

</form>

</body>

</html>

<script>

function cheak()

{

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

    var a1 = a.value;

    var a2 = a.getAttribute("daan");

    if(a1==a2)

    {

        alert("恭喜答对了");

    }

    else

    {

        alert("很遗憾打错了。。。");

    }

}

</script>

　　例子2：同意按钮，倒计时10s，同意按钮变为可提交的，这里用了操作属性：disabled来改变按钮的状态，当disabled="disabled"时按钮不可用。

<body>

<form>

    <input type="submit" id="sm" value="同意（10）" disabled="disabled"/>

</form>

</body>

</html>

<script>

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

var s = ;

function js()

{

    s--;

    if(s==)

    {

        a.value="同意";

        a.removeAttribute("disabled");

    }

    else

    {

        a.value="同意("+s+")";

        window.setTimeout("js()",);

    }

}

window.setTimeout("js()",);

</script>

window.setTimeout

  　　

四、操作样式

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

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

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

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

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

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

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

　　例子：展示图片的手动和自动切换（单独用一篇来做）

JavaScript的DOM操作-重点部分-第一部分的更多相关文章

  1. 第一百一十六节，JavaScript，DOM操作样式

    JavaScript,DOM操作样式 一．操作样式 CSS作为(X)HTML的辅助,可以增强页面的显示效果.但不是每个浏览器都能支持最新的CSS能力.CSS的能力和DOM级别密切相关,所以我们有必要检 ...

  2. 第一百一十五节，JavaScript，DOM操作表格

    JavaScript,DOM操作表格 学习要点: 1.操作表格 DOM在操作生成HTML上,还是比较简明的.不过,由于浏览器总是存在兼容和陷阱,导致最终的操作就不是那么简单方便了.本章主要了解一下DO ...

  3. Python之路day13 web 前端（JavaScript，DOM操作）

    参考链接:http://www.cnblogs.com/wupeiqi/articles/5433893.html day13 1. CSS示例 2. JavaScript 3. DOM操作 上节内容 ...

  4. 网站开发综合技术 三 JavaScript的DOM操作

    第3部分 JavaScript的DOM操作 1.DOM的基本概念 DOM是文档对象模型,这种模型为树模型:文档是指标签文档:对象是指文档中每个元素:模型是指抽象化的东西. 2.Windows对象操作 ...

  5. Javascript的DOM操作 - 你真的了解吗?

    摘要 想稍微系统的说说对于DOM的操作,把Javascript和jQuery常用操作DOM的内容归纳成思维导图方便阅读,同时加入性能上的一些问题. 前言 在前端开发的过程中,javascript极为重 ...

  6. HTML JavaScript的DOM操作

    1.DOM的基本概念 DOM是文档对象模型,这种模型为树模型:文档是指标签文档:对象是指文档中每个元素:模型是指抽象化的东西. 2.Window对象操作 一.属性和方法: 属性(值或者子对象): op ...

  7. JavaScript：DOM操作

    一.DOM基础DOM(Document Object Model)即文档对象模型,针对HTML和XML文档的API(应用程序接口).DOM描绘了一个层次化的节点树,运行开发人员添加.移除和修改页面的某 ...

  8. 课堂笔记--------JavaScript 的DOM操作

    1.DOM的基本概念 DOM是文档对象模型,这种模型为树模型:文档是指标签文档:对象是指文档中每个元素:模型是指抽象化的东西. 2.Window对象操作 一.属性和方法: 属性(值或者子对象): op ...

  9. 3.25课·········JavaScript的DOM操作

    1.DOM的基本概念 DOM是文档对象模型,这种模型为树模型:文档是指标签文档:对象是指文档中每个元素:模型是指抽象化的东西. 2.Window对象操作 一.属性和方法: 属性(值或者子对象): op ...

随机推荐

  1. Nginx反向代理、负载均衡、页面缓存、URL重写及读写分离详解

    大纲 一.前言 二.环境准备 三.安装与配置Nginx 四.Nginx之反向代理 五.Nginx之负载均衡 六.Nginx之页面缓存 七.Nginx之URL重写 八.Nginx之读写分离 注,操作系统 ...

  2. poj 3468

    A Simple Problem with Integers Time Limit: 5000MS Memory Limit: 131072K Total Submissions: 90736 Acc ...

  3. 第六课——UIDynamicAnimator

    今天我们要学习UIDynamicAnimator 仿真物理学 . UIKit 力学(Dynamics) 和动态效果(Motion Effects) . 创建力学基本流程: 创建运动管理 创建运动行为( ...

  4. background-origin 设置背景图片原始起始位置

  5. PAT 1011. A+B和C (15)

    给定区间[-231, 231]内的3个整数A.B和C,请判断A+B是否大于C. 输入格式: 输入第1行给出正整数T(<=10),是测试用例的个数.随后给出T组测试用例,每组占一行,顺序给出A.B ...

  6. BZOJ 1854 【Scoi2010】 游戏

    Description lxhgww最近迷上了一款游戏,在游戏里,他拥有很多的装备,每种装备都有2个属性,这些属性的值用[1,10000]之间的数表示.当他使用某种装备时,他只能使用该装备的某一个属性 ...

  7. VMware Fusion 中如何复制centos/linux虚拟机

    今天想在mac本上,弄几个centos的虚拟机,尝试搭建hadoop的全分布环境.一台台虚拟机安装过去太麻烦了,想直接将现有的centos虚拟机复制几份完事,但是复制出来的虚拟机无法上网,折腾了一翻, ...

  8. TinyFrame升级之六：全局日志的设计及实现

    日志记录显然是框架设计中不可或缺的元素,在本框架中,我们将使用log4net作为日志记录的主体.下面来具体说明如何让框架继承log4net,并通过Autofac进行IOC注入. 首先,定义好我们的Lo ...

  9. lecture15-自动编码器、语义哈希、图像检索

    Hinton第15课,本节有课外读物<Semantic Hashing>和<Using Very Deep Autoencoders for Content-Based Image ...

  10. 学习SQLite之路（三）

    20160616更新 参考: http://www.runoob.com/sqlite/sqlite-tutorial.html 1. SQLite  PRAGMA:可以用在 SQLite 环境内控制 ...