JS操作元素

标签：元素 JS 事件 var 操作 div document 属性

一、事件基础

事件概述

JS使我们有能力创建动态页面，而事件是可以被JS侦测的行为

简单理解：触发----响应机制

网页中每个元素都可以产生某些可以触发JS的事件，例如点击事件

事件是由三部分组成事件源事件类型事件处理程序称为事件三要素

事件源： 事件被触发的对象谁被触发

事件类型：如何触发，什么事件例如鼠标点击，鼠标经过，键盘按下等

事件处理程序：通过函数赋值的方式完成

执行事件的步骤：

1. 获取事件源
2. 注册事件（绑定事件）
3. 添加事件处理程序（采取函数赋值形式）

//第一步：获取按钮对象
var btn=document.getElementById("btn");
//第二步：绑定一个单击事件
//第三步：添加事件处理程序
btn.onclick=function(){//像这种为单击事件绑定的函数，我们称为单击响应函数
    alert("你好")
}

常见事件

鼠标事件	触发条件
onclick	当单击鼠标时运行脚本。
onmousedown	当按下鼠标按钮时运行脚本。
onmouseup	当松开鼠标按钮时运行脚本。
onmousemove	当鼠标指针移动时运行脚本。
onmouseover	当鼠标指针移至元素之上时运行脚本，不可以阻止冒泡。
onmouseout	当鼠标指针移出元素时运行脚本，不可以阻止冒泡。
onmouseenter	当鼠标指针移至元素之上时运行脚本，可以阻止冒泡。
onmouseleave	当鼠标指针移出元素时运行脚本，可以阻止冒泡。
onmousewheel	当转动鼠标滚轮时运行脚本。
onscroll	当滚动元素的滚动条时运行脚本。
键盘事件	触发条件
onkeyup	某个键盘按键被松开时触发**
onkeydown	某个键盘按键被按下时触发
onkeypress	某个键盘按键被按下时触发
表单事件	触发条件
onfocus	表单获得焦点触发**
onblur	表单失去焦点触发
oninput	表单每次输入触发**
onchange	表单内容发生改变时触发**
onselect	表单文本被选取时触发
onreset	表单重置时触发
onsubmit	表单提交时触发

二、操作元素

JS的DOM操作可以改变网页内容、结构和样式，我们可以利用DOM操作元素来改变元素里面的内容、属性等

改变元素内容

element.innerText 从起始位置到终止位置的内容，会去除html标签，同时空格和换行也会去掉

element.innerHTML 从起始位置到终止位置的全部内容，包括html标签，保留空格和换行

区别（读的区别/写的区别）

写：innerText 不识别html标签，innerHTML识别html标签

读：innerText，innerHTML可以获取元素内面的内容，innerText去除空格、换行和标签，只读文本，

innerHTML可以获取到元素里面的标签，同时保留空格和换行

<body>
  <!-- 需求：点击button，切换内容 -->
  <button>点我切换内容</button>
  <div>天气炎热</div>
  <script>
  // 1、获取元素
  var btn = document.querySelector("button");
var div = document.querySelector("div");
// 2、绑定事件
//3、事件处理函数
btn.onclick = function () {
  //console.log(div.innerText);
  //console.log(div.innerHTML);
  //方式一、操作元素内容--innerText
  // div.innerText = "天气凉爽";
  //方式二、操作元素内容--innerHTML
  div.innerHTML = "天气凉爽";
};    
</script>
  </body>

改变元素其他属性

src、href、id、alt、title等属性

<body>
  <!-- 需求：点击对应的按钮，可以切换图片已经更改title值 -->
  <button id="dog">小狗</button>
  <button id="cat">小猫</button><br /><br />
  <img src="./img/pic_01.jpg" title="小狗" />

  <script>
  // 1、获取元素
  var dog = document.querySelector("#dog");
var cat = document.querySelector("#cat");
var img = document.querySelector("img");
//2、绑定事件、处理函数
dog.onclick = function () {
  img.src = "./img/pic_01.jpg";
  img.title = "小狗";
};
cat.onclick = function () {
  img.src = "./img/pic_02.jpg";
  img.title = "小猫";
};
</script>
  </body>

操作表单元素属性

type、value、checked、selected、disabled等

<body>
  <!-- 需求：1、点击按钮，更换input里的显示内容为：‘内容被修改了’ 
需求2:点击按钮，按钮就被禁用了
-->
  <button>按钮</button>
  <input type="text" value="请输入内容" />
  <script>
  // 1、获取元素
  var btn = document.querySelector("button");
var int = document.querySelector("input");
// 绑定点击事件，处理函数
btn.onclick = function () {
  int.value = "内容被修改了";
  btn.disabled = true;
};
</script>
  </body>

操作样式属性

可以通过JS修改元素的大小、颜色、位置等样式

element.style 行内样式操作

（1）、JS里面的样式采取驼峰命名发，比如fontSize、backgroundClolor

（2）、JS修改style样式操作，产生的是行内样式，css权重比较高

element.className 类名样式操作

（1）、如果样式修改较多，可以采取操作类名的方式更改元素样式

（2）、class因为是个保留字，因此使用className来操作元素类名属性

（3）、className 会直接更改元素的类名，会覆盖原先的类名，如果想保留原先的类名，再添加更改的时，需要把原先类名加上

<body>
  <div class="box">box</div>
  <script>
  // 需求1：点击div，div颜色变色，用行内样式实现
  var box = document.querySelector(".box");
box.onclick = function () {
  box.style.backgroundColor = "red";
};
// 需求2:鼠标移入，div的宽高发生变化，字体大小变化，字体加粗
box.onmouseover = function () {
  // js里有个this的存在，在不同的情况下，指代不同的内容
  //在事件函数里，this指代调用者，也就是指向事件源
  this.className = "box1";
};
</script>
  </body>

排他思想

如果有同一组元素，想要某一个元素实现某种样式，需要用到循环的排他思想算法

步骤：

清除所有元素的样式
给当前元素设置样式
注意顺序不能颠倒

  <body>
    <!-- 需求：给当前点击的按钮，添加背景色 -->
    <button>按钮1</button>
    <button>按钮2</button>
    <button>按钮3</button>
    <button>按钮4</button>
    <script>
      //1、获取到所有的按钮
      var btns = document.querySelectorAll("button");
      //2、通过循环，给所有的按钮绑定点击事件，处理函数
      for (var i = 0; i < btns.length; i++) {
        btns[i].onclick = function () {
          // 2.1清楚所有按钮的背景色
          for (var i = 0; i < btns.length; i++) {
            btns[i].style.backgroundColor = "";
          }
          //2.2
          this.style.backgroundColor = "red";
        };
      }
    </script>
  </body>

操作自定义属性

获取属性值：

方式一：element.属性获取属性值（获取元素自身自带的属性，例如id，href，src等）

方式二：element.getAttribute('属性') 主要获取自定义的属性，我们程序员自己家的属性,也可以获取元素自带属性

设置属性值

方式一：element.属性='值' 设置属性值

方式二：element.setAttribute('属性','值') 设置自定义属性，也可以设置元素自带属性

移除某个属性

element.removeAttribute("属性"); 移除某个属性

  <body>
    <!-- 需求1：获取a标签对应的href属性值以及index属性值
         需求2：设置a标签对应的href属性值为京东，以及修改index属性值为2
         需求3：移除abc属性   
    -->
    <a href="https://www.baidu.com/" index="1" abc="123">百度</a>
    <br /><br />
    <button id="btn1">获取</button>
    <button id="btn2">设置</button>
    <button id="btn3">移除</button>
    <script>
      var a = document.querySelector("a");
      var btn1 = document.querySelector("#btn1");
      var btn2 = document.querySelector("#btn2");
      var btn3 = document.querySelector("#btn3");

      btn1.onclick = function () {
        // 需求1
        console.log(a.href, "自带属性");
        console.log(a.getAttribute("index"), "自定义属性");
        console.log(a.getAttribute("href"), "自带属性");
      };
      btn2.onclick = function () {
        // 需求2
        a.href = "https://www.jd.com/";
        a.setAttribute("index", "2");
      };
      btn3.onclick = function () {
        // 需求3
        a.removeAttribute("abc");
      };
    </script>
  </body>

设置h5自定义属性

为了区分自定义属性，还是元素自带属性

H5给我们新增了自定义属性规范：H5规定自定义属性以data-开头作为属性名并附值

获取自定义属性：

方式一：element.getAttribute('属性')

方式二：element.dataset.去除掉data-的属性名

 <body>
    <div data-index="abc" data-last-name="王"></div>
    <script>
      var div = document.querySelector("div");
      //设置自定义属性
      div.setAttribute("data-id", "hello");
      //获取自定义属性
      //方式一：element.getAttribute("自定义属性名")
      console.log(div.getAttribute("data-index"));
      //方式二：element.dataset.属性名
      console.log(div.dataset); //得到一个对象
      console.log(div.dataset.index); //读取对象
      console.log(div.dataset["id"]); //读取对象
      console.log(div.dataset.lastName); //驼峰命名法读取
    </script>
  </body>

标签：元素,JS,事件,var,操作,div,document,属性
From： https://blog.csdn.net/qq_60060362/article/details/143632631