js中的DOM:文档对象模型
D--document,文档,泛指html页面结构
O--object,对象,泛指html页面结构中的元素
M--model,模型
节点树--主要指元素节点、属性节点、文本节点
获取元素节点的几种常用方式
document.getElementById
document.getElementsByTagName
document.getElementsByClassName
通过元素节点操作属性节点
获取:元素节点名.getAttribute()、元素节点名.属性节点名
修改:元素节点名.setAttribue()、元素节点名.属性节点名
添加:元素节点名.setAttribue()
删除:元素节点名.removeAttribute()
js中的事件:
事件的可选值
onclick--单击事件
ondblclick--双击事件
onmouseover--鼠标移入事件
onmouseout--鼠标移出事件
onmousedown--鼠标按下事件
onmouseup--鼠标抬起事件
js中的节点操作:
节点的查询
childNodes--获取父元素节点下的所有子节点,包括空白
children--获取父元素节点下的所有子元素节点
firstChild--获取父元素节点下的第一个子节点
firstElementChild--获取父元素节点下的第一个子元素
lastChild--获取父元素节点下的最后一个子节点
lastElementChild--获取父元素节点下的最后一个子元素
parentNode--获取当前元素节点的父节点
previousSibling--获取当前元素节点的上一个兄弟节点
previousElementSibling--获取当前元素节点的上一个兄弟元素
nextSibling--获取当前元素节点的下一个兄弟节点
nextElementSibling--获取当前元素节点的下一个兄弟元素
节点的增删改
document.createElement()--创建元素节点,参数传入需要生成的元素节点的名称
appendChild()--向指定元素中最后的位置添加节点
document.createTextNode()--创建文本节点
insertBefore()--在某个元素之前插入一个新元素
replaceChild()--使用新元素替代某个旧元素
DOM操作css:
元素名.style.具体的css样式名用来获取和设置内联样式
注意:
1.给样式设置值的时候需要加上引号
2.如果设置的样式带有-,那么一定要将样式名转为驼峰命名法
3.通过这种方式不能够获取到定义在style标签中的样式
4.这种方式只能够获取到行内样式
5.通过这种方式设置样式的时候,会直接添加行内样式中