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>
时间: 2024-10-15 16:52:14

DOM对象控制HTML无素——详解1的相关文章

DOM对象控制HTML无素——详解3

创建元素节点createElement createElement()方法可创建元素节点.此方法可返回一个 Element 对象. 语法: document.createElement(tagName) 参数: tagName:字符串值,这个字符串用来指明创建元素的类型. 1 <script> 2 var createElement = document.createElement('p') //创建了一个P标签的元素 3 </script> 插入 创建文本节点createText

DOM对象控制HTML无素——详解2

节点属性 在文档对象模型 (DOM) 中,每个节点都是一个对象.DOM 节点有三个重要的属性 : 1. nodeName : 节点的名称 2. nodeValue :节点的值 3. nodeType :节点的类型 一.nodeName 属性: 节点的名称,是只读的. 1. 元素节点的 nodeName 与标签名相同2. 属性节点的 nodeName 是属性的名称3. 文本节点的 nodeName 永远是 #text4. 文档节点的 nodeName 永远是 #document 二.nodeVal

C#依赖注入控制反转IOC实现详解

原文:C#依赖注入控制反转IOC实现详解 IOC的基本概念是:不创建对象,但是描述创建它们的方式.在代码中不直接与对象和服务连接,但在配置文件中描述哪一个组件需要哪一项服务.容器负责将这些联系在一起. 举个例子,组件A中有类ClassA,组件B中有接口IB和其对应的实现类B1和B2. 那么,现在ClassA需要利用IB接口来做一些事情,例如: public class ClassA { public void DoSomething() { IB b = ??? b.DoWork(); }} 现

JS中获取 DOM 元素的绝对位置实例详解

在操作页面滚动和动画时经常会获取 DOM 元素的绝对位置,例如 本文 左侧的悬浮导航,当页面滚动到它以前会正常地渲染到文档流中,当页面滚动超过了它的位置,就会始终悬浮在左侧. 本文会详述各种获取 DOM 元素绝对位置 的方法以及对应的兼容性.关于如何获取 DOM 元素高度和滚动高度,请参考视口的宽高与滚动高度 一文. 概述 这些是本文涉及的 API 对应的文档和标准,供查阅: API 用途 文档 标准 offsetTop 相对定位容器的位置 MDN CSSOM View Module clien

JS总结之二:DOM对象控制HTML

DOM对象控制HTML 1.方法 getElementsByName( ) ——获取name getElementsByTagName( ) ——获取元素 getAttribute( ) ——获取元素属性 setAttribute( ) ——设置元素属性 childNodes( ) ——访问子节点 parentNode( ) ——访问父节点 createElement( ) ——创建元素节点 createTextNode( ) ——创建文本节点 inserBefore( ) ——插入节点 rem

DOM对象控制HTML

DOM对象将HTML文档变成元素,属性,文本的树结构. 元素节点:标签一般就是元素. 属性节点:a标签中加入的超链接href就是属性. 文本节点:一般是展示给用户看的<p>标签内的文字,table表格中<tr>中的文字,ul中<li>的文字. 节点属性: document.getElementById("xxx");这时获取id为xxx的元素节点.因为id的名称是一定的,唯一标识不会重复.所以获取的元素节点是一个单独的量. document.getE

Javascript DOM对象控制HTML

首先需要了解什么是 JavaScript DOM对象以下是一些常用的方法: <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title></head><body>    <p name="pName">one</p>    &

log4j日志输出到日志文件中和控制台中 +log4j配置详解

1.引入log4j的jar包 https://mvnrepository.com/,可以找到log4j的jar和依赖. 2.创建log4j.properties,并配置log4j #设置日志的级别 ,多个以,分开(没有给出的,则不会被输出) log4j.rootLogger=debug,A,R # log4j.appender.logfile.encoding=UTF-8 #DailyRollingFileAppender每天产生一个日志文件 log4j.appender.R=org.apach

javascript DOM对象控制HTML元素详解

方法 getElementsByName()                   获取name getElementsByTagName()              获取元素 getAttribute()                                获取元素属性 setAttribute()                                设置元素属性 childNodes()                                  访问子节点 par