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:滚动浏览器滚动条时触发