关于原生dom操作
来源:互联网 发布:c语言静态局部变量 编辑:程序博客网 时间:2024/04/29 05:35
1. 关于查找
1.1 通过父子兄弟关系查找
childNodes //查找父元素的所有子元素(多层),返回一个类数组对象,支持到ie6parentNode //查找子元素的父节点(一层),返回父元素对象,支持到ie6previousSibling //查找前一个紧邻的兄弟元素,返回兄弟元素对象,支持到ie6nextSibling //查找后一个紧邻的兄弟元素,返回兄弟元素对象,支持到ie6firstChild //查找父元素下的第一个子元素,返回子元素对象,支持到ie6lastChild //查找父元素下的最后一个子元素,返回子元素对象,支持到ie6
各项dom操作均支持到ie6,但是...有问题,什么问题?举个栗子:
<div> <button>click</button> <button>单击</button></div>var oDiv = document.getElementsByTagName('div')[0];console.log(oDiv.firstChild)
大家猜会输出什么,
答案是:IE9及其之前的浏览器会输出:<button>click<button>
,而其他标准浏览器会输出''
原因是:对于元素间的空格,IE9 及之前版本不会返回文本节点,而其他所有浏览器都会返回文本节点
也就是说:除了IE9及之前的浏览器,会输出标签之间的空格的空文本,因为他们也是一个文本元素!
解决方案是,在其他浏览器下,除了ie9及其之前的浏览器,使用如下查找node节点的方法,可以忽略第一个文本节点,直接寻到html元素节点
childElementCount:返回子元素(不包括文本节点和注释)的个数。firstElementChild:指向第一个子元素;firstChild 的元素版。lastElementChild:指向最后一个子元素;lastChild 的元素版。previousElementSibling:指向前一个同辈元素;previousSibling 的元素版。nextElementSibling:指向后一个同辈元素;nextSibling 的元素版。
1.2 通过元素自身属性查找
getElementById('') //通过元素的id进行查找,兼容到IE6getElementsByTagName('') //通过元素的标签名进行查找,兼容到ie6getElementsByName('') //通过元素的name属性查找,兼容到IE8getElementsByClass('') //通过元素的class属性去查找,html5新出的。兼容性你懂的。
此外还有一个,选择器:
querySelector() //接收一个CSS 选择符,返回与该模式匹配的第一个元素,兼容到Ie8+querySelectorAll() //接收一个CSS 选择符,返回与该模式匹配的第一数组
2. 创建元素
document.createElement() //创建HTML元素节点document.createTextNode() //创建文本元素节点
3. 插入、替换、删除、克隆元素
appendChild() //向父元素的最后一个子元素处插入insertBefore() //两个参数,要插入的节点和作为参照的节点replaceChild() //两个参数,要插入的节点和要替换的节点removeChild() //要移除的对象
特别注意:前面介绍的四个方法操作的都是某个节点的子节点,也就是说,这都是父元素对子元素的操作
cloneNode()// cloneNode()方法接受一个布尔值参数,表示是否执行深复制。在参数为true// 的情况下,执行深复制,也就是复制节点及其整个子节点树;在参数为false 的情况下,执行浅复制,// 即只复制节点本身。复制后返回的节点副本属于文档所有,但并没有为它指定父节点。因此,这个节点// 副本就成为了一个“孤儿”,除非通过appendChild()、insertBefore()或replaceChild()将它添加到文档中
既然说了这么多,咱们学以致用一下,分享一道腾讯的笔试题,前两天我的小伙伴刚刚做完这个题
题目:在网页中生成一个ul,里面有100个li,每个li的内容从上到下内容从1-100。生成结束1秒钟后,将100个li颠倒过来,内容也就变成了100-1。
要求:不许使用了innerHTML以及innerText这两个方法,兼容性到IE8+
po上我的解题代码:
var oUl = document.createElement('ul');document.body.appendChild(oUl);for (var i=0;i<100;i++) { var oLi = document.createElement('li'); oLi.appendChild(document.createTextNode(i + 1)); oUl.appendChild(oLi);}setTimeout(function () { for (var i=0;i<100;i++) { var oSpecialLi = document.createElement('li'); oUl.insertBefore(oSpecialLi, findElementByPos(i)); oUl.replaceChild(oUl.lastElementChild, oSpecialLi); }}, 1000);// 封装了一个函数,用于返回需要位置的元素function findElementByPos(pos) { var oLiChange = oUl.firstElementChild; for (var j=0;j<(pos-0);j++) { oLiChange = oLiChange.nextElementSibling; } return oLiChange;}
4. 其他
4.1 操作html元素下的属性
getAttribute() // 传入一个参数,获取相应属性的值setAttribute() // 两个参数,第一个:属性名称,第二个:属性的值removeAttribute() // 删除属性,输入要删除的属性名称
4.2 焦点管理
document.activeElement // 没有兼容性问题,这个属性始终会引用DOM 中当前获得了焦点的元素
4.3 获取内容
innerHTML // 属性返回与调用元素的所有子节点(包括元素、注释和文本节点),当然也可以写入父元素下的子元素innerText // 功能和上一条类似,但是只对操作元素下的文本元素有影响
0 0
- 关于原生dom操作
- 原生JavaScript操作DOM
- 原生js dom操作
- js原生dom操作
- 原生js操作dom
- javascript原生dom操作
- 原生DOM操作汇总
- 原生js 操作dom
- 原生javascript操作DOM元素
- JavaScript常用原生DOM操作
- 原生js操作DOM元素
- 使用原生 JavaScript 操作 DOM
- 原生JavaScript下的DOM操作
- PHP原生DOM对象操作XML
- Php原生DOM对象如何操作XML
- 原生JS与jQuery操作DOM对比
- 原生JS与jQuery操作DOM对比
- 浅谈原生JS和jQuery操作DOM
- PHP 远程文件包含的介绍和代码防御
- angular自定义的tab切换
- 多线程(一)
- JAVA设计模式-责任链模式
- Python学习 自定义函数
- 关于原生dom操作
- QT---项目的构成及原理
- 生成JSON数据
- TCP的流量控制和拥塞控制
- 关系型数据库遵循ACID规则
- Android笔记----AsyncTask异步消息处理机制
- 快速排序C语言实现(递归)和希尔排序
- sqldeveloper的查看执行计划快捷键F10
- linux下终端复用软件之tmux