搜 索

2. DOM选择元素

  • 352阅读
  • 2021年08月25日
  • 0评论
首页 / DOM / 正文

所有HTML元素都是对象。并且我们知道每个对象都有属性和方法。

document 对象具有三种方法最常用于选择HTML元素:

//通过 id 找元素
document.getElementById('id名称') 
//通过 类 找元素
document.getElementsByClassName('类名称') 
//通过 标签 找元素
document.getElementsByTagName('标签名称')

如图所示:

202004271124554492981.png

getElementById()

通过id getElementById 方法用于选择 id=”demo” 的元素并更改其内容:

<h2 id='demo'>这是标题2</h2>
<script>
var elem = document.getElementById("demo");
elem.innerHTML = "Hello World";
//把hello world替换这是标题
</script>

getElementsByClassName()

通过类名方法getElementsByClassName() 查找所有元素,并将其作为伪数组返回。

QQ截图20200523132915.png

例如,如果我们的HTML页面包含三个元素与 class=”demo”,以下代码将返回所有这些元素作为一个数组:

<div class="demo">
    <span class="demo">aaa</span>
</div>
<p class="demo">bbb</p>

<script>
var arr =  document.getElementsByClassName("demo");
//访问第二个元素
arr[1].innerHTML = "ccc"; //aaa被替换为ccc
</script>

数组里面现在有三个元素:arr[ ,aaa,bbb],数组索引从0开始
注意:就算是只有一个类名返回的也是伪数组形式

QQ截图20200523133126.png

getElementsByTagName()

类似地通过标签 getElementsByTagName 方法返回指定标签名称的所有元素,作为伪数组返回。

以下示例获取页面的所有段落元素并更改其内容:

<p>aaa</p>
<p>bbb</p>
<p>ccc</p>
<script>
var arr = document.getElementsByTagName("p");
//var arr = [aaa,bbb,ccc];
for (var i = 0; i < arr.length; i++) {
  arr[i].innerHTML = "ddd";
}
</script>

此时所有P标签都是:ddd

  • 如果有一个p元素返回的还是伪数组的形式
  • 如果页面中没有被选中的这个元素 返回的是空的伪数组

注意:伪数组并不是真正意义上的数组而是一个对象,它只是用伪数组形式来进行存储的

<p>aaa</p>
<p>bbb</p>
<p>ccc</p>

<script>
    var arr = document.getElementsByTagName("p");
    console.log(typeof arr[0]) //object对象类型
</script>

如果有多个li,想要修改某个有两种方法

<ol>
    <li>aaa</li>
    <li>bbb</li>
</ol>

<ul>
    <li>aaa</li>
    <li>bbb</li>
</ul>

<ol>
    <li>aaa</li>
    <li>bbb</li>
</ol>

第一种:

<script>
    //选中ol标签
    var ol = document.getElementsByTagName('ol');
    //选择第二个ol里面的li
    var oli = ol[1].getElementsByTagName('li');
    //修改第二个ol里面的第二个li
    var li2 = oli[1].innerHTML = 'ccc';
</script>

第二种:

<script>
    //通过id方式选中ol标签
    var ol = document.getElementById('id');
    //选择里面的li
    var oli = ol.getElementsByTagName('li');
    //修改选中的ol里面第二个li
    var li2 = oli[1].innerHTML = 'ccc';
</script>

H5新增获取元素方式

querySelector('') //返回指定选择器的第一个元素对象其本身
querySelectorAll('') //返回指定选择器的所有元素对象,以伪数组形式存储

两种方式括号里的值可以是 id('#id')  类('.class')  标签('p')
querySelector只能返回第一个对象,返回的不是数组而是其元素本身

<p>1</p>
<p>2</p>
<p>3</p>
<script>
    var nav = document.querySelector('p'); //只能选中第一个p
    console.log(nav.innerHTML = '11');
    //第一个p = 11,其它不变
</script>

注意:

  1. querySelector() 返回的是指定选择器的第一个元素对象其本身(如果有多个相同类型则返回的是第一个)
  2. querySelector() 返回的不是数组,而是对象其本身

QQ截图20200524101050.png

querySelectorAll返回所有对象,以伪数组形式存储

<p>1</p>
<p>2</p>
<p>3</p>
<script>
    var nav = document.querySelectorAll('p'); //选中所有p
    for(var i = 0; i < nav.length; i++){
         nav[i].innerHTML = '111';
    }
    //所有p都更改为111
</script>

querySelector()跟querySelectorAll()的区别

  1. querySelector()返回的是指定类型的第一个元素对象其本身元素,也就是说如果有多个 标签/类名/id 则返回第一个
  2. querySelectorAll()返回的是多个元素并且以伪数组形式存储
无标签
评论区
暂无评论
avatar