dom 笔记
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>dom</title> <script> /** * 子节点 childNode (有兼容问题) * ie6-8 没问题 * nodeType==3 文本节点 * nodeType==1 元素节点 * children 都兼容 * 父节点 parentNode * 有定位的父级 offsetParent * 首尾节点(有兼容问题) * ie6-8 (chrome) * firstChild firstElementCHild * lastChild lastElementChild * 兄弟节点(有兼容问题) * nextSibling nextElementSibling * previousSibling previousElementSibling * * dom操作属性 * 获取 getAttribute(名称) * 设置 setAttribute(名称、值) * 删除 removeAttribute(名称) * 根据class获取元素函数的封装 * * dom的应用 * 创建dom元素 creatElement(标签名) * 追加节点 appendChild(节点) * 在原有节点前插入节点 insertBefor(节点,原有节点) * 删除节点 removeChild(节点) */ function getByClass(oParent, sClass) { var oResult = []; var oEle = oParent.getElementsByTagName('*'); for (var i = 0; i < oEle.length; i++) { if (oEle[i].className == sClass) { oResult.push(oEle[i]); } } return oResult; } window.onload = function() { var oUl = document.getElementById("ul1"); var oLi = getByClass(oUl, "item"); for (var i = 0; i < oLi.length; i++) { oLi[i].style.background = "red"; } } </script> </head> <body> <ul id="ul1"> <li></li> <li class="item"></li> <li></li> <li class="item"></li> <li></li> </ul> </body> </html>
dom 笔记的更多相关文章
- DOM笔记(十):JavaScript正则表达式
一.RegExp ECMAScript通过RegExp类型类支持正则表达式,语法和Perl类似: var exp = /pattern/flags; patternb部分是任何简单的或复杂的正则表达式 ...
- DOM笔记(七):开发JQuery插件
在上一篇笔记本中,讲解了如何利用jQuery扩展全局函数和对象:DOM笔记(六):怎么进行JQuery扩展? 在这篇笔记本中,将开发一个简单的动画插件,名称是example-plugin,用其实现一个 ...
- DOM笔记(五):JavaScript的常见事件和Ajax小结
一.常见事件类型 1.鼠标事件 事件名称 说明 onclick 鼠标单击时触发 ondbclick 鼠标双击时触发 onmousedown 鼠标左键按下时触发 onmouseup 鼠标释放时触发 on ...
- DOM笔记(四):HTML 5 DOM复杂数据类型
HTML 5 DOM定义了一下集合.列表等复杂的数据类型用于实现便捷的操作.相对于HTML 4 DOM,HTML 5 DOM增加了HTMLCollection.DOMTokenList.DOMStri ...
- DOM笔记(三):Element接口和HTMLElement接口
一.Element接口 Element接口表示一个元素,该接口扩展自Node接口,自然继承了Node接口的属性和方法,也有一套针对元素的属性和方法. Element接口常见的属性比较少,常用的就是一个 ...
- DOM笔记(二):Node接口
所有的节点都使用Node接口来表示,可以使用很多方法去获取节点,如document.getElementsByTagName().document.getElementsByName()等均返回一个N ...
- DOM笔记(一):HTMLDocument接口
操作HTML文档的第一步就是获取对文档元素的引用,每一个元素在DOM中就是一个节点,所有的元素在DOM中构成一个节点树. 用于获取元素节点定义的方法定义于HTMLDocument接口,window.d ...
- DOM笔记(十):JavaScript正則表達式
一.RegExp ECMAScript通过RegExp类型类支持正則表達式,语法和Perl类似: var exp = /pattern/flags; patternb部分是不论什么简单的或复杂的正則表 ...
- DOM笔记(十三):JavaScript的继承方式
在Java.C++.C#等OO语言中,都支持两种继承方式:接口继承和实现继承.接口继承制继承方法签名,实现继承则继承实际的方法和属性.在SCMAScript中,由于函数没有签名,所以无法实现接口继承, ...
- DOM笔记(十二):又谈原型对象
因为之前谢过一篇关于原型对象的笔记:浅谈JavaScript中的原型模式.现在我又重新看到这个话题,对原型有了进一步的理解,所以,又要谈谈原型对象. 一.理解原型对象 创建的每一个函数都有一个prot ...
随机推荐
- [一]初识Ajax
是什么? 一种网页交换数据的技术 作用: 使页面局部刷新,获取后台数据 怎么做? 调用浏览器内置对象发送异步请求
- 安卓问题http://blog.csdn.net/xb12369/article/details/50510302
- eclipse 不能切换输入法
按了Alt+Shift键?再按一次把EN切换成CN,然后再Ctrl+Shift就可以切换输入法
- [转]非常好的vsftpd安装于配置
环境:CentOS 5.0 操作系统一.安装:1.安装Vsftpd服务相关部件:[root@KcentOS5 ~]# yum install vsftpd*Dependencies Resolved= ...
- Java凝视Override、Deprecated、SuppressWarnings具体解释
一.什么是凝视 说起凝视,得先提一提什么是元数据(metadata).所谓元数据就是数据的数据.也就是说,元数据是描写叙述数据的.就象数据表中的字段一样,每一个字段描写叙述了这个字段下的数据的 ...
- iOS开发中WebP格式的64位支持处理
几个月前我们项目中添加了对webp格式的处理.期间遇到了一些问题,这是当中的一个小的记录. 官方下载地址:https://code.google.com/p/webp/downloads/list 对 ...
- mac jdbc连接mysql
1.下载jdbc驱动: http://dev.mysql.com/downloads/connector/j/ 2.增加jdbc的jar包至项目的libs文件夹并build path 2.改动环境变量 ...
- Oracle VM Virtual 下CentOS不能自动获取IP地址
在CentOS配置网卡开机自动获取IP地址: vi /etc/sysconfig/network-scripts/ifcfg-eth0 将 ONBOOT="no" 改为 ONBOO ...
- 通过NSURLProtocol拦截HTTP转HTTPS来整合SPDY的记录
众所周知,iOS 9.0之后苹果引入ATS限制,苹果也推荐尽量不要使用HTTP通讯了,毕竟是很不安全的.而国内各个有(wu)节操的运营商也会经常篡改请求HTTP请求.所以如果可能,在不影响性能的情况下 ...
- 动手写一个快速集成网易新闻,腾讯视频,头条首页的ScrollPageView,显示滚动视图
最终效果 更新示例.gif 示例效果.gif 示例效果1.gif 示例效果2.gif 示例效果3.gif 示例效果4.gif 示例效果5.gif 示例效果6.gif 一.构思部分: 打算分为三个部分, ...