pink老师js自学笔记03-DOM

一、getElementByID()

• 根据id获取
• 参数必须是字符串
• 返回的是一个元素对象

  	var timer = document.getElementById('time')
    console.log(timer);
    console.log(typeof timer); //object
    // console.dir()  打印我们返回的元素对象，更好的查看里面的属性和方法
    console.dir(timer);

二、getElementsByTagName()

• 根据标签名获取，返回带有标签名的返回的集合，返回的是元素对象的集合，咦伪数组的形式存在
• 如果页面中只有一个元素，返回的也是伪数组
• 如果页面中没有元素，返回的是空的伪数组
• element.getElementsByTagName(‘标签名’) element是父元素 父元素必须是指定的单个元素

 	var lis =  document.getElementsByTagName('li');
    console.log(lis);
    // 2.我们想要一次打印里面的元素可以采取遍历的方式
    for (var i = 0; i < lis.length; i++) {
   
      console.log(lis[i]);
    }
     // var ol = document.getElementsByTagName('ol'); //父元素是个集合[]
    // console.log(ol[0].getElementsByTagName('li')); //父元素指定单个元素才可以运用这个方法
     var ol = document.getElementById('ol');
    console.log(ol.getElementsByTagName('li'));

三、HTML5新增的获取元素方式

1. 根据类名返回元素对象集合 document.getElementsByClassName(‘类名’) -

	var boxs = document.getElementsByClassName('box');
    console.log(boxs);

2. 根据指定选择器返回第一个元素对象 document.querySelector(‘选择器’);
   • 切记！querySelector返回的是第一个元素，并且括号里类要加. 例如.box id要加# 例如#nav

	//类选择器
 	var box1 = document.querySelector('.box')
 	//ID选择器
    var nav = document.querySelector('#nav');
 	//l的第一个元素
    var li = document.querySelector('li');

四、获取特殊元素

1. 获取 body 元素

	var bodyEle = document.body;

2. 获取 HTML 元素

	var htmlEle = document.documentElement;

五、事件的三要素

• 事件源：事件被触发的对象
• 事件类型：如何触发 什么时间 比如鼠标点击（onclick）
• 事件的处理程序 通过一个函数赋值的方式 完成

 var btn = document.getElementById('btn');
    btn.onclick = function(){
   
      alert('秋香~~~'