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类型节点)

时间: 2024-10-08 08:16:40

js原生dom方法总结的相关文章

【js常用DOM方法】

介绍几个js DOM的常用方法 获取元素节点 getElementById  getElementsByTagName  getElementsByClassName 先写一个简单的网页做测试: /* test.html*/<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>test</title> </head> <body&g

jQuery对象与JS原生dom对象之间的转换

jQuery就是JS的一个扩展库,工具库,提供很多方便快捷的方法,所以将JS对象转换为jQuery对象后,能更方便地操作这个对象.但是jQuery对象也不是万能的,有一些JS对象有的能,jQuery对象并没有提供,所以需要转换回JS对象,才能进行操作.另外一种情况可能是,你使用某些第三方库,接口函数只能接受JS对象或者jQuery对象,那么你就需要在这两者之间进行转换. 1.将jQuery转换为dom对象的方法 [index] 或者.get(index): a.$(“#form”)[index]

JS原生DOM操作总结

DOM的主要操作--增.删.改.查节点 (1) 查找节点 document.getElementById('div1') document.getElementsByName('uname') document.getElementsByTagName('span') document.getElementsByClassName('alert') document.querySelector('#div1') document.querySelectorAll('.alert'); (2) 操

原生DOM方法实现,多个图片的横向左右轮播

轮播页面的构成: 页面中间有多个同样大小的图片,在图片群的左右两侧有左右方向播动的可点击钮,图片群就会往左侧翻转,并且在最后一张图片的时候,第一张图片就会继续出现在最后一张图片,属于无裂痕翻转. 右侧按钮也是同样. 实现逻辑: 左侧按钮,通过获取图片所在上一级(父级)目录,对出现在最左侧的第一个child用removeChild()方法删除第一个,然后将删除的该子元素添加到父级元素的最后,每次点击事件就会重复前面操作. 实现效果: (初始化图): (点击左侧按钮): 为了使一个界面只出现所需要的

JS --- 常用DOM方法

http://www.w3school.com.cn/xmldom/dom_document.asp document.createElement("div");      创建一个元素 document.body.appendChild(div);  追加元素 createAttribute("")  创建属性 createTextNode("click")  添加文本节点 lastChild  最后一个子节点

js原生removeclass方法

//如果列表中有存在给定的值就删除 // function removeClass(ele,txt){ // var str = ele.className, // ary = str.split(/\s+/), // pos = -1, // i = ary.length-1; // for(;i>=0;i--){ // if(ary[i] == txt){ // pos = i; // break // } // } // if(pos>=0){ // ary.splice(pos,1);

Js操作DOM的方式及获取浏览器的宽高

我们在为页面加入一些动态效果或实现一些脚本功能时,需要对文档body中的元素进行操作,也就是,我们需要使用js或jQuery来对dom操作.下面呢,我说一下js是怎样对dom操作的. document.write(),这既可以向文档输出文本,也可以写入代码来添加元素. 获取需要操作的元素: 利用id获取就是:document.getElementById("name"); 利用class获取就是:document.getElementsByClassName("name&qu

JS获取长度方法总结

length: length是JS原生的方法,用于获取元素的个数或者对象的长度,从1开始 //用于获取对象的长度,从1开始var length = $("#uw3c").length; size(): size()是jQuery中的方法,用来获取元素个数,从1开始. //用于获取对象的长度,从1开始var length = $("#uw3c").size(); length与size()的区别: 如果要是获取字符串长度的话,那么用那个都一样.如果要是获取元素个数,那

认识JQuery,JQuery的优势、语法、多库冲突、JS原生对象和JQuery对象之间相互转换和DOM操作,常用的方法

(一)认识JQuery  JQuery是一个JavaScript库,它通过封装原生的JavaScript函数得到一套定义好的方法    JQuery的主旨:以更少的代码,实现更多的功能 (二)JQuery的优势 1)可以像CSS一样访问和操作DOM 2)修改CSS控制页面外观 3)简化JS代码操作 4)事件代理更加容易 5)动画效果使用方便 6) Ajax技术更加完美 7)大量的基于Jquery的插件 8)可以自定义扩展功能插件 (三)JQuery的语法 格式:$(selector).actio