当前位置 : 首页 » 文章分类 :  开发  »  JavaScript

JavaScript

[TOC]


JavaScript获取html元素值

JavaScript中取得元素的方法有4种:分别是:

  • 1、getElementById() :通过id取得HTML元素。
  • 2、getElementsByName() :通过name取得元素,是一个数组。
  • 3、getElementsByTagName() :通过HTML标签取得元素,是一个数组。
  • 4、getElementsByClassName() :根据类名获得元素,是一个数组

getElementById()

getElementById() 方法可返回对拥有指定 ID 的第一个对象的引用。
HTML DOM 定义了多种查找元素的方法,除了 getElementById() 之外,还有 getElementsByName() 和 getElementsByTagName()。
不过,如果您需要查找文档中的一个特定的元素,最有效的方法是 getElementById()。
在操作文档的一个特定的元素时,最好给该元素一个 id 属性,为它指定一个(在文档中)唯一的名称,然后就可以用该 ID 查找想要的元素。

例1,获取元素标签内的值

<html>
<head>
<script type="text/javascript">
function getValue()
  {
  var x=document.getElementById("myHeader")
  alert(x.innerHTML)
  }
</script>
</head>

<body>
<h1 id="myHeader" onclick="getValue()">This is a header</h1>
<p>Click on the header to alert its value</p>
</body>
</html>

例2,自定义id(x)方法
getElementById() 是一个重要的方法,在 DOM 程序设计中,它的使用非常常见。我们为您定义了一个工具函数,这样您就可以通过一个较短的名字来使用 getElementById() 方法了:

function id(x) {
  if (typeof x == "string") return document.getElementById(x);
  return x;
  }

上面这个函数接受元素 ID 作为它们的参数。对于每个这样的参数,您只要在使用前编写 x = id(x) 就可以了。


getElementsByName()

getElementsByName() 方法可返回带有指定名称的对象的集合。
该方法与 getElementById() 方法相似,但是它查询元素的 name 属性,而不是 id 属性。
另外,因为一个文档中的 name 属性可能不唯一(如 HTML 表单中的单选按钮通常具有相同的 name 属性),所有 getElementsByName() 方法返回的是元素的数组,而不是一个元素。

例,统计文档内name为myInput的标签有多少个

<html>
<head>
<script type="text/javascript">
function getElements()
  {
  var x=document.getElementsByName("myInput");
  alert(x.length);
  }
</script>
</head>

<body>
<input name="myInput" type="text" size="20" /><br />
<input name="myInput" type="text" size="20" /><br />
<input name="myInput" type="text" size="20" /><br />
<br />
<input type="button" onclick="getElements()" value="名为 'myInput' 的元素有多少个?" />
</body>

</html>

getElementsByTagName()

getElementsByTagName() 方法可返回带有指定标签名的对象的集合。
getElementsByTagName() 方法返回元素的顺序是它们在文档中的顺序。
如果把特殊字符串 “*” 传递给 getElementsByTagName() 方法,它将返回文档中所有元素的列表,元素排列的顺序就是它们在文档中的顺序。
注意:传递给 getElementsByTagName() 方法的字符串可以不区分大小写。

例1,统计文档内有多少个input标签

<html>
<head>
<script type="text/javascript">
function getElements()
  {
  var x=document.getElementsByTagName("input");
  alert(x.length);
  }
</script>
</head>

<body>
<input name="myInput" type="text" size="20" /><br />
<input name="myInput" type="text" size="20" /><br />
<input name="myInput" type="text" size="20" /><br />
<br />
<input type="button" onclick="getElements()" value="How many input elements?" />
</body>

</html>

例2,统计文档内有多少表格table

var tables = document.getElementsByTagName("table");
alert ("This document contains " + tables.length + " tables");

例3,获得文档中的第4个段落
如果您非常了解文档的结构,也可以使用 getElementsByTagName() 方法获取文档中的一个特定的元素。例如,下面的代码可以获得文档中的第四个段落:
var myParagragh = document.getElementsByTagName("p")[3];
不过,如果您需要操作某个特定的元素,使用 getElementById() 方法将更为有效。

例4,获取id=”main”的元素中的所有p元素
下面的例子返回包含文档中所有p元素的列表,并且这些p元素应该是 id=”main” 的元素的后代(子、孙等等):
document.getElementById("main").getElementsByTagName("p");


getElementsByClassName()

getElementsByClassName() 方法返回文档中所有指定类名的元素集合,作为 NodeList 对象,元素在集合中的顺序以其在代码中的出现次序排序。
若获取class为多个类的元素,多个类名使用空格分隔,如 “test demo”。
NodeList 对象代表一个有顺序的节点列表。NodeList 对象 我们可通过节点列表中的节点索引号来访问列表中的节点(索引号由0开始)。
提示: 你可以使用 NodeList 对象的 length 属性来确定指定类名的元素个数,并循环各个元素来获取你需要的那个元素。
注意: Internet Explorer 8 及更早 IE 版本不支持 getElementsByClassName() 方法。

例1,获取class为”example”和”color”的所有元素
var x = document.getElementsByClassName("example color");

例2,统计文档中有多少个class为example的元素

<html>
<body>

<div class="example">样式 class="example" 的 div 元素</div>
<div class="example">另外一个样式 class="example" 的 div 元素</div>
<p class="example">样式 class="example" 的 p 元素</p>
<p>点击按钮查看文档中有多少个类名为 "example" 的元素。</p>
<button onclick="myFunction()">点我</button>
<p><strong>注意:</strong> Internet Explorer 8 及更早 IE 版本不支持 getElementsByClassName() 方法。</p>
<p id="demo"></p>

<script>
function myFunction() {
    var x = document.getElementsByClassName("example");
    document.getElementById("demo").innerHTML = x.length;
}
</script>

</body>
</html>

例3,修改所有样式class为”example”的元素的背景颜色

<html>
<head>
<style>
.example {
    border: 1px solid black;
    margin: 5px;
}
</style>
</head>

<body>

<div class="example">样式 class="example" 的 Div 元素</div>
<div class="example">另外一个样式 class="example" 的 Div 元素</div>
<p class="example">样式为 class="example" 的 p 元素。</p>
<p>这是一个插入在 p 元素中样式 class="example" 的<span class="example">span</span> 元素 。</p>
<p>点击按钮修改所有样式 class="example" 的背景颜色。</p>
<button class="example" onclick="myFunction()">点我</button>
<p><strong>注意:</strong> Internet Explorer 8 及更早 IE 版本不支持 getElementsByClassName() 方法。</p>

<script>
function myFunction() {
    var x = document.getElementsByClassName("example");
    var i;
    for (i = 0; i < x.length; i++) {
        x[i].style.backgroundColor = "red";
    }
}
</script>

</body>
</html>

例4,修改第一个类为”example color”的div元素的背景颜色

<html>
<head>
<style>
div {
    border: 1px solid black;
    margin: 5px;
}
</style>
</head>

<body>

<div class="example">
  <p>P 元素在在第一个样式为 class="example" 的 Div 元素中。Div 的索引值为 0。</p>
</div>
<div class="example color">
  <p>P 元素在在第一个样式为 class="example color" 的 Div 元素中。Div 的索引值为 0。</p>
</div>
<div class="example color">
  <p>P 元素在在第二个样式为 class="example color" 的 Div 元素中。Div 的索引值为 1。</p>
</div>
<p>点击按钮修改第一个类为 "example color" 的 div 元素的背景颜色。</p>
<button onclick="myFunction()">点我</button>
<p><strong>注意:</strong> Internet Explorer 8 及更早 IE 版本不支持 getElementsByClassName() 方法。</p>

<script>
function myFunction() {
    var x = document.getElementsByClassName("example color");
    x[0].style.backgroundColor = "red";
}
</script>

</body>
</html>

innerHTML与value的区别

getElementById().innerHTML与getElementById().value的区别
有value属性的标签才能操作其value值,只有input等表单输入标签才有value值。
例如:
<input type="text" id="txt1" value="hello"/>
这样一个元素,当你使用document.getElementById(“txt1”).value时,可以得到其value值,即”hello”这个字符串。
如果一个元素没有value值,那么使用document.getElementById().value时是取不到。这是理所当然的,没有的东西怎么访问?
比如一个div标记,就不一定有value值。

innerHTML是指元素起始标记和结束标记之间的内容。
例如:
<label id="lb1">this is a label</label>
当你使用document.getElementById(“lb1”).innerHTML可以取到<label></label>之间的内容,即“this is a label”。

一个实例如下:

<html>
<head>
<script type="text/javascript">
function getValue()
{
var x=document.getElementById("myHeader")
alert(x.innerHTML)
}
function getValue2()
{
var x=document.getElementById("myInput")
alert(x.value)
}
</script>
</head>

<body>
<h1 id="myHeader" onclick="getValue()">这是标题</h1>
<input id="myInput" type="text" value="value值" onclick="getValue2()" />
<p>点击标题,会提示出它的innerHTML值。</p>
<p>点击input框,会提示出它的value值。</p>
</body>

</html>

优化


参考


上一篇 Hexo博客(11)添加网易云跟帖评论系统

下一篇 Apache-Maven-POM

域名迁移公告
2017年12月20日起,本博客迁移到新域名madaimeng.com,旧域名masikkk.com不再更新内容,但将永久保持可访问!
阅读
1,957
阅读预计8分钟
创建日期 2017-05-22
修改日期 2017-07-30
类别
百度推荐