• DOM对象控制HTML无素——详解1


    getElementsByName()方法

    返回带有指定名称的节点对象的集合。

    语法:

    document.getElementsByName(name)

    与getElementById() 方法不同的是,通过元素的 name 属性查询元素,而不是通过 id 属性。

    注意:

    1. 因为文档中的 name 属性可能不唯一,所有 getElementsByName() 方法返回的是元素的数组,而不是一个元素。

    2. 和数组类似也有length属性,可以和访问数组一样的方法来访问,从0开始。

    1 <body>
    2       <p name="pn">getElementsByName</p>
    3       <p name="pn">getElementsByName</p>
    4       <p name="pn">getElementsByName</p>
    5       <p name="pn">getElementsByName</p>
    6       <script>
    7           var pn = document.getElementsByName("pn")[0].innerHTML = "new"
    8       </script>
    9 </body>

    getElementsByTagName()方法

    返回带有指定标签名的节点对象的集合。返回元素的顺序是它们在文档中的顺序。

    语法:

    getElementsByTagName(Tagname)

    说明:

    1. Tagname是标签的名称,如p、a、img等标签名。

    2. 和数组类似也有length属性,可以和访问数组一样的方法来访问,所以从0开始。

    1 <body>
    2       <p>getElementsByTagName</p>
    3       <p>getElementsByTagName</p>
    4       <p>getElementsByTagName</p>
    5       <p>getElementsByTagName</p>
    6       <script>
    7           var tagName = document.getElementsByTagName("p")[0].innerHTML = "new"
    8       </script>
    9 </body>

    区别getElementByID,getElementsByName,getElementsByTagName

    以人来举例说明,人有能标识身份的身份证,有姓名,有类别(大人、小孩、老人)等。

    1. ID 是一个人的身份证号码,是唯一的。所以通过getElementById获取的是指定的一个人。

    2. Name 是他的名字,可以重复。所以通过getElementsByName获取名字相同的人集合。

    3. TagName可看似某类,getElementsByTagName获取相同类的人集合。如获取小孩这类人,getElementsByTagName("小孩")。

    1 <body>
    2       <p id="pid" name="pn">tagname,id,name</p>
    3       <script>
    4           var tagName = document.getElementsByTagName("p")[0].innerHTML
    5           var name = document.getElementsByName("pn")[0].innerHTML
    6           var id = document.getElementById("pid").innerHTML
    7           document.write(tagName+" "+name+" "+id)
    8       </script>
    9 </body>

      

    getAttribute()方法

    通过元素节点的属性名称获取属性的值。

    语法:

    elementNode.getAttribute(name)

    说明:

    1. elementNode:使用getElementById()、getElementsByTagName()等方法,获取到的元素节点。

    2. name:要想查询的元素节点的属性名字

    1 <body>
    2            <a href="www.baidu.com" id="aid"></a>
    3            <script>
    4                var a = document.getElementById("aid")
    5                var getattr = a.getAttribute("href")
    6                alert(getattr)
    7            </script>
    8 </body>

    setAttribute()方法

    setAttribute() 方法增加一个指定名称和值的新属性,或者把一个现有的属性设定为指定的值。

    语法:

    elementNode.setAttribute(name,value)

    说明:

    1.name: 要设置的属性名。

    2.value: 要设置的属性值。

    注意:

    1.把指定的属性设置为指定的值。如果不存在具有指定名称的属性,该方法将创建一个新属性。

    2.类似于getAttribute()方法,setAttribute()方法只能通过元素节点对象调用的函数。

     1 <body>
     2            <a href="www.baidu.com" id="aid"></a>
     3            <script>
     4                var a = document.getElementById("aid")
     5                var setattr1 = a.setAttribute("href","www.google.com")
     6                var getattr1 = a.getAttribute("href")
     7                alert(getattr1)
     8                var setattr2 = a.setAttribute("title","这是第二种设置属性节点")
     9                var getattr2 = a.getAttribute("title")
    10                alert(getattr2)
    11            </script>
    12 </body>
  • 相关阅读:
    小米2系列板砖自救行动
    大公司都有哪些开源项目~~~阿里,百度,腾讯,360,新浪,网易,小米等
    SQLServer 2016安装时的错误:Polybase要求安装Oracle JRE 7更新51或更高版本
    异步方法不能使用ref和out的解决方法
    大公司都有哪些开源项目~~~简化版
    08.LoT.UI 前后台通用框架分解系列之——多样的Tag选择器
    07.LoT.UI 前后台通用框架分解系列之——强大的文本编辑器
    BIOS中未启用虚拟化支持系列~~例如:因此无法安装Hyper-V
    【开源】1句代码搞定图片批量上传,无需什么代码功底【无语言界限】
    06.LoT.UI 前后台通用框架分解系列之——浮夸的图片上传
  • 原文地址:https://www.cnblogs.com/Ziksang/p/5184708.html
Copyright © 2020-2023  润新知