js中常用的属性博客分类： JS　　Notes

程序员文章站 2024-02-17 23:34:40

...

DOM全称是document object model(文档对象模型)，DOM是用来干什么的呢？假设把你的文档看成一个单独的对象，DOM就是如何用HTML或者XML对这个对象进行操作和控制的标准。

js中常用的属性

博客分类： JS　　Notes

一、获取元素

使用Javascript编程时，获取文档的元素是使用DOM的基本方式。下面将介绍其中两个用来获取元素的基本方法：getElementById()和getElementsByTagName()。

1、通过ID获取元素

getElementById()方法是DOM中频繁使用的一个方法。它获取HTML文档的一个特定元素并且返回一个对它的引用。为了获取元素，它必须具有一个ID属性。

举例如下：

<div id="div1">
    <p id="p1">
        我是第一个P</p>
    <p id="p2">
        我是第二个P</p>
 
 
window.onload = function () {
        var str = document.getElementById("p1").innerHTML;
        alert(str);        //弹出    我是第一个P
    }</div>

2、通过标签名获取

当只获取一个或几个元素时，getElementById（）方法工作的很好，但是当我需要同时获取超过一个的元素时，就发现getElementsByTagName()方法更合适。后者是通过数组或者列表的格式返回指定标签类型的所有元素。

举例如下：

<div id="div1">
    <p id="p1">
        我是第一个P</p>
    <p id="p2">
        我是第二个P</p>
 
 
window.onload = function () {
        var str = document.getElementsByTagName("p")[1].innerHTML;
        alert(str);        //输出  我是第二个P，因为获取的是索引为1的P，索引从0开始
    }    
 
window.onload = function () {
        var arr = document.getElementsByTagName("p");
        for (var i = 0; i < arr.length; i++) {
            alert(arr[i].innerHTML);
        }
    }
 
window.onload = function () {
        var node = document.getElementById("div1");
     var node1 = document.getElementsByTagName("p")[1];    //从获取到的元素再获取
        alert(node1.innerHTML);
}</div>

3、通过属性名获取

getElementsByName() 方法可返回带有指定名称的对象的集合。

该方法与 getElementById() 方法相似，但是它查询元素的 name 属性，而不是 id 属性。

另外，因为一个文档中的 name 属性可能不唯一（如 HTML 表单中的单选按钮通常具有相同的 name 属性），所有 getElementsByName() 方法返回的是元素的数组，而不是一个元素

<html>
<head>
<script type="text/javascript">
<--返回所有name=myInput的元素对象集合-->
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="How many elements named 'myInput'?" />

</body>
</html>

  <--获取对象中下标为1的对象的值-->
  var x=document.getElementsByName("myInput")[1].value;
  <--获取对象中下标为1的对象-->		
  var x=document.getElementsByName("myInput")[1];
  var y=x.getAttribute("type");
  alert(y);

二、操作属性

1、getAttribute()与setAttribute()

getAttribute()是读取属性内容，setAttribute()方法对文档做出的修改，将使得文档在浏览器窗口里的显示效果和/或行为动作发生相应的变化，但我们在通过浏览器的view source（查看源代码）选项去查看文档的源代码时看到的仍将是原来的属性值——也就是说，setAttribute()方法做出的修改不会反映在文档本身的源代码里。这种“表里不一”的现象源自DOM的工作模式：先加载文档的静态内容、再以动态方式对它们进行刷新，动态刷新不影响文档的静态内容。这正是DOM的真正威力和诱人之处：对页面内容的刷新不需要最终用户在他们的浏览器里执行页面刷新操作就可以实现。

2、举例

<title>Untitled Document</title>
<script language="JavaScript">
    function change() {
        var input = document.getElementById("li1");
        alert(input.getAttribute("title"));
        input.setAttribute("title", "mgc");
        alert(input.getAttribute("title"));
    }
</script>
 
 
<ul id="u">
    <li title="hello" id="li1">Magci</li>
    <li>J2EE</li>
    <li>Haha!</li>
</ul>
<input onclick="change();" type="button" value="Change">

查看图片附件

上一篇： js中Number数字数值运算后值不对博客分类： JS　　Notes

下一篇： Java 区分文本中的中英文字符函数