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. event级别设置Resumable Space Allocation

    每日一贴,今天的内容关键字为event级别                           设置Resumable Space Allocation 设置Resumable Space Alloc ...

  2. Codeforces Beta Round #85 (Div. 1 Only) A. Petya and Inequiations 贪心

    A. Petya and Inequiations Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/contest ...

  3. hdu 5533 Dancing Stars on Me 水题

    Dancing Stars on Me Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://acm.hdu.edu.cn/showproblem.p ...

  4. SSAS 实例重命名

            在某些时候我们可能想对现有的SSAS实例进行重命名之类的,比如:我以前有两个SSAS,一个2005,一个2008R2,其中我们2005是一开始安装的,并且是默认实例,2008R2是命名 ...

  5. VBA Excel 常用 自定义函数

    1. 将 互换 Excel 列号(数字/字母) Public Function excelColumn_numLetter_interchange(numOrLetter) As String Dim ...

  6. mysql高效获取两张表共同字段的交集数据

    例如下面两站表A,B.A表和B表分别有5-10w数据.A表结构如下:id bid name title publisher extraB表结构如下id bid name title publisher ...

  7. css笔记01:CSS例子

    body { margin:0; padding:0; background:#000 url('images/backgrounds/star.png') no-repeat fixed; font ...

  8. QUI操作超时弹出登录窗口登录的处理方式

    在使用QUI开发的业务系统中,如果长时间没操作,session过期后,再次操作系统超时会自动跳转到登陆页面,如果当前有一些操作没有保存,需要重新登录后再次填写信息,用户体验很不好! 为了避免超时后页面 ...

  9. 安卓Design包之Toolbar控件的使用

    转自:ToolBar的使用 ToolBar的出现是为了替换之前的ActionBar的各种不灵活使用方式,相反,ToolBar的使用变得非常灵活,因为它可以让我们自由往里面添加子控件.低版本要使用的话, ...

  10. uva 133 The Dole Queue 双向约瑟夫环 模拟实现

    双向约瑟夫环. 数据规模只有20,模拟掉了.(其实公式我还是不太会推,有空得看看) 值得注意的是两个方向找值不是找到一个去掉一个,而是找到后同时去掉. 还有输出也很坑爹! 在这里不得不抱怨下Uva的o ...