js原生dom方法总结
1.document
document方法
getElementById (Node)返回指定节点的引用
getElementsByTagName (NodeList)返回文档中所有匹配元素的集合
querySelector (Node)返回与选择器匹配的首个节点 (ie8+)
querySelectorAll (Node)返回与选择器匹配的所有节点 (ie8+),其中ie8中选择器只支持css2选择器
createElement(name) (Node)返回新建的节点
createTextNode(text) (Node)返回新建的文本节点
documentElement (Node)返回html节点
body (Node)返回body节点
createDocumentFragment (Node)返回一个DocumentFragment类型的节点,用作一个轻量版本的 Document 使用,用于存储已排好版的或尚未打理好格式的XML片段。
2.node(包括element,text,attribute,document,comment等,Element只是nodeType=1时node)
node方法
appendChild(node) 添加一个子节点
removeChild(node) 移除一个子节点
replaceChilde(node) 替换一个子节点
insertBefore(newNode,refNode) 在同一层级的节点前面插入新节点
hasChildNodes() (Boolean)返回是否子节点
cloneNode(bDeep) (Node)返回节点的副本,bDeep表示是否复制其子节点
node属性
nodeName (String)节点名称
nodeType (Number)节点类型
nodeValue (String)节点的值
parentNode (Node)父节点的引用
childNodes (NodeList)子节点的列表
firstChild (Node)首个子节点
lastChild (Node)最后一个子节点
previouSibling (Node)前一个兄弟节点
nextSibling (Node)后一个子节点
3.element(可以有属性和子节点的node,对应XML中的一个tag元素,继承自node)
element方法
getAttribute(attrName) (string)返回属性的value
setAttribute(attrName,value) (string)给属性赋值
removeAttribue(attrName) (string)删除指定属性
getElementsByTagName(name) (NodeList)返回指定tag的节点列表
querySelector (Node)(ie9+)
querySelectorAll (NodeList)(ie8+)(:scope pseudo-class 不支持)
element属性
children (elementList)返回子元素列表(与子节点有区别,ie9+正确,ie6-8错误的包含Comment类型节点)
previousElementSibling (前一个兄弟element) (ie9+)
nextElementSibling (后一个兄弟element) (ie9+)
element插入文本
element.textContent (IE9+)
element.innerText(ie6+,ff45+,其他浏览器支持)
element.innerHTML(有html parse,性能逊于textContent)
element插入元素,html
//position beforebeigin/afterbegin/beforeend/afterend
element.insertAdjacentHTML(position, html)(全兼容)
element.insertAdjacentElement(position, element)(ie8+,ff48+)
js原生dom方法总结的更多相关文章
- 【js常用DOM方法】
介绍几个js DOM的常用方法 获取元素节点 getElementById getElementsByTagName getElementsByClassName 先写一个简单的网页做测试: /* ...
- jQuery对象与JS原生dom对象之间的转换
jQuery就是JS的一个扩展库,工具库,提供很多方便快捷的方法,所以将JS对象转换为jQuery对象后,能更方便地操作这个对象.但是jQuery对象也不是万能的,有一些JS对象有的能,jQuery对 ...
- JS原生DOM操作总结
DOM的主要操作——增.删.改.查节点 (1) 查找节点 document.getElementById('div1') document.getElementsByName('uname') doc ...
- js原生removeclass方法
//如果列表中有存在给定的值就删除 // function removeClass(ele,txt){ // var str = ele.className, // ary = str.split(/ ...
- JS获取长度方法总结
目录: 1length 2size() 3length与size()的区别 4获取元素的索引 - index() 5获取对应的索引 - eq() 概述: 在工作中大家经常需要获取对象的长度,或者要获取 ...
- 认识JQuery,JQuery的优势、语法、多库冲突、JS原生对象和JQuery对象之间相互转换和DOM操作,常用的方法
(一)认识JQuery JQuery是一个JavaScript库,它通过封装原生的JavaScript函数得到一套定义好的方法 JQuery的主旨:以更少的代码,实现更多的功能 (二)JQue ...
- 原生js操作dom的方法
今天学习了原生js的dom节点的操作,就记录下来,仅供自己以后参考. 1)创建节点:除了可以使用createElement创建元素,也可以使用createTextNode创建文本节点. documen ...
- 抛开jQuery,拾起原生JS的DOM操作
常用的JS-DOM操作与jQuery的对比 jQuery用多了,还是需要来熟练熟练原生JS的操作,不然写JS都快离不开jQuery了 目录 1. 获取DOM 2. 创建DOM 3. 添加DOM 4. ...
- 原生js操作DOM基础-笔记
原文参考http://mp.weixin.qq.com/s?__biz=MzU3MDA0NTMzMA==&mid=2247485490&idx=1&sn=15197b4b53e ...
随机推荐
- 【RDA】使用RDA(Remote Diagnostic Agent)工具对数据库进行健康检查
[RDA]使用RDA(Remote Diagnostic Agent)工具对数据库进行健康检查 分类: Linux RDA英文全称叫做"Oracle Remote Diagnostic Ag ...
- [MySQL性能优化系列]巧用索引
1. 普通青年的索引使用方式 假设我们有一个用户表 tb_user,内容如下: name age sex jack 22 男 rose 21 女 tom 20 男 ... ... ... 执行SQL语 ...
- Java 发送邮件
使用Java应用程序发送E-mail十分简单,但是首先你应该在你的机器上安装JavaMail API 和Java Activation Framework (JAF) . 你可以在 JavaMail ...
- Java并发基础框架AbstractQueuedSynchronizer初探(ReentrantLock的实现分析)
AbstractQueuedSynchronizer是实现Java并发类库的一个基础框架,Java中的各种锁(RenentrantLock, ReentrantReadWriteLock)以及同步工具 ...
- C语言运算符优先级
优先级 运算符 名称或含义 使用形式 结合方向 说明 1 [] 数组下标 数组名[常量表达式] 左到右 -- () 圆括号 (表达式)/函数名(形参表) -- . 成员选择(对象) 对象.成员名 -- ...
- MySQL 数据库的备份与恢复
一.MySQL 常见的备份方式 1. 直接拷贝数据库文件(物理拷贝) 2. 使用 mysqldump 工具备份 3. 使用 mysqlhotcopy 工具备份 4. 使用 mysql 的主从同步复制, ...
- Linux 内核版本命名
Linux 内核版本命名在不同的时期有其不同的规范,我们熟悉的也许是 2.x 版本奇数表示开发版.偶数表示稳定版,但到 2.6.x 以及 3.x 甚至将来的 4.x ,内核版本命名都不遵守这样的约定. ...
- BZOJ 1984: 月下“毛景树” [树链剖分 边权]
1984: 月下“毛景树” Time Limit: 20 Sec Memory Limit: 64 MBSubmit: 1728 Solved: 531[Submit][Status][Discu ...
- C#通过属性名称获取(读取)属性值的方法
之前在开发一个程序,希望能够通过属性名称读取出属性值,但是由于那时候不熟悉反射,所以并没有找到合适的方法,做了不少的重复性工作啊! 然后今天我再上网找了找,被我找到了,跟大家分享一下. 其实原理并不复 ...
- [网站公告]数据库服务器IOPS跑满造成网站不能正常访问
今年下午13:20-14:20左右,突增的访问量引发数据库服务器(阿里云RDS)IOPS跑满,造成大量请求执行缓慢,从而严重影响了网站的正常访问,给大家带来很大的麻烦,望大家谅解! 在出现故障时,当我 ...