我的前端学习8

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.通过这种方式设置样式的时候，会直接添加行内样式中