常用DOM笔记
1,获取元素方法:
(1),获取单个,返回一个元素
element.getElementById()//最快,实时
element.querySelector()
(2)获取多个,返回一组
element.getElementsByTagName()
element.getElementByClassName()
element.getElementByName()//常用于表单元素
element.querySelectorAll()//查找速度比上面三个块,为静态的,非实时的,在加载时获取
2,创建元素,文本
创建元素节点:element.createElement("div")
创建文本节点:element.createTextNode("hello world")
3,插入子元素
插入到父元素的最后:parentNode.appendChild(newNode)
插入到指定位置前:parentNode.insertBefore(newNode,positionNode)
4,属性操作
设置元素属性:element.setAttribute(name,value)
获取元素属性:element.getAttribute(name)
移除元素属性:element.removeAttribute(name)
5,移除元素
移除元素包括本身:element.remove()
移除元素的子级:parentNode.removeChild(childNode)
6,替换子元素
parentNode.replaceChild(newNode,oldNode)
7,复制元素:
element.cloneNode(boolean);
当boolean值为false时,为浅复制,只复制元素节点,其子级不复制
当boolean值为true时,为深复制,复制元素节点及所有子级
8,获取实时样式
currentStyle//IE8以下版本:element.currentStyle.Attribute
getComputedStyle(element,null)//第二个值为伪类元素,无时填null,//现代浏览器所支持
9,通过节点关系获取元素
(1)子级元素获取(返回数组):element.children
(2)兄弟节点获取(此方法包括所有节点,如元素节点,文本节点等等):
element.nextSibling,element.previousSibling
(3)兄弟元素节点获取(此方法只获取元素节点):
element.nextElementSibling,element.previousElementSibling
(4)父级元素获取
element.parentElement
10,nodetype()用于区分不同类型节点,如元素节点,文字节点,文本碎片节点 等等
常见类型节点的返回值
nodeType(元素);返回值为 1
nodeType(文本);返回值为 3
nodeType(document);返回值为 9
nodeType(documentfragment);返回值为 11
常用DOM笔记的更多相关文章
- DOM笔记(十):JavaScript正则表达式
一.RegExp ECMAScript通过RegExp类型类支持正则表达式,语法和Perl类似: var exp = /pattern/flags; patternb部分是任何简单的或复杂的正则表达式 ...
- DOM笔记(三):Element接口和HTMLElement接口
一.Element接口 Element接口表示一个元素,该接口扩展自Node接口,自然继承了Node接口的属性和方法,也有一套针对元素的属性和方法. Element接口常见的属性比较少,常用的就是一个 ...
- DOM笔记(二):Node接口
所有的节点都使用Node接口来表示,可以使用很多方法去获取节点,如document.getElementsByTagName().document.getElementsByName()等均返回一个N ...
- DOM笔记(十三):JavaScript的继承方式
在Java.C++.C#等OO语言中,都支持两种继承方式:接口继承和实现继承.接口继承制继承方法签名,实现继承则继承实际的方法和属性.在SCMAScript中,由于函数没有签名,所以无法实现接口继承, ...
- Linux 常用命令笔记
Linux 常用命令笔记 1. locate locate:用来定位文件的位置,如:locate a.txt 但是这个命令有延迟,也就是新建的文件不一定能搜索到,如果非要找到新建的文件可以使用 upd ...
- 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笔记(一):HTMLDocument接口
操作HTML文档的第一步就是获取对文档元素的引用,每一个元素在DOM中就是一个节点,所有的元素在DOM中构成一个节点树. 用于获取元素节点定义的方法定义于HTMLDocument接口,window.d ...
随机推荐
- tomcat启动很慢的原因
启动后tomcat显示的代码如下: 2014-4-3 10:50:15 org.apache.catalina.core.AprLifecycleListener init 信息: The APR b ...
- Codeforces Gym 100570 E. Palindrome Query Manacher
E. Palindrome QueryTime Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/gym/100570/pro ...
- Codeforces Gym 100338I TV Show 傻逼DFS,傻逼题
Problem I. TV ShowTime Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://acm.hust.edu.cn/vjudge/contest ...
- EasyUI改动DateBox和DateTimeBox的默认日期格式
近期整理Easyui控件的时候,对Easyui的DateBox控件和DateTimeBox控件进行了梳理,而我之所以将EasyUI的DateBox控件和DateTimeBox控件放在一起,归为一类,是 ...
- iOS开发——UI篇OC篇&layoutSubviews和drawRect
layoutSubviews和drawRect 首先两个方法都是异步执行.layoutSubviews方便数据计算,drawRect方便视图重绘. layoutSubviews在以下情况下 ...
- C++第11周(春)项目2 - 职员有薪水了
课程首页在:http://blog.csdn.net/sxhelijian/article/details/11890759,内有完整教学方案及资源链接 [项目2 - 职员有薪水了]定义一个名为CPe ...
- MySQL 5.7 参数 – log_timestamps
http://www.ttlsa.com/mysql/mysql-5-7-kengdieparam-log_timestamps/ 官网原话: This variable was added in M ...
- mydumper原理5
前言 之前介绍了Oracle官方的多线程逻辑导入导出工具mysqlpump,但已经操作过的同学会发现其多线程的单位还是表,换句话说, 单表依然是 单线程导出 .网易早已使用mydumper/myloa ...
- PHP: 深入pack/unpack 字节序
http://my.oschina.net/goal/blog/195749?p=1 目录[-] 写在前面的话 什么是字节序 MSB和LSB 大端序 小端序 网络字节序 主机字节序 总结 pack/u ...
- MySQL在Django框架下的基本操作(MySQL在Linux下配置)
[原]本文根据实际操作主要介绍了Django框架下MySQL的一些常用操作,核心内容如下: ------------------------------------------------------ ...