dom兼容性问题3 元素操作
/* var oLi = document.createElement('li');oUl.appendChild( oLi );};createElement('') : 创建一个dom元素appendChild() : 往一个节点的现有子节点后面追加一个新的子节点。父级.appendChild( 子节点 );insertBefore()createElement('') : 创建一个dom元素appendChild() : 往一个节点的现有子节点后面追加一个新的子节点。父级.appendChild( 子节点 );insertBefore() : 往一个节点的指定现有子节点前面插入一个新的子节点。父级.insertBefore( 准备插入的子节点,插入到哪个子节点的前面 );removeChild() : 从一个节点里面删除指定的子节点。父级.removeChild( 准备要删除的子节点 );replaceChild() : 用一个节点替换掉另一个节点里面的指定子节点。被替换元素的父级.replaceChild( 用来替换的节点,被替换掉的子节点 );被替换的元素必须是真实存在的节点元素。cloneNode() : 复制一个节点。被复制的节点.cloneNode( boolean );boolean : 指定是否复制所有子孙节点。true : 复制所有子孙节点。false : 只复制节点本身。温馨提醒:cloneNode() 只会复制dom结构,而不会复制事件或者通过js添加的属性等。appendChild() / insertBefore() / replaceChild() : 如果操作的对象是一个已经存在在页面中的元素,则是直接移动元素,而并非复制元素。exp: var oDiv1 = document.getElementById('div1'); var oDiv2 = document.getElementById('div2'); var oBox = document.getElementById('box');document.onclick = function(){//oBox.appendChild( oDiv1 );// oBox.appendChild( oDiv1.cloneNode() );//oBox.insertBefore( oDiv1 , oDiv2 );oBox.replaceChild( oDiv1 , oDiv2 );};appendChild() / insertBefore() / replaceChild() : 如果操作的对象是一个已经存在在页面中的元素,则是直接移动元素,而并非复制元素。----------------------------------------------------- class封装函数 function hasClass( obj , sClass ){var aClass = obj.className.split(' ');if( !obj.className )return false;for(var i=0; i<aClass.length; i++){if( aClass[i] == sClass )return true;}return false;}function removeClass( obj , sClass ){var aClass = obj.className.split(' ');if( !obj.className ) return;for(var i=0; i<aClass.length; i++){if( aClass[i] == sClass ){aClass.splice( i , 1 );obj.className = aClass.join(' ');return;} }}function addClass( obj , sClass ){var aClass = obj.className.split(' ');if( !obj.className ){obj.className = sClass;return; }for(var i=0; i<aClass.length; i++){if( aClass[i] == sClass ) return;}obj.className += ' ' + sClass; } //获取function getByClass( sClass , parent ){ var aEles = (parent||document).getElementsByTagName('*');var arr = [];for(var i=0; i<aEles.length; i++){ //查看每一个元素是否满足要求var aClass = aEles[i].className.split(' ');for(var j=0; j<aClass.length; j++){ //查看元素的每一个classNameif( aClass[j] == sClass ){arr.push( aEles[i] ); break;}}}return arr;}*/
转载于:https://www.cnblogs.com/aix1314/p/4549023.html
dom兼容性问题3 元素操作相关推荐
- Selenium定位元素操作实例详解
Selenium定位元素操作示例 本文实例讲述了Selenium定位元素操作.分享给大家供大家参考,具体如下: Selenium是一个用于Web应用程序测试的工具.Selenium测试直接运行在浏览器 ...
- 48 jQuery元素操作
技术交流QQ群:1027579432,欢迎你的加入! 欢迎关注我的微信公众号:CurryCoder的程序人生 主要是遍历.创建.添加.删除元素操作. 1.遍历元素 jQuery隐式迭代是对同一类元素做 ...
- jQuery 元素操作——遍历元素
jQuery 元素操作 主要是遍历.创建.添加.删除元素操作 <!DOCTYPE html> <html lang="en"><head>< ...
- layui 如何去dom_常用元素操作 - layui.element
元素功能的开启只需要加载element模块即会自动完成,譬如tab选项卡切换.导航菜单滑动切换效果.面包屑导航.进度条等,使用这些小交互功能的前提就是:拥有符合这些小功能的所需正确的HTML结构,以及 ...
- jQuery元素操作-遍历元素
1.jQuery元素操作 1.1.遍历元素-语法1 主要遍历dom对象 <!DOCTYPE html> <html lang="en"> <head& ...
- jQuery—常用API(jQuery 属性操作、jQuery 文本属性值、jQuery 元素操作)
1. jQuery 属性操作 1.1 设置或获取元素固有属性值 prop() 所谓元素固有属性就是元素本身自带的属性,比如 <a> 元素里面的 href,比如 <input> ...
- Web前端学习笔记——JavaScript之WEBAPI、BOM、DOM及获取页面元素
Web API介绍 API的概念 API(Application Programming Interface,应用程序编程接口)是一些预先定义的函数,目的是提供应用程序与开发人员基于某软件或硬件得以访 ...
- jQuery元素操作和尺寸位置
1. 遍历元素 <!DOCTYPE html> <html lang="en"><head><meta charset="UTF ...
- 二、属性操作,文本属性值,元素操作,尺寸、位置操作
1.1. jQuery 属性操作 jQuery 常用属性操作有三种:prop() / attr() / data() ; 1.1.1 元素固有属性值 prop() 所谓元素固有属性就是元素本身自带的属 ...
最新文章
- 【组队学习】【32期】算法的应用
- 谷歌地图的全球森林监察系统,揭秘中国雾霾的惊天秘密!
- 数据集哪些特征有多大的null列表
- 快速排序c语言实现,快速排序的C语言代码实现
- 最少拦截系统 贪心
- 二叉搜索树 java版
- 三种激活函数以及它们的优缺点
- NOIP201103瑞士轮【B002】
- 新年快乐@2008!
- 记账系统(java)
- android百度地图poi路线规划,百度地图开发之poi检索,线路规划(示例代码)
- 华为2016研发工程师编程题---删数
- win7 计算机游戏不见了,win7系统打开或关闭windows功能没有游戏的解决方法
- 关于abd.exe 报错的解决方法总结
- Android驱动面阵相机,了解线阵相机与面阵相机的基本区别
- Ubuntu 16.04 无线网络 设备未就绪(device not ready)
- 微博话题下的数据爬取
- 不用找了,50个备课网站一网打尽
- Python测试习题
- STM32F072 Nucleo笔记2-利用STM32CuBeMX创建工程并用按键控制LED的亮灭