Dom

获取元素

getElementById('id')

getElementById通过元素id获取Dom元素，返回一个对象

<body>
  <h1>What to buy</h1>
  <p title="a gentle reminder">Do not forget to buy this stuff.</p>
  <ul id="purchases">
    <li>a tin of beans</li>
    <li class="sale">Chinese</li>
    <li class="sale important">Mink</li>
  </ul>
  <script>
    alert(typeof document.getElementById('purchases'));   //object对象
  </script>

</body>

getElementsByTagName

getElementsByTagName返回一个对象数组，里面的参数的标签的名字

示例：document.getElementsByTagName('li')

可以通过.length属性查出数组元素个数

console.log(document.getElementsByTagName('li').length);

在控制台打印列表项元素的个数：3

可以通过for循环遍历获取到的对象数组

for(let i =0;i< document.getElementsByTagName('li').length;i++){
      console.log(document.getElementsByTagName('li')[i]);
    }

getElementsByClassName

getElementsByClassName通过class属性的类名来访问元素
直接收一个参数就是类名
返回一个具有相同类名的元素数组

示例:document.getElementsByClassName('sale')

可以指定多个类名,只需要用空格隔开即可.类名的顺序不重要

示例:document.getElementsByClassName('sale important')

获取和设置属性

getAttribute

获取元素的属性,只能通过元素节点对象调用

示例:

let paras = document.getElementsByTagName('p');
    for (let i = 0; i < paras.length; i++) {
      console.log(paras[i].getAttribute('title'));
    }
    //a gentle reminder

输出是p元素且有title属性中的title值

setAttribute

对属性节点的值作出修改,同样的,只能用于元素节点

语法:object.setAttribute(attribute,value)

示例:

let shopping = document.getElementById('purchases');
    alert(shopping);
    shopping.setAttribute("title", "a little")
    alert(shopping.getAttribute("title"))

DOM元素的基基基基础获取方法

Dom

获取元素

获取和设置属性