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. 【转载】Windows下Mysql5.7开启binlog步骤及注意事项

    转自:https://www.cnblogs.com/wangwust/p/6433453.html 1.查看是否开启了binlog:show binary logs; 默认情况下是不开启的. 2.开 ...

  2. Android Camera多屏幕适配解决预览照片拉伸

    通常,拍照预览页面的照片拉伸主要与下面两个因素有关: 1.     Surfaceview的大小 2.     Camera中的Preview的大小 如下图:     图中preview显示的是手机支 ...

  3. [C/C++] C/C++错题集

    1. 解析: A:在GCC下输出:0    在VC6.0下输出:1 B:在GCC下输出:段错误 (核心已转储)    在VC6.0下输出:已停止工作,出现了一个问题,导致程序停止正常工作. C:正常 ...

  4. matlab imwrite

    函数功能:将图像数据写入到图像文件中,存储在磁盘上. 调用格式:imwrite(A,filename,fmt) A是图像数据,filename是目标图像名字,fmt是要生成的图片的格式. 图片格式有: ...

  5. 【bzoj5049】[Lydsy九月月赛]导航系统 并查集+双向BFS最短路

    题目描述 给你一张 $n$ 个点 $m$ 条边的随机图,边权为1.$k$ 次询问两点间最短路,不连通则输出-1. 输入 第一行包含3个正整数n,m,k(2<=n<=100000,1< ...

  6. 【bzoj3297】[USACO2011 Open]forgot STL+dp

    题目描述 发生了这么多,贝茜已经忘记了她cowtube密码.然而,她记得一些有用的信息. 首先,她记得她的密码(记为变量P)长度为L(1 <= L<=1,000)字符串,并可以被分成 一个 ...

  7. [NOIP2016]愤怒的小鸟 状态压缩dp

    题目描述 Kiana最近沉迷于一款神奇的游戏无法自拔. 简单来说,这款游戏是在一个平面上进行的. 有一架弹弓位于(0,0)处,每次Kiana可以用它向第一象限发射一只红色的小鸟,小鸟们的飞行轨迹均为形 ...

  8. hdu 1392 Surround the Trees (凸包)

    Surround the Trees Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Other ...

  9. 【刷题】BZOJ 5154 [Tjoi2014]匹配

    Description 有N个单身的男孩和N个单身女孩,男孩i和女孩j在一起得到的幸福值为Hij.一个匹配即对这N个男孩女孩的安排: 每个男孩恰好有一个女朋友,每个女孩恰好有一个男朋友.一个匹配的幸福 ...

  10. [洛谷P4721]【模板】分治 FFT

    题目大意:给定长度为$n-1$的数组$g_{[1,n)}$,求$f_{[0,n)}$,要求: $$f_i=\sum_{j=1}^if_{i-j}g_j\\f_0=1$$ 题解:直接求复杂度是$O(n^ ...