DOM操作

获取dom  通过id
获取dom  通过class  获取到的是伪数组
通过标签名
 通过name名获取元素
 querySlector():获取指定选择器的第一个元素,参数就是选择器的名称
querySelectorAll()获取指定选择器的全部元素
document.getElementsByTagName("button")[0]   (除了id都要写【0】)     .onclick = function(){
     alert("hello!")
  }
 
 
例子(  通过按钮 让图片消失)
 
 <button id="btn">按钮</button>
    <img src="" alt=""/>
 
  var flag = true;(想当于开关)
 document.getElementById("btn").onclick = function () {
  console.dir(document.getElementsByTagName("img")[0]);
    if (flag) {
     document.getElementsByTagName("img")[0].style.display = "none";
 } else {
document.getElementsByTagName("img")[0].style.display = "block";
   }
   flag = !flag
 };
事件三要素

事件源:触发(被)事件的元素

事件类型:事件的触发方式(例如鼠标点击或键盘点击)

事件处理程序:事件触发后要执行的代码(函数形式)

鼠标单击事件:onclick    浏览器加载完成事件:onload

事件触发的多种写法

HTML内部书写所有

HTML行内触发方法

HTML外部书写

非表单元素的属性操作

1.添加src属性值显示图片

imgBox.src = "images/jie.jpg";

2.改变图片大小

imgBox.width = 750;

 imgBox.height = 500;

3.通过style改变宽高

imgBox.style.width = 750 + "px";

imgBox.style.height = 500 + "px";

4.通过类名改变宽度

  imgBox.className = "imgCl";

//className 会覆盖之前设置好的类名!

5隐藏元素

1、src=""

2、display=none; 不占位置的

3、visibility="hidden

type 可以获取input标签的类型(输入框或复选框等)

disabled 禁用属性checked 复选框选中属性

selected 下拉菜单选中属性(默认  写在opition里)

checked   默认选择

textContent属性,谷歌,火狐支持,IE8及以下不支持

innerText属性,谷歌,火狐,IE8都支持      两者都是用来文本内容

innerHTML是可以设置文本内容   还可以识别标签

鼠标事件

onmouseover鼠标移入事件:在鼠标指针移动到元素上时触发。

onmouseout 鼠标移出事件:在鼠标指针移出元素后触发

一般成对使用

onmouseenter鼠标进入事件:在鼠标指针进入到元素上时触发。

onmouseleave 鼠标离开事件:在鼠标指针离开元素后触发

 

onfocus获取焦点事件:在鼠标光标获取输入框焦点时触发

onblur失去焦点事件:在鼠标光标失去焦点时触发。

 

onclick单击事件:在鼠标指针单击时触发

ondblclick双击事件:在鼠标光标双击时触发。(用于于交互例如input)

键盘事件

onkeydown:键盘按下

onkeyup:键盘抬起 

(用于于交互例如input)

 浏览器事件

onload:浏览器加载完成执行

onscroll:滚动浏览器滚动条时触发

 

 

posted @ 2021-11-25 19:25  岑先森  阅读(51)  评论(0)    收藏  举报