javascript dom 基本操作小结_javascript技巧

自己平时可能也会经常遇到所以总结如下:
1,dom元素的创建
2,dom元素的插入
3,dom元素替换
4,dom元素的删除

首先页面上有这么些简单的dom元素
<div id="wrap">
  <div id="a">aaaaaaaa</div>
  <div id="b">bbbbbbbb</div>
  <div id="c">ccccccccc</div>
</div>
接下来我们创建一个div元素,js代码:
var div_d = document.createElement('div');
div_d.innerHTML = "dddddddd";
div_d.id = "d";
//这里不用innerText为了避免浏览器兼容引发一些问题;
然后把创建的这个id为d 的div插到dom元素id为b的div的前面
var div_wrap = document.getElementById('wrap');
var div_b = document.getElementById('b');
div_wrap.insertBefore(div_d,div_b);
如果直接插到id为wrap的子元素后面则可以这样:
div_wrap.insertBefore(div_d,null);

如果是替换掉div_b则如下:
div_wrap.replaceChild(div_d,div_b);
最后我们删除指定的一个元素id为b的div
div_b.parentNode.removeChild(div_b);
或者
document.body.removeChild(div_b);
后续可能有很多衍生的方法及应用这里暂时不继续写下去了

时间: 2024-08-08 01:49:33

javascript dom 基本操作小结_javascript技巧的相关文章

JavaScript对象学习小结_javascript技巧

JavaScript 对象 JavaScript 提供多个内建对象,比如 String.Date.Array 等等. 对象只是带有属性和方法的特殊数据类型. 在JavaScript中,几乎用到的每个js都离不开它的对象.下面我们深入了解一下js对象. js中对象的分类跟之前我们学过的语言中函数的分类一样,一个是系统自带的叫预定义对象,一个是用户自己写的叫自定义对象. 大体内容如下图所示:  一:核心对象 1.Array对象 数组对象,用来创建数组,使用new 创建 常用的方法如下图: 常用属性:

JavaScript DOM事件(笔记)_javascript技巧

第1章 事件流 1-1.事件冒泡:事件最开始由最具体的元素(文档中嵌套层次最深的那个节点)接收; 然后逐级向上传播至最不具体的那个节点(文档); 1-2.事件捕获:不太具体的节点应该更早接收到事件,而最具体的节点最后接收到事件; 第2章 事件处理程序 2-1 HTML事件处理程序 //缺点:HTML和JS代码紧密的耦合在一起; <input type="button" value="按钮" onclick="showMessage()"&g

Javascript中replace()小结_javascript技巧

关于定义   replace() 方法用于在字符串中用一些字符替换另一些字符,或替换一个与正则表达式匹配的子串. 关于语法 stringObject.replace(regexp/substr,replacement) 关于参数 参数 描述 regexp/substr 必需.规定子字符串或要替换的模式的 RegExp 对象. 请注意,如果该值是一个字符串,则将它作为要检索的直接量文本模式,而不是首先被转换为 RegExp 对象. replacement 必需.一个字符串值.规定了替换文本或生成替

JavaScript 性能优化小结_javascript技巧

随着 Web2.0 技术的不断推广,越来越多的应用使用 JavaScript 技术在客户端进行处理,从而使 JavaScript 在浏览器中的性能成为开发者所面临的最重要的可用性问题.而这个问题又因 JavaScript 的阻塞特性变的复杂,也就是说当浏览器在执行 JavaScript 代码时,不能同时做其他任何事情.本文详细介绍了如何正确的加载和执行 JavaScript 代码,从而提高其在浏览器中的性能. 在J2EE编程中,我们接触最多的脚本语言还是JavaScript.在使用JavaScr

javascript数组去重小结_javascript技巧

前言 最近为了换工作,准备下面试,开始回顾复习JavaScript相关的知识,昨天下午想到了数组去重的相关方法,干脆整理出几篇JavaScript算法文章,以备后用,此系列文章不定篇数,不定时间,想到哪写到哪,不保证正确性,不保证高效率,只是谈谈个人理解,如有错误,请诸位斧正. 关于去重 数组去重是一个比较常见的算法考察点,实现去重的方式无外乎通过唯一性和非唯一性.简单来讲就是挑出唯一的或者删除不唯一的.以下所有算法都是我自己瞎命名的,请无视之. 循环匹配去重 顾名思义,就是把数组中的每一个元素

15条JavaScript最佳实践小结_javascript技巧

本文档整理大部分公认的.或者少有争议的JavaScript良好书写规范(Best Practice).一些显而易见的常识就不再论述(比如要用对象支持识别判断,而不是浏览器识别判断:比如不要嵌套太深).条目顺序按重要级粗略的从高到低排列. 把外部JavaScript文件放在HTML底部 我们的目标是相同的:为用户尽可能快地显示内容.当载入一个脚本文件的时候,HTML会停止解析,直到脚本载入完毕.因此,用户可能会长时间对着一个空白的屏幕,看上去什么都没有发生.如果你的JavaScript代码只是增加

JavaScript 验证浏览器是否支持javascript的方法小结_javascript技巧

效果:  先来看看别的网站是怎么做的: google.com的登录: 客户端 和服务器端都验证了,并且提示信息一样的 baidu.com 的登录: 屏蔽了密码输入框 http://fanfou.com/register : 客户端和后台都验证了,但是提示的信息方式不一样 http://login.xiaonei.com/Login.do : 用户禁用Js后有提示信息 我的实现步骤: 思想: 1,默认(禁用js)submit按钮式不显示的,如果启用后,就显示submit按钮 2,通过<noscri

JavaScript 代码压缩工具小结_javascript技巧

UglifyJS UglifyJS是构建于nodeJS服务器端之上的一个代码压缩工具,目前jQuery使用它来压缩,压缩效果比较好. GitHub主页:http://github.com/mishoo/UglifyJS/ 在线使用:http://marijnhaverbeke.nl/uglifyjs 使用方法: 从http://nodejs.org下载nodejs,用到的是node.exe 再从UglifyJS的GitHub主页下载它的最新版本 复制node.exe到UglifyJS的bin目录

javascript this用法小结_javascript技巧

this是面向对象语言中的一个重要概念,在JAVA,C#等大型语言中,this固定指向运行时的当前对象.但是在javascript中,由于 javascript的动态性(解释执行,当然也有简单的预编译过程),this的指向在运行时才确定.这个特性在给我们带来迷惑的同时也带来了编程上的 自由和灵活,结合apply(call)方法,可以使JS变得异常强大.2.变化的this 在JavaScript中,this通常指向的是我们正在执行的函数本身,或者是指向该函数所属的对象(运行时).当我们在页面中定义