JS之document对象（找元素、操作内容、操作属性、操作样式及4道例题）
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道例题）的更多相关文章
- jQuery-操作元素的内容，属性，样式
1.操作内容 获取: 双标签:html() input:val() 设置: 双标签:html('新内容') input:val('新内容') 2.操作属性 * 获取:attr('属性名') * 设置: ...
- JavaScript学习笔记——DOM_对document对象的内容、属性、样式的操作
javascript-对文档对象的内容.属性.样式的操作 一.操作内容 1. innerHTML 用来设置或获取对象起始和结束标签内的内容(识别html标签) 2. innerText 用来设置或获取 ...
- JS中document对象 && window对象
所有的全局函数和对象都属于Window对象的属性和方法. 区别: 1.window 指窗体.Window 对象表示浏览器中打开的窗口. document指页面.document是window的一个子对 ...
- JS 的 Document对象
Document 对象是是window对象的一个属性,因此可以将document对象作为一个全局对象来访问. 当浏览器载入 HTML 文档, 它就会成为 Document 对象. Document对象 ...
- JS中document对象和window对象的区别
简单来说,document是window的一个对象属性. Window 对象表示浏览器中打开的窗口. 如果文档包含框架(frame 或 iframe 标签),浏览器会为 HTML 文档创建一个 win ...
- JS中document对象和window对象有什么区别
简单来说,document是window的一个对象属性.Window 对象表示浏览器中打开的窗口.如果文档包含框架(frame 或 iframe 标签),浏览器会为 HTML 文档创建一个 windo ...
- Document对象中的一些重要的属性和方法(笔记)
Document对象:每一个web浏览器窗口.标签页和框架由一个window对象所表示.每个window对象都有一个document属性引用的是Document对象,它是一个巨大的API中的核心对象, ...
- jQuery属性操作之DOM属性操作
DOM属性操作是对DOM元素的属性进行读取.设置和移除操作, 比如prop(). removeProp(). 1. prop() 1.1 使用prop()获取返回值 prop() 用于返回属性值时, ...
- jQuery属性操作之html属性操作
jQuery的属性操作, 是对html文档中的属性进行读取.设置和移除操作.比如,attr(). removeAttr(). 1. attr() attr()可以设置属性值或者返回被选元素的属性值 1 ...
随机推荐
- hexo设置permalink-避免url中出现中文
hexo博客初始化的url是年月日+题目:year/:month/:day/:title/,这样的url不便与分享,中文会乱吗,而且一旦修改了题目(我相信大部分人的题目都是中文)就会导致之前分享的ur ...
- iOS-加载html字符串
NSMutableAttributedString * attrString =[[NSMutableAttributedString alloc] initWithData:[resultModel ...
- 数据存储到MySQL并返回新插入的id值
当对数据库进行插入数据后,有时会需要刚插入的数据的id值,以作他用,整理如下: conn = pymysql.connect(, user=DB_USER, passwd=DB_PASSWORD, d ...
- JavaScript中Switch使用
switch 语句用于基于不同的条件来执行不同的动作.使用 switch 语句来选择要执行的多个代码块之一. switch(n) { case 1: 执行代码块 1 break; case 2: 执行 ...
- 判断form表单每个input字段是否有内容
//---------------------------------------------------input失去焦点时判断是否有值 btn_click: function () { //inp ...
- Android 打开照相机、获取相册图片、获取图片并裁减
一.调用照相机 注:surfaceView在当Activity不在前台的时候,会被销毁(onPause方法之后,执行销毁方法)当Activity回到前台时,在Activity执行onResume方法之 ...
- BZOJ4889 & 洛谷3759：[TJOI2017]不勤劳的图书管理员——题解
https://www.lydsy.com/JudgeOnline/problem.php?id=4889 https://www.luogu.org/problemnew/show/P3759 加里 ...
- LOJ6368：请让本题永远沉睡于此——题解
https://loj.ac/problem/6368 给一个分数,求对p=1e9+7取模的值. 给高一同学出的毒瘤模拟题,正好试试给loj传题,竟然过审了,虽然个人觉得很水,但是考试情况来看仅有一人 ...
- python3.5安装pycrypto
在python中使用AES加密是一种有效的加密方式,如果你研究过微信公众号api就会发现,它也用的是这个加密的.在写代码的时候,要安装crypto模块,在linux或者mac上都好说,但是在windo ...
- 直通BAT面试算法精讲课 --动态规划
1.有数组penny,penny中所有的值都为正数且不重复.每个值代表一种面值的货币,每种面值的货币可以使用任意张,再给定一个整数aim(小于等于1000)代表要找的钱数,求换钱有多少种方法. 给定数 ...