DOM对象_那些地方使用了dom对象-CSDN博客

本文链接：https://blog.csdn.net/qcherlsh/article/details/47071141

getElementsByName()方法，返回带有指定名称的节点对象的集合。与getElementById() 方法不同的是，通过元素的 name 属性查询元素，而不是通过 id 属性。

因为文档中的 name 属性可能不唯一，所有 getElementsByName() 方法返回的是元素的数组，而不是一个元素。
和数组类似也有length属性，可以和访问数组一样的方法来访问，从0开始。

getElementsByTagName()方法
返回带有指定标签名的节点对象的集合。返回元素的顺序是它们在文档中的顺序
Tagname是标签的名称，如p、a、img等标签名。
和数组类似也有length属性，可以和访问数组一样的方法来访问，所以从0开始。

区别getElementByID,getElementsByName,getElementsByTagName
以人来举例说明，人有能标识身份的身份证，有姓名，有类别(大人、小孩、老人)等。
1. ID 是一个人的身份证号码，是唯一的。所以通过getElementById获取的是指定的一个人。
2. Name 是他的名字，可以重复。所以通过getElementsByName获取名字相同的人集合。
3. TagName可看似某类，getElementsByTagName获取相同类的人集合。如获取小孩这类人，getElementsByTagName(“小孩”)。
把上面的例子转换到HTML中，如下:

<input type="checkbox<" name="hobby" id="hobby1"> 音乐

input标签就像人的类别。
name属性就像人的姓名。
id属性就像人的身份证。
方法总结如下:
这里写图片描述

注意：方法区分大小写

重点内容通过下面的例子(6个name=”hobby”的复选项，两个按钮)来区分三种方法的不同:

 <input type="checkbox" name="hobby" id="hobby1">  音乐
  <input type="checkbox" name="hobby" id="hobby2">  登山
  <input type="checkbox" name="hobby" id="hobby3">  游泳
  <input type="checkbox" name="hobby" id="hobby4">  阅读
  <input type="checkbox" name="hobby" id="hobby5">  打球
  <input type="checkbox" name="hobby" id="hobby6">  跑步 
  <input type="button" value = "全选" id="button1">
  <input type="button" value = "全不选" id="button1">

document.getElementsByTagName(“input”)，结果为获取所有标签为input的元素，共8个。
document.getElementsByName(“hobby”)，结果为获取属性name=”hobby”的元素，共6个。
document.getElementById(“hobby6”)，结果为获取属性id=”hobby6”的元素，只有一个，”跑步”这个复选项。

getAttribute()方法
通过元素节点的属性名称获取属性的值。
说明:
elementNode：使用getElementById()、getElementsByTagName()等方法，获取到的元素节点。
name：要想查询的元素节点的属性名字

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

Lists[i].setAttribute("title","WEB前端技术");
document.write(Lists[i].getAttribute("title")+"<br>");

****节点属性****
在文档对象模型 (DOM) 中，每个节点都是一个对象。DOM 节点有三个重要的属性 ：
1. nodeName : 节点的名称
2. nodeValue ：节点的值
3. nodeType ：节点的类型
 文本节点的 nodeName 永远是 #text
 文档节点的 nodeName 永远是 #document
二、nodeValue 属性：节点的值
1. 元素节点的 nodeValue 是 undefined 或 null
2. 文本节点的 nodeValue 是文本自身
3. 属性节点的 nodeValue 是属性的值
三、nodeType 属性: 节点的类型，是只读的。以下常用的几种结点类型:
元素类型    节点类型
  元素          1
  属性          2
  文本          3
  注释          8
  文档          9

访问子结点childNodes
访问选定元素节点下的所有子节点的列表，返回的值可以看作是一个数组，他具有length属性。
节点之间的空白符，在firefox、chrome、opera、safari浏览器是文本节点，所以IE是3，其它浏览器是7，如下图所示:
这里写图片描述

<title>无标题文档</title>
</head>
<body>
<div>
  javascript  
  <p>javascript</p>
  <div>jQuery</div>
  <h5>PHP</h5>
</div>
<script type="text/javascript">
var x= document.getElementsByTagName("div")[0].childNodes;
 for(var i=0;i<x.length;i++){
     document.write("节点名称："+x[i].nodeName+"</br>"+"节点类型:"+x[i].nodeType+"</br>"+"节点值:"+x[i].nodeValue+"</br>")}