document对象

一、找元素

1.根据id找

示例：

<input id = "a"  type="button" value="找元素" onclick="Show()" />

function Show()

{

    alert(document.getElementById("a"));

}

输出的结果是[objectHTMLDivElement]，意思是找到了HTML里面的div。根据id找到的是唯一一个元素。

2.根据class找

　　示例：

<div class="aa"></div>

<div class="aa"></div>

<span class="aa"></span>

alert(document.getElementsByClassName("aa"));

输出的结果是[objectHTMLDivCollection]。Elements后面多了一个s，是个复数形式，表明找到的不是一个元素，而是很多元素，这些元素放在一个数组里面。如果再在后面加上allert(attr[0]);输出的结果就是一个div。根据class找，返回的是一个数组。

3.根据name找

表单里面有一个比较特殊的属性name，相当于它的名称。也可以根据name找元素，返回的也是一个数组。

示例：

<input type="text" name="cc" />

alert(document.getElementsByName("cc")[0]);

//取索引0，找到的结果是<input>标签。

4.根据标签名找

　　示例：

alert(document.getElementsByTagName("div").length);

　　表示根据标签名div找，返回的也是数组。上面代码是输出数组的长度，输出结果是3，表示有3个div。

二、操作内容

1.普通元素

　　这里的内容指的是元素（标签）里面的内容，开始标签和结束标签之间的内容。

①.获取内容文本

　示例：

<div id="a">hello</div> //普通的div

var a = document.getElementById("a")//找到id是a里的div

alert(a.innerText);//获取div里的内容

　　如果在hello外面套一个<span>，获取的还是hello，这说明.innerText获取的是能在网页上看到的内容，是文本，而不是网页的代码。

②.内容设置（.innerText）

　　.innerText除了可以获取内容外，还可以设置内容，例如在上面的代码下面再加上a.innerText = "ok"，输出的结果就成为了ok，取代了hello。直接拿来用是取值，让它等于一个值就是赋值。

③.获取内容代码

　　alert(a.innerHTML);表示获取代码，例如下面代码输出的结果就是<span>hello</span>，获取的是代码。

<div id="a"><span>hello</span></div>

var a = document.getElementById("a")

alert(a.innerHTML);

④.内容设置(a.innerHTML)

　　在上面代码下面加上a.innerHTML = "<span style='color:red'>ok</span>";输出的结果就是红色的ok，相当于把这行代码替换了原来的代码。

⑤.显示出标签

显示出的标签要用a.innerText来做，例如a.innerText = "<a href='#'>超链接</a>";页面上就会显示"<a href='#'>超链接</a>。

2.表单元素

示例：

<input type="text" id="txt" value="hello" />

var a = document.getElementById("txt")

alert(a.value);

用value获取表单里的内容。上面代码输出结果是hello。如果想要设置内容，可以在上面的代码下面加上a.value = "ok";，输出就过就成了ok。

三、操作属性

1.设置属性　　　

属性是在标签里面写的，checked表示选中。

示例：

<input type="radio" name="sex" id="sex" text="aa" />男

var a = document.getElementById("sex")

a.setAttribute("checked","checked")

上面代码表示原来按钮属性里面“男”没有选中，用a.setAttribute("checked","checked")给按钮添加属性。第一个"checked"是属性名，第二个"checked"是属性值。

2.移除属性;a.removeAttribute("checked");括号里的就是属性名。

3.获取属性:alert(a.getAttribute("checked"));如果里面有一个属性，通过属性名来取出里面的值。输出的属性值就是checked。

四、操作样式

注意JS中的样式和body中的样式不太一样，中间没有-隔开，而中间有大写的字母。

1.获取样式

示例：

<div id="d" style="width:200px; height:200px; background-color:#F00"></div>

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

alert(a.style.backgroundColor);

上面代码是获取div的背景色。也可以获取宽度、高度。如果把div的样式做成内嵌的，就找不到样式的值了。说明JS里操作样式只能操作内联的，不能操作内嵌的。

2.设置样式

示例：如果加上a.style.fontSize = "30px";，上面的div中的字体就会变成30px。

3.修改样式

示例：和设置样式格式一样，a.style.backgroundColor = "green";表示背景色换成绿色。修改样式只能一条一条的写。

例子1：单选按钮确定提交是否可用

<style type="text/css">

*{ margin:0px auto; padding:0px}

</style>

</head>

<body>

<div style="width:500px; height:500px">

　　<div style="margin-top:20px">

　　　　<input type="radio" name="sure" id="s1" onclick="KeYong()" />同意

　　　　<input type="radio" name="sure" id="s2" onclick="BuKeYong()" />不同意

　　</div>

<div style="margin-top:30px">

　　<input type="submit" value="确定" id="btn" style="width:100px; height:35px" disabled="disabled" />

</div>

</div>

</body>

<script type="text/jscript">

　　function KeYong()

　　{

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

　　　　a.removeAttribute("disabled");

　　}

　　function BuKeYong()

　　{

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

　　　　a.setAttribute("disabled","disabled");

　　}

</script>

例题2：倒计时按钮可用

<body>

<div style="width:500px; height:500px; margin:100px 0px 0px 100px">

　　<input id="btn" type="submit" value="确定" style="width:100px; height:35px" disabled="disabled" />

　　<span id="daojishi">10</span>

</div>

</body>

<script type="text/javascript">

window.setTimeout("YanChi()",1000);

function YanChi()

{

　　var span = document.getElementById("daojishi")

　　/*var n =span.innerText;

　　n--;                      //标记的3行等于下面的1行的效果

　　span.innerText = n;*/

　　span.innerText = span.innerText-1;

　　if(span.innerText == 0)

　　{

　　　　document.getElementById("btn").removeAttribute("disabled");

　　　　return;

　　}

window.setTimeout("YanChi()",1000);

}

</script>

例题3：在网页上显示和系统时间同步的  时  分   秒

<body>

<div style="margin-top:20px; margin-left:30px">

　　<span id="h"></span>

　　<span id="m"></span>

　　<span id="s"></span>

</div>

</body>

<script>

window.setInterval("Bian()",1000);

function Bian()

{

　　var sj = new Date();

　　document.getElementById("h").innerText = sj.getHours();

　　document.getElementById("m").innerText = sj.getMinutes();

　　document.getElementById("s").innerText = sj.getSeconds();

}

</script>

例题四：往一个列表里面添加数据

<body>

<select id="sel" style="width:200px;" size="10">

<option>11</option>

<option>22</option>

<option>33</option>

</select>

<input type="text" id="nr" />

<input type="button" value="添加" id="btn1" onclick="Add()" />

</body>

<script type="text/javascript">

function Add()

{

　　var v = document.getElementById("nr").value;     取出用户输入的值

　　var list = document.getElementById("sel");        向列表里添加

　　list.innerHTML = list.innerHTML+"<option>"+v+"</option>";

}

</script>

JS之document对象（找元素、操作内容、操作属性、操作样式及4道例题）的更多相关文章

  1. jQuery-操作元素的内容，属性，样式

    1.操作内容 获取: 双标签:html() input:val() 设置: 双标签:html('新内容') input:val('新内容') 2.操作属性 * 获取:attr('属性名') * 设置: ...

  2. JavaScript学习笔记——DOM_对document对象的内容、属性、样式的操作

    javascript-对文档对象的内容.属性.样式的操作 一.操作内容 1. innerHTML 用来设置或获取对象起始和结束标签内的内容(识别html标签) 2. innerText 用来设置或获取 ...

  3. JS中document对象 && window对象

    所有的全局函数和对象都属于Window对象的属性和方法. 区别: 1.window 指窗体.Window 对象表示浏览器中打开的窗口. document指页面.document是window的一个子对 ...

  4. JS 的 Document对象

    Document 对象是是window对象的一个属性,因此可以将document对象作为一个全局对象来访问. 当浏览器载入 HTML 文档, 它就会成为 Document 对象. Document对象 ...

  5. JS中document对象和window对象的区别

    简单来说,document是window的一个对象属性. Window 对象表示浏览器中打开的窗口. 如果文档包含框架(frame 或 iframe 标签),浏览器会为 HTML 文档创建一个 win ...

  6. JS中document对象和window对象有什么区别

    简单来说,document是window的一个对象属性.Window 对象表示浏览器中打开的窗口.如果文档包含框架(frame 或 iframe 标签),浏览器会为 HTML 文档创建一个 windo ...

  7. Document对象中的一些重要的属性和方法(笔记)

    Document对象:每一个web浏览器窗口.标签页和框架由一个window对象所表示.每个window对象都有一个document属性引用的是Document对象,它是一个巨大的API中的核心对象, ...

  8. jQuery属性操作之DOM属性操作

    DOM属性操作是对DOM元素的属性进行读取.设置和移除操作, 比如prop(). removeProp(). 1. prop() 1.1 使用prop()获取返回值 prop() 用于返回属性值时, ...

  9. jQuery属性操作之html属性操作

    jQuery的属性操作, 是对html文档中的属性进行读取.设置和移除操作.比如,attr(). removeAttr(). 1. attr() attr()可以设置属性值或者返回被选元素的属性值 1 ...

随机推荐

  1. 在64位的环境下利用Jet来操作Access,Excel和TXT

    For example, you have a 32-bit application that uses the Microsoft OLE DB Provider for Jet. If you m ...

  2. 3ds Max学习日记（五）

      把实验室要用的小工具做了出来后,忙里偷闲,把第四章没看完的视频看完了.修改器(modifier)什么的还是挺好玩的.   FFD,车削,倒角,倒角剖面,对称,挤出,晶格,扭曲,融化,弯曲,网格平滑 ...

  3. 在vue项目中使用monaco-editor

    monaco-editor: https://github.com/Microsoft/monaco-editor 在ESM中的使用官方也有对应文档:https://github.com/Micros ...

  4. WebKit 源码分析 -- loader

    原文地址: http://peirenlei.iteye.com/blog/1718569 摘要:本文介绍 WebCore 中 Loader 模块是如何加载资源的,分主资源和派生资源分析 loader ...

  5. 【MVC】ASP.Net MVC 4项目升级MVC 5的方法

    1.备份你的项目 2.从Web API升级到Web API 2,修改global.asax,将 ? 1 WebApiConfig.Register(GlobalConfiguration.Config ...

  6. BZOJ 1816 扑克牌(二分)

    由于答案具有单调性,考虑二分答案并验证. 如果能凑齐x堆,因为每个joke在一个牌堆里最多只能用一次,则至多只能用min(x,m)个joke. 对于每个牌,如果这个牌的总数小于x,用joke补齐剩下的 ...

  7. BZOJ 1486 最小圈(01分数规划)

    好像是很normal的01分数规划题.最小比率生成环. u(c)=sigma(E)/k.转化一下就是k*u(c)=sigma(E). sigma(E-u(c))=0. 所以答案对于这个式子是有单调性的 ...

  8. 实现一个可配置的java web 参数验证器

    当使用java web的servlet来做接口的时候,如果严格一点,经常会对请求参数做一些验证并返回错误码.我发现通常参数验证的代码就在servlet里边,如果参数不正确就返回相应的错误码.如果接口数 ...

  9. [luogu5048] [Ynoi2019模拟赛] Yuno loves sqrt technology III

    题目链接 洛谷. Solution 思路同[BZOJ2724] [Violet 6]蒲公英,只不过由于lxl过于毒瘤,我们有一些更巧妙的操作. 首先还是预处理\(f[l][r]\)表示\(l\sim ...

  10. Codeforces Round #469 (Div. 2) F. Curfew

    贪心 题目大意,有2个宿管分别从1和n开始检查房间,记录人数不为n的房间个数,然后锁住房间. 没有被锁的房间中的学生可以选择藏在床底,留在原地,或者转移(最远转移d个房间)   然后抄了网上大神的代码 ...