JS DOM

一

获取元素的方式

1根据id获取元素

var div1 = document.getElementById('div1')

2通过类名获取元素

var p1Arr = document.getElementsByClassName('p1');数组

3通过标签名获取元素

var tag1 = document.getElementsByTagName('div');数组

4通过name名获取元素

var user = document.getElementsByName('user');数组

5通过选择器的querySelector获取元素

var div1 = document.querySelector('.box1');

6通过选择器的querySelectorAll获取元素

querySelectorAll():获取指定选择器的所有的元素，参数就是选择器的名称
 var boxList = document.querySelectorAll(".box1");
  console.log(boxList);
  var listLi = document.querySelectorAll("ul li");
  console.log(listLi);

二

事件三要素

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

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

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

绑定事件的是事件对象     触发事件的是事件源对象

鼠标事件：

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

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

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

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

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

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

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

ondblclick双击事件：在鼠标光标双击时触发。

键盘事件：

onkeydown：键盘按下

onkeyup:键盘抬起  

innerText：输出的是文本设置什么都是输出文本

innerHTML：输出的也是文本 但是设置了标签属性之后 文本会根据标签内容改变

getAttribute("属性的名字")

getAttribute("属性"):不仅可以获取元素本身的属性的属性值，还可以获取元素自定义的属性的属性值

setAttribute("属性的名字","属性的值");

元素的属性的设置:不仅可以设置元素本身的属性，还可以设置元素自定义的属性

removeAttribute("属性"):不仅可以移除元素本身的属性，还可以移除元素自定义的属性