JAVASCRIPT DOM

通过id获取文档元素
```
var pElement = document.getElementById("myId");
```
其中document表示整个文档，getElementById()是document对象的一个方法，参数是id属性的值myId。

获取的pElement就代表了<p>标签以及里面的内容，接下来，可以通过pElement操作这个元素。比如可以用弹框展示一下<p>标签里面的内容：
```
window.alert(pElement.innerText);
```
通过类名获得文档元素
文档元素的类名不唯一（存在多个文档元素的类名相同的情况），如下：
```
<p class="myName">段落</p>
<a class="myName" href="https://www.educoder.net">这是一个链接</a>
```
document的getElementsByClassName（）方法用来获取指定类名的文档元素数组（NodeList，一般叫节点列表），如下：
```
var myNodeList = document.getElementsByClassName("myName");
```
这样，myNodeList[0]就是<p>元素，而myNodeList[1]就是<a>元素，通过这个方法的名字我们也可以知道获取的标签不唯一。
通过标签名获得文档元素
```
<div id="div1">
    <p id="p1">文本1</p>
    <p id="p2">文本2</p>
    <a name="a1">链接</a>
</div>
<div id="div2">
    <p id="p3" name="a1">文本3</p>
</div>
```
标签名指的是<>里面的字符串，document对象的getElementsByTagName()获取整个文档中指定名字的所有标签，显然，结果是一个文档元素数组（节点列表），方法的名字也暗示了这一点。获取所有的<div>元素，如下：
```
var allDiv = document.getElementsByTagName("div");
```
我们获取到的文档元素，也有getElementsByTagName()方法，作用是获取该元素内部指定名字的所有子元素。比如，要获取第一个<div>里面所有的<a>元素，代码如下：
```
//变量allDiv上面有，这里不再重复！
var allLink = allDiv[0].getElementsByTagName("a");
```
这样就获取了第一个<div>里面的所有超链接元素。

html5中获取文档元素（一）

var myElement =  document.querySelector(".css1");
console.log(myElement.innerText);//输出“CSS选择器”

querySelector返回匹配指定css选择器的第一个元素。

html5中获取文档元素（二）
```
var allP = document.querySelectorAll(".pClass");
```
如果一个选择器控制的元素有多个，而且我们需要取到这些元素，就需要用querySelectorAll方法，该方法返回指定的选择器对应的多个元素。

结点数上的操作

<body>
<div id="div1">
    <div class="cl1">
        <p>文本</p>
        <a>超链接</a>
    </div>
    <div class="cl2">
        <select id="se">
            <option>红</option>
            <option>黄</option>
            <option>蓝</option>
        </select>
    </div>
</div>
</body>

首先，我们获取最外层的div节点：

var div1 = document.getElementById("div1");

然后获取它的第一个子节点（class值为cl1的节点）：

//firstElementChild表示第一个子节点
var cl1 = div1.firstElementChild;

再获取cl1的最后一个子节点，即a节点：

//lastElementChild表示最后一个子节点
var aElement = cl1.lastElementChild;

previousElementSibling表示前一个兄弟节点。比如获取上面的超链接的前一个节点p，然后在控制台打印p的内容，代码以及效果如下：

var left = aElement.previousElementSibling;
console.log(left.innerText);

nextElementSibling表示后一个兄弟节点。显然，上面的p元素的后一个兄弟节点是a元素，打印一下a的内容：

var right = left.nextElementSibling;
console.log(right.innerText);

children[0]表示第一个子节点，以此类推。比如依次在控制台打印出上面的select标签的三个子节点：

var selectTag = document.getElementById("se");
console.log(selectTag.children[0].innerText);
console.log(selectTag.children[1].innerText);
console.log(selectTag.children[2].innerText);

children.length：子节点的个数；

console.log(selectTag.children.length);//输出3

属性值的获取

<a href="https://www.educoder.net" target="_blank">EduCoder</a>

先获取文档元素：

var aElement = document.getElementsByTagName("a").[0];

然后通过获取到的元素的属性名来得到属性值：

var hrefValue = aElement.href;
console.log(hrefValue);//输出https://www.educoder.net

getAttribute(a)用来获取属性值，a表示属性的名字。比如上面获取超链接的href属性值，也可以这样写：

console.log(aElement.getAttribute("href"));//输出https://www.educoder.net

区别是：getAttribute()返回的值统一为字符串，而第一种方法会返回属性实际的值，比如<input>的maxLength属性的值应该是数值，第一种方法就会返回数值，getAttribute()返回了字符串：

<input type="name" maxLength=16 id="inputId"/>

//typeof检测变量的类型
var result1 = document.getElementById("inputId").maxLength;//返回16
var result2 = document.getElementById("inputId").getAttribute("maxLength");//返回"16"
console.log(typeof(result1));//输出number
console.log(typeof(result2));//输出string

class等文档元素的属性，不能直接用文档元素对象.class来获取，因为class是JavaScript中的关键字，需要用className来代替。

但是，如果用的是getAttribute()，直接用class作为参数就行。

<a class="aClass" id="aId">超链接</a>

document.getElementById("aId").className;//返回"aClass"
document.getElementById("aId").getAttribute("class");//返回"aClass"

属性值的设置
```
<a id="a1" href="https://www.google.com">EduCoder</a>
```
设置超链接的href属性的值的表达式如下：
```
document.getElementById("a1").href="https://www.educoder.net";
```
需要注意：标签之间的文本用innerText属性表示，要修改上面超链接里面的文本，需要这样：
```
document.getElementById("a1").innerText="educoder";
```
没错，setAttribute(a,b)就是一个与getAttribute()对应的方法，参数a是你要设置的属性的名字，参数b是你要设置的属性的值。

所以上面的操作（设置href）也可以这样写：
```
document.getElementById("a1").setAttribute("href","https://www.educoder.net");
```

posted @ 2021-05-10 15:14 ....陈陈陈陈阅读(93) 评论(0) 收藏举报

刷新页面返回顶部

CCelia

JAVASCRIPT DOM

公告