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笔记的更多相关文章

  1. DOM笔记(十):JavaScript正则表达式

    一.RegExp ECMAScript通过RegExp类型类支持正则表达式,语法和Perl类似: var exp = /pattern/flags; patternb部分是任何简单的或复杂的正则表达式 ...

  2. DOM笔记(三):Element接口和HTMLElement接口

    一.Element接口 Element接口表示一个元素,该接口扩展自Node接口,自然继承了Node接口的属性和方法,也有一套针对元素的属性和方法. Element接口常见的属性比较少,常用的就是一个 ...

  3. DOM笔记(二):Node接口

    所有的节点都使用Node接口来表示,可以使用很多方法去获取节点,如document.getElementsByTagName().document.getElementsByName()等均返回一个N ...

  4. DOM笔记(十三):JavaScript的继承方式

    在Java.C++.C#等OO语言中,都支持两种继承方式:接口继承和实现继承.接口继承制继承方法签名,实现继承则继承实际的方法和属性.在SCMAScript中,由于函数没有签名,所以无法实现接口继承, ...

  5. Linux 常用命令笔记

    Linux 常用命令笔记 1. locate locate:用来定位文件的位置,如:locate a.txt 但是这个命令有延迟,也就是新建的文件不一定能搜索到,如果非要找到新建的文件可以使用 upd ...

  6. DOM笔记(七):开发JQuery插件

    在上一篇笔记本中,讲解了如何利用jQuery扩展全局函数和对象:DOM笔记(六):怎么进行JQuery扩展? 在这篇笔记本中,将开发一个简单的动画插件,名称是example-plugin,用其实现一个 ...

  7. DOM笔记(五):JavaScript的常见事件和Ajax小结

    一.常见事件类型 1.鼠标事件 事件名称 说明 onclick 鼠标单击时触发 ondbclick 鼠标双击时触发 onmousedown 鼠标左键按下时触发 onmouseup 鼠标释放时触发 on ...

  8. DOM笔记(四):HTML 5 DOM复杂数据类型

    HTML 5 DOM定义了一下集合.列表等复杂的数据类型用于实现便捷的操作.相对于HTML 4 DOM,HTML 5 DOM增加了HTMLCollection.DOMTokenList.DOMStri ...

  9. DOM笔记(一):HTMLDocument接口

    操作HTML文档的第一步就是获取对文档元素的引用,每一个元素在DOM中就是一个节点,所有的元素在DOM中构成一个节点树. 用于获取元素节点定义的方法定义于HTMLDocument接口,window.d ...

随机推荐

  1. tomcat启动很慢的原因

    启动后tomcat显示的代码如下: 2014-4-3 10:50:15 org.apache.catalina.core.AprLifecycleListener init 信息: The APR b ...

  2. Codeforces Gym 100570 E. Palindrome Query Manacher

    E. Palindrome QueryTime Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/gym/100570/pro ...

  3. Codeforces Gym 100338I TV Show 傻逼DFS,傻逼题

    Problem I. TV ShowTime Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://acm.hust.edu.cn/vjudge/contest ...

  4. EasyUI改动DateBox和DateTimeBox的默认日期格式

    近期整理Easyui控件的时候,对Easyui的DateBox控件和DateTimeBox控件进行了梳理,而我之所以将EasyUI的DateBox控件和DateTimeBox控件放在一起,归为一类,是 ...

  5. iOS开发——UI篇OC篇&layoutSubviews和drawRect

    layoutSubviews和drawRect     首先两个方法都是异步执行.layoutSubviews方便数据计算,drawRect方便视图重绘.   layoutSubviews在以下情况下 ...

  6. C++第11周(春)项目2 - 职员有薪水了

    课程首页在:http://blog.csdn.net/sxhelijian/article/details/11890759,内有完整教学方案及资源链接 [项目2 - 职员有薪水了]定义一个名为CPe ...

  7. MySQL 5.7 参数 – log_timestamps

    http://www.ttlsa.com/mysql/mysql-5-7-kengdieparam-log_timestamps/ 官网原话: This variable was added in M ...

  8. mydumper原理5

    前言 之前介绍了Oracle官方的多线程逻辑导入导出工具mysqlpump,但已经操作过的同学会发现其多线程的单位还是表,换句话说, 单表依然是 单线程导出 .网易早已使用mydumper/myloa ...

  9. PHP: 深入pack/unpack 字节序

    http://my.oschina.net/goal/blog/195749?p=1 目录[-] 写在前面的话 什么是字节序 MSB和LSB 大端序 小端序 网络字节序 主机字节序 总结 pack/u ...

  10. MySQL在Django框架下的基本操作(MySQL在Linux下配置)

    [原]本文根据实际操作主要介绍了Django框架下MySQL的一些常用操作,核心内容如下: ------------------------------------------------------ ...