js中常用的属性

最新推荐文章于 2021-03-18 10:48:41 发布

fengyeqing5

最新推荐文章于 2021-03-18 10:48:41 发布

阅读量432

点赞数

分类专栏： JS　　Notes 文章标签： javascript ViewUI

本文链接：https://blog.csdn.net/fengyeqing5/article/details/84904036

版权

JS　　Notes 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

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

一、获取元素

使用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" οnclick="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 οnclick="change();" type="button" value="Change">