学习WEBAPI(DOM)第二天

第二天学习目标：

目录

• 第二天学习目标：
  • 一、阻止超链接的默认跳转行为
  • 二、鼠标进入事件和鼠标离开事件
  • 三、根据name属性值获取元素==>表单标签,返回的是伪数组
  • 四、根据类样式的名字来获取元素,返回的是伪数组
  • 五、根据选择器获取元素
  • 六、总结获取元素方式
  • 七、获取焦点事件和离开焦点事件
  • 八、innerText和textContent区别
  • 九、innerText和innerHTML区别
  • 十、自定义属性设置和获取
  • 十一、移除自定义属性或移除元素自带的属性

---

一、阻止超链接的默认跳转行为

事件处理函数添加：return false

二、鼠标进入事件和鼠标离开事件

鼠标进入事件：onmouseover
鼠标离开事件：onmouseout

三、根据name属性值获取元素==>表单标签,返回的是伪数组

document.getelEmentByName("name值");

四、根据类样式的名字来获取元素,返回的是伪数组

document.getElementsByClassName("类名");

五、根据选择器获取元素

documen.querySelector("选择器名")

六、总结获取元素方式

1、根据id属性的值获取元素,返回来的是一个元素对象
​   document.getElementById("id的值");

2、根据标签名获取元素,返回来的是一个伪数组,里面保存了多个DOM对象
​   document.getelEmentByTagName("标签名字");

3、根据name属性的值获取元素,反回来的是一个伪数组,里面保存了多个DOM对象
​	document.getElementByName("name属性的值");

4、根据类样式的名字获取元素,返回来的是一个伪数组,里面保存了多个DOM对象
​	document.getElementsByClassName("类样式的名字")

5、根据选择器获取元素,返回来的是一个元素对象
​	document.querySelector("选择器的名字");

	6、根据选择器获取元素,返回来的是一个伪数组,里面保存了多个的DOM对象
​	document.querySelectorAll("选择器的名字");

七、获取焦点事件和离开焦点事件

1、获取焦点事件：onfocus

2、离开焦点事件：onblur

​

八、innerText和textContent区别

>**设置标签中的文本内容,应该使用textContent属性,谷歌,火狐支持,IE8不支持

​ 设置标签中的文本内容,应该使用innerText属性,谷歌,火狐,IE8都支持**

​ 1、如果这个属性在浏览器不支持,那么这个属性的类型是undefied

​ 2、判断这个属性的类型,是不是undefined,就知道浏览器是否支持

九、innerText和innerHTML区别

>**总结：如果想要(获取)标签及内容,使用innerHTML**

​ 如果想要设置标签,使用innerHTML

​ 想要设置文本,用innerText,或者innerHTML,或者textContent

十、自定义属性设置和获取

设置自定义属性:setAttribute("属性的名字","属性的值");

获取自定义属性的值:getAttribute("属性名")

十一、移除自定义属性或移除元素自带的属性

元素.removeAttribute("属性名")  属性名不是属性值******

​