1、获取元素的方法

  1. 根据ID获取:document.getElementById(‘设的ID名’)

        <div id="time">2019-9-9</div>
        <script>
            // 因为我们文档页面从上往下加载,所以先得有标签 所以我们script写到标签的下面
            var timer = document.getElementById('time');
    	</script>
    
  2. 根据标签名获取元素:document.getElementsByTagName(‘标签名’)

        <ul>
            <li>知否知否,应是等你好久11</li>
            <li>知否知否,应是等你好久22</li>
        <script>
            // 1.返回的是 获取过来元素对象的集合 以伪数组的形式存储的
            var lis = document.getElementsByTagName('li');
            // 2. 我们想要依次打印里面的元素对象我们可以采取遍历的方式
            for (var i = 0; i < lis.length; i++) {
            	console.log(lis[i]);
    	</script>
    
  3. 根据类名获取元素:document.getElementaByClassName(‘类名’)

        <div class="box">盒子1</div>
        <div class="box">盒子2</div>
        <script>
            // getElementsByClassName 根据类名获得某些元素集合
            var boxs = document.getElementsByClassName('box');
        </script>
    
  4. 根据指定选择器返回第一个元素对象:document.querySelector(‘选择器’)

        <div class="box">盒子1/div>
        <div class="box">盒子2/div>
        <div id="nav">
            <li>标签</li>
            <li标签2</li>
        <script>
             /*  querySelector 返回指定选择器的第一个元素对象 
              *  切记 里面的选择器需要加符号  .box #nav
            var firstBox = document.querySelector('.box');
            	console.log(firstBox);
            var nav = document.querySelector('#nav');
            	console.log(nav);
            var li = document.querySelector('li');
            	console.log(li);
    	</script>
    
  5. 根据指定选择器返回:document.querySelectorAll(‘选择器’)

    /* 注意:
    	1) id前面加 #
    	2) 类别前面加 .
    	3) 标签名称前面什么也不加
    	<div class="box">盒子1/div>
        <div class="box">盒子2/div>
            <li>标签</li>
            <li标签2</li>
        <script>
             //  querySelectorAll()返回指定选择器的所有元素对象集合 
            var allBox = document.querySelectorAll('.box');
            	console.log(allBox);
            var lis = document.querySelectorAll('li');
            	console.log(lis);
    	</script>
    
  6. 获取body元素

    doucument.body  // 返回body元素对象
    
  7. 获取html元素

    document.documentElement  // 返回html元素对象
    

    2、常见的鼠标事件

    鼠标事件触发条件
    onclick鼠标点击左键触发
    onmouseover鼠标经过触发
    onmouseout鼠标离开触发
    onfocus获得鼠标焦点触发
    onblur失去鼠标焦点触发
    onmousemove鼠标移动触发
    onmouseup鼠标弹起触发
    onmousedown鼠标按下触发

    3、改变元素内容(获取或设置)

    1. 改变元素内容:innerText

      <button>按钮</button>
      <div>某个时间</div>
      <script>
      	// 当我们点击了按钮, div里面的文字会发生变化
      	// 1. 获取元素
      	var btn = document.querySelector('button');
      	var div = document.querySelector('div');
      	btn.onclick = function() {
      	// div.innerText = '2020-10-05';
      		div.innerText = '2020-10-05'
      </script>
      
    2. 改变元素内容:innerHTML

      <button>按钮</button>
      <div>某个时间</div>
      <script>
      	// 当我们点击了按钮, div里面的文字会发生变化
      	// 1. 获取元素
      	var btn = document.querySelector('button');
      	var div = document.querySelector('div');
      	btn.onclick = function() {
      	// div.innerText = '2020-10-05';
      		div.innerHTML = '2020-10-05'
      </script>
      

      innerText和innerHTML的区别

      • 获取内容的区别:

        innerText会除空格和换行, 而innerHTML会保留空格和换行

      • 设置内容时的区别:

        innerText不会识别html,而innerHTML会识别

    1、获取元素的方法根据ID获取:document.getElementById(‘设的ID名’) &lt;div id="time"&gt;2019-9-9&lt;/div&gt; &lt;script&gt; // 因为我们文档页面从上往下加载,所以先得有标签 所以我们script写到标签的下面 var timer = document.getElementById('time'); &lt;/script&gt;根据标签名获取元素:docu
    js鼠标切换案例介绍 js鼠标切换主要是当鼠标操作文本内容的动作切换(鼠标悬浮、鼠标按下、鼠标单击)的时候文本会有不同的样式产生,当鼠标悬浮在文本上会有橙色颜色出现在文本内容上,当鼠标按下去一直不放的时候是粉色的,当鼠标单击后是红色的,本案例就是实现这个功能。 准备知识点 属性指令v-bind,事件指令v-on 这些指令的语法与用法。 el:挂载点,data:变量数据值,methods:事件方法, 这些实例成员的语法与用法。 div、script、style
    可以通过JavaScript代码实现鼠标悬停div内容改变的效果。您可以使用onmouseover和onmouseout事件来实现这一效果,具体做法如下: 1. 给要改变内容的div设置一个id属性,例如: <div id="myDiv">原始内容</div> 2. 在JavaScript代码中获取该div元素,并为其添加onmouseover和onmouseout事件: var myDiv = document.getElementById("myDiv"); myDiv.onmouseover = function() { this.innerHTML = "悬停时的内容"; myDiv.onmouseout = function() { this.innerHTML = "原始内容"; 这段代码中,onmouseover事件会在鼠标悬停在该div元素上时触发,将div的innerHTML属性改为"悬停时的内容";onmouseout事件会在鼠标移开该div元素时触发,将div的innerHTML属性改回"原始内容"。 这样就可以实现鼠标悬停div内容改变的效果了。