JavaSciipt之DOM(一):获取页面元素·搞懂五点即可

DOM,文档对象模型,是一个编程接口,处理可扩展语言(HTML),通过DOM可以改变网页的内容、结构、样式。
DOM树,一个页面就是一个文档,页面中的标签叫元素,网页中所有内容都可以看作一个节点,使用node表示,上面所有内容可以看作一个对象,所以叫文档对象模型。
同时,对于对象的学习,也要明白,对象是什么?是否有参数?返回值是什么?代码验证?
白龙网指出,文档页面由上往下加载,所以要先有标签,再有JS,即JS放到文档的最后面。或者给window添加事件load,让页面所有内容加载完毕,或者DOM加载完毕之后,再执行JS。

1、根据id获取元素 getElementById('time')

<body>
  <!-- 1.通过id获取文档元素 -->
  <div id="time">2022-7-15</div>
  <script>
    var timer = document.getElementById('time');//2.id必须小写的字符串
    console.log(timer);
    console.log(typeof timer);//3.返回的是一个元素对象
    console.dir(timer);//4.打印返回对象,查看更详细的属性、方法
  </script>
</body>

2、使用标签获取元素 getElementsByTagName('li')

  <script>
    var lis = document.getElementsByTagName('li');
    console.log(lis);//1.返回的是获取过来的元素的对象集合,以伪数组的形式存储
    for (i = 0; i < lis.length; i++) {//2.通过遍历打印所有元素
      console.log(lis[i]);
    }
    //3.如果页面中只有一个元素,返回的仍然是伪数据形式
    //4.如果页面中没有这个元素,返回的是空的伪数据形式
    var ol = document.getElementById('ol');//5.打印一个父元素内的所有LI标签
    console.log(ol.getElementsByTagName('li'));//通过父元素id获取父元素对象,然后再获取子标签所有元素
    console.log(ol.getElementsByTagName('li'));//父元素第一个数据的子标签元素,这两种方法只获取子元素,不获取父元素标签
  </script>
</body>

3、通过类名获取元素  getElementsByClassName('box')

通过类名获取元素,是H5新增的方式,但是IE9以上浏览器才能使用。
<script>
  //根据类名获取某些元素,返回元素对象的集合
    var boxs = document.getElementsByClassName('box');
    console.log(boxs);
</script>

4、巧用选择器获取元素 querySelector() querySelectorAll()

H5新增的方法,对浏览器的兼容性有要求,例如要IE9以上
<script>
  //1.querySelector('选择器'),返回指定选择器第一个元素对象,选择器要用对:类选择器、id选择器、标签选择器、后代选择器、并集选择器;此处可以使用选择器选择任意指定的元素
    var firstbox = document.querySelector('.box');
    console.log(firstbox);
    var firstbox2 = document.querySelector('#nav');
    console.log(firstbox2);
    var firstbox3 = document.querySelector('li');
    console.log(firstbox3);
    var lastbox = document.querySelector('li:last-child');
    console.log(lastbox);
    var anybox = document.querySelector('li:nth-child(2)');
    console.log(anybox);
  //2.querySelectorAll('.box'),选择指定选择器所有元素的集合
  var allbox = document.querySelectorAll('.box');
  console.log(allbox);
  var allbox = document.querySelectorAll('#nav');
  console.log(allbox);
  var allbox = document.querySelectorAll('li');
  console.log(allbox);
</script>

5、获取特殊元素 document.body  document.documentElement

  //1.获取body元素
  var bodys = document.body;
  console.log(bodys);
  //2.获取html元素
  var htmls = document.documentElement;
  console.log(htmls);
  //3.或者使用常规的id、类名、标签、方法等都可以选择到这两个特殊元素
  var body2 = document.querySelector('body');
  console.log(body2);
  var html2 = document.querySelector('html');
  console.log(html2);
  var body3 = document.getElementsByTagName('body');
  console.log(body3);
</script>
JS由三部分组成:
ECMSscript:主要是学习JS的基础语法,如变量、数据类型、运算符、流程迫近、数组、函数、对象等内容。
WebAPIs:主要包含BOM、DOM两大块,实现JS的应用,如网页交互效果。
WebAPIs是浏览器的API,通过BOM/DOM实现网页的一些交互效果。更多浏览器API可以查阅MDN文档。
API是应用程序接口,会用即可。
WebAPIs主要是针对浏览器而言,有输入,输出,如函数。
对于相关方法的学习,要搞明白3点,做什么?是否需要参数?代码如何实现的?