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);
    }

猜你喜欢

转载自blog.csdn.net/qq_53075298/article/details/120554883