javeScript获取元素

• HTML独有的三个标签获取方式

    // console.log()控制台输出
    //document 文档
    console.log(document.title)  //获取title属性，相当于获取tittle标签内容
    console.log(document.head)   //获取头部标签
    console.log(document.body)   

• 标签获取元素

document.getElementsByTagName("p")

• 通过id获取元素

document.getElementById("id");

• 通过class获取元素 集合类型

document.getElementsByClassName("p2")

• 通过name获取元素

document.getElementsByName("btn")

• 通过css选择器获取元素 获取到的是单个标签

document.querySelector("div p")

• 通过css选择器获取元素 获取到的是多个标签

document.querySelectorAll("div p")

var btn = document.getElementsByTagName("button");
//单击事件
    btn[0].onclick = function () {
    
    
        // alert弹框事件
        alert("python")
        // this表示发生或者执行的事件的元素 也就是btn按钮
        console.log(this)
    }
    //双击事件
     btn[1].ondblclick = function () {
    
    
        alert("javeScript")
        // this表示发生事件的元素
        console.log(this)
    }
    //划入事件
    var odiv = document.getElementsByTagName("div")[0]
    odiv.onmouseenter = function () {
    
    
        // 在控制台中划出打印
        console.log(1);
    }
    //划出事件
    odiv.onmouseleave= function () {
    
    
        console.log(2);
    }