JavaScript操作DOM对象
1、访问节点
| <!DOCTYPE html> | |
| html> | |
| title> | |
| <!-- | |
| DOM（Document Object Model） 文档对象模型 | |
| HTML-DOM | |
| CSS-DOM | |
| XML-DOM | |
| DOM-CORE | |
| noteType的返回值： | |
| 1 ：元素节点 | |
| 2 ：属性节点 | |
| 3 ：文本节点 | |
| 8 ：注释节点 | |
| 9 ：文档节点 | |
| --> | |
| head> | |
| body> | |
| ul> | |
| li> | |
| li> | |
| li> | |
| ul> | |
| //获取ul中的第一个li | |
| 0]; | |
| //输出节点的名称 | |
| // 01.获取ul中的第一个li 元素节点 | |
| firstElementChild; | |
| //获取小猫咪 | |
| //动态改变小猫咪的 宽度和高度 | |
| //获取我们的属性对应的属性值 | |
| //02.获取属性节点 | |
| //03. 获取第一个li的内容 | |
| //文本节点 | |
| script> | |
| body> | |
| html> |
2、节点的曾删改
| <!DOCTYPE html> | |
| html> | |
| title> | |
| head> | |
| body> | |
| ul> | |
| li> | |
| li> | |
| li> | |
| li> | |
| li> | |
| li> | |
| li> | |
| li> | |
| li> | |
| li> | |
| li> | |
| li> | |
| ul> | |
| //首先获取页面中的第一个ul | |
| 0]; | |
| //创建一个新的节点 | |
| //给新节点的增加内容 | |
| //在第7 个位置之前 把新增的li放入 | |
| 6]; | |
| //ul.insertBefore(newLi,needLi); // 把newLi放在needLi之前 | |
| //替换指定的节点 | |
| 9]; | |
| replaceChild(newLi,repLi); | |
| //删除指定的节点 | |
| removeChild(newLi); | |
| //clone UL | |
| true); | |
| // 在body中增加 ul | |
ul.parentNode.appendChild(newUl); | |
| script> | |
| body> | |
| html> |
3、Style样式
| <!DOCTYPE html> | |
| html> | |
| title> | |
| <!-- | |
| 之前接触的 行内样式 style 是css设置样式 | |
| 现在我们使用的是js中的设置样式！ | |
| --> | |
| #myDiv{ | |
| px; | |
| px; | |
| } | |
| style> | |
| head> | |
| body> | |
| div> | |
| button> | |
| button> | |
| /** | |
| * 通过js中的style属性来设置样式 | |
| * | |
| * 注意点： | |
| * 01.css中有的属性我们 style中都有 | |
| * 02.只不过属性名写法不一致 | |
| * 比如说 css font-size style fontSize | |
| */ | |
| changeBackground(){ | |
| //改变背景颜色 | |
| } | |
| changeMargin(){ | |
| //改变外边距 | |
| } | |
| script> | |
| body> | |
| html> |
4、Tab选项卡
| <!DOCTYPE html> | |
| html> | |
| title> | |
| px;} | |
| px;} | |
| pointer;} | |
| red} | |
| px;} | |
| style> | |
| head> | |
| body> | |
| ul> | |
| li> | |
| li> | |
| li> | |
| li> | |
| ul> | |
| tab-1第一个容器的内容 | |
| div> | |
| tab-2第二个容器的内容 | |
| div> | |
| tab-3第3个容器的内容 | |
| div> | |
| tab-4第4个容器的内容 | |
| div> | |
| div> | |
| //获取页面中需要得所有li的集合 | |
| //循环li集合 | |
| ++){ | |
| //当前选中的li | |
| //鼠标移入事件 | |
| //循环div | |
| //所有div的都隐藏 | |
| //清除所有的li 的class属性值 | |
| } | |
| //设置选中的li样式 | |
| //显示选中的li对应div | |
| } | |
| } | |
| script> | |
| body> | |
| html> |
5、ClassName属性
| <!DOCTYPE html> | |
| html> | |
| title> | |
| .myDiv{ | |
| px; | |
| px; | |
| red; | |
| } | |
| .newStyle{ | |
| px; | |
| px; | |
| pink; | |
| } | |
| style> | |
| head> | |
| body> | |
| div> | |
| function(){ | |
| //newStyle是我们需要设置class的名称 | |
| } | |
| script> | |
| body> | |
| html> |
6、EasyUI实现tabs
| <!DOCTYPE html> | |
| html> | |
| title> | |
| head> | |
| body> | |
| ul> | |
| li> | |
| li> | |
| li> | |
| li> | |
| ul> | |
| div> | |
| div> | |
| div> | |
| div> | |
| div> | |
| --> | |
| script> | |
| script> | |
| script> | |
| function(){ | |
| tabs({ | |
| //默认选中第一个tab | |
| }) | |
| }) | |
| script> | |
| body> | |
| html> |
7、滚动距离
| <!DOCTYPE html> | |
| html> | |
| title> | |
| 0;} | |
| scroll;} | |
| px;} | |
| style> | |
| function(){ | |
| //当div滚动的时候 | |
| function(){ | |
| scrollTop; | |
| } | |
| } | |
| script> | |
| head> | |
| body> | |
| p> | |
| p> | |
| p> | |
| p> | |
| p> | |
| p> | |
| p> | |
| p> | |
| p> | |
| p> | |
| p> | |
| p> | |
| p> | |
| p> | |
| div> | |
| div> | |
| body> | |
| html> |
8、window.onload
| <!DOCTYPE html> | |
| html> | |
| title> | |
| <!-- | |
| window.onload | |
| 注意点： | |
| 01.在整个页面中只能存在一次，否则后面会覆盖前面 | |
| 02.页面中所有的内容加载完毕之后才执行！ | |
| 03.没有简写的方法 | |
| --> | |
| head> | |
| body> | |
| function(){ | |
| } | |
| script> | |
| body> | |
| html> |
9、picture浮动
| <!DOCTYPE html> | |
| html> | |
| title> | |
| 0;} | |
| #box{ | |
| absolute; | |
| px; | |
| px; | |
| } | |
| style> | |
| function () { | |
| 5; | |
| go(){ | |
| //水平方向 | |
| clientWidth){ | |
| 1; | |
| } | |
| 0){ | |
| 1; | |
| } | |
| //垂直方向 | |
| clientHeight){ | |
| 1; | |
| } | |
| 0){ | |
| 1; | |
| } | |
| } | |
| //定时函数 | |
| 100); | |
| //鼠标移上去 停止 | |
| function(){ | |
| null){ | |
| clearInterval(time); | |
| } | |
| } | |
| //鼠标离开 继续移动 | |
| function(){ | |
| 100); | |
| } | |
| } | |
| script> | |
| head> | |
| body> | |
| div> | |
| body> | |
| html> |