DOM

　　Dom树

 

　　 文档：一个页面就是一个文档，DOM 中使用 document 来表示。

 

 　　元素：页面中的所有标签都是元素，DOM 中使用 element 来表示。

　　 节点：网页中的所有内容都是节点(标签、属性、文本、注释等)，DOM 中使用 node 来表示。

　　DOM 把以上内容都看做是对象。

　　获取网页元素

　　　　根据 ID 获取

　　　　　　通过 getElementByID( id ) 方法获取带有 ID 的元素。参数是大小写敏感的字符串。返回的是一个元素对象。

　　　　　　

 

　　　　　　console.dir：打印返回的元素对象，可以更好的查看里面的属性和方法。

 　　　　通过标签获取元素

　　　　　　通过 getElementsByTagName() 方法可以返回带有指定标签名的对象集合。返回的对象集合以伪数组的形式存储。

　　　　　　因为得到的是一个对象的集合，所以我们想要操作里面的元素需要遍历。得到的元素是动态的。

　　　　　　

　　　　　　还可以通过 element.getElementsByTagName('标签名') 获取指定父元素内部所有指定标签名的子元素。注意的是父元素必须是单个对象(必须指定是哪一个元素对象)，获取的时候不包括父元素自己。

　　　　　　

　　　　　　注意：getElementsByTagName() 返回的是一个伪数组，如果只有一个元素或没有元素还是返回伪数组，没有元素的话返回的是一个空的伪数组。

 　　　　H5新增方法

　　　　　　1、通过类名获取：document.getElementsByClassName('类名')，根据类名返回元素对象集合。

　　　　　　　　

 

 

 　　　　　　2、document.querySelector('选择器')，根据指定选择器返回第一个元素对象。选择器需要加符号，类 == .(英文点号)、 id == #(井号)、 标签 == 标签名。

　　　　　　　　

 

　　　　　　3、document.querySelectorAll('选择器')，根据指定选择器返回所有元素对象。选择器需要加符号，类 == .(英文点号)、 id == #(井号)、 标签 == 标签名。

　　　　　　　　

　　　　获取 html 和 body

　　　　　　获取 body：document.body。

　　　　　　　

 

 　　　　　  获取 html：document.documentElement。

　　　　　　　

　　事件基础

　　　　事件三要素：事件源、事件类型、事件处理程序。

　　　　　事件源：事件被谁触发。

　　　　　事件类型：什么事件，比如鼠标点击、鼠标经过、键盘按下。

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

　　　　　

　　　　常见的鼠标事件

鼠标事件	触发条件
onclick	鼠标点击左键触发
onmouseover	鼠标经过触发
onmouseout	鼠标离开触发
onfocus	获得鼠标焦点触发
onblur	失去鼠标焦点触发
onmousemove	鼠标移动触发
onmouseup	鼠标弹起触发
onmousedown	鼠标按下触发

　　操作页面元素

　　　　修改页面内容

　　　　　1、innerText：innerText 不能识别 HTML 标签，并且不会保留空格和换行。

　　　　　2、innerHTML：innerHTML 可以识别 HTML 标签，并且会保留空格和换行。

　　　　    3、如果要更改 input 的话需要使用 value 来更改。

　　　　　　

 　　修改元素属性

　　　　　通过 元素.属性名 = '属性值' 的方式来修改元素属性。

　　　　　

 　　样式属性操作

　　　　1、element.style.样式名 = '样式值'

　　　　2、element.className = '类名'

　　　　第一个适合用在样式比较少或功能简单的情况下。第二个适合用在样式较多或功能复杂的情况下，这个方法是直接修改类名，不是添加。

标签：触发,鼠标,第八天,标签,元素,js,document,选择器
来源： https://www.cnblogs.com/0529qhy/p/16115271.html