JS---DOM---元素相关的操作方法
1. 追加子元素
my$("dv").appendChild(obj);
my$("dv").insertBefore(obj, my$("dv").firstElementChild);
my$("btn2").onclick = function () {
//移除父级元素中第一个子级元素
my$("dv").removeChild(my$("dv").firstElementChild);
};
4. 点击按钮删除div中所有的子级元素,先判断父级元素中有没有第一个子元素
my$("btn3").onclick = function () {
//点击按钮删除div中所有的子级元素
//判断父级元素中有没有第一个子元素
while (my$("dv").firstElementChild) {
my$("dv").removeChild(my$("dv").firstElementChild);
}
综合案例:
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>title</title>
<style>
div {
width: 200px;
height: 200px;
border: 1px solid pink;
}
</style>
</head> <body>
<input type="button" value="显示效果" id="btn" />
<input type="button" value="干掉第一个子元素" id="btn2" />
<input type="button" value="干掉所有子元素" id="btn3" />
<div id="dv"></div>
<script src="common.js"></script>
<script> var i = 0;
my$("btn").onclick = function () {
i++;
var obj = document.createElement("input");
obj.type = "button";
obj.value = "按钮" + i;
//my$("dv").appendChild(obj);//追加子元素
//把新的子元素插入到第一个子元素的前面
my$("dv").insertBefore(obj, my$("dv").firstElementChild);
//my$("dv").replaceChild();---自己玩
}; my$("btn2").onclick = function () {
//移除父级元素中第一个子级元素
my$("dv").removeChild(my$("dv").firstElementChild);
}; my$("btn3").onclick = function () {
//点击按钮删除div中所有的子级元素
//判断父级元素中有没有第一个子元素
while (my$("dv").firstElementChild) {
my$("dv").removeChild(my$("dv").firstElementChild);
} };
</script>
</body> </html>
如果只创建一个元素,如何操作?
有则删除,无则创建
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>title</title>
<style>
div {
width: 200px;
height: 200px;
border: 1px solid red;
}
</style>
</head> <body>
<input type="button" value="显示效果" id="btn" />
<div id="dv"></div>
<script src="common.js"></script>
<script>
//有则删除,无则创建 //先判断有没有,有就删除,然后再创建
my$("btn").onclick = function () {
//判断,div中有没有这个按钮,有就删除
//判断这个按钮的子元素是否存在
if (my$("btn2")) {//如果为true就有
my$("dv").removeChild(my$("btn2"));
}
var obj = document.createElement("input");
obj.type = "button";
obj.value = "按钮";
obj.id = "btn2";
my$("dv").appendChild(obj);
}; </script>
</body> </html>
反之:无则创建,如下:
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>title</title>
<style>
div {
width: 200px;
height: 200px;
border: 1px solid red;
}
</style>
</head> <body>
<input type="button" value="显示效果" id="btn" />
<div id="dv"></div>
<script src="common.js"></script>
<script> my$("btn").onclick = function () {
//判断这个按钮的子元素是否存在
if (!my$("btn2")) {//如果为true就有
var obj = document.createElement("input");
obj.type = "button";
obj.value = "按钮";
obj.id = "btn2";
my$("dv").appendChild(obj);
} }; </script>
</body> </html>
JS---DOM---元素相关的操作方法的更多相关文章
- js DOM优化相关探索
我在这尝试两个方面:-->DOM与js -->DOM与浏览器 (最近在秒味视频上学到不少,哈哈哈) 一.DOM与js 1.js与dom的交互问题 频繁的与dom交互,是一件浪费时间与金钱的 ...
- 获取 js DOM元素中绑定的所有事件,模仿 chrome getEventListeners
偶尔看到了这个问题,如何用JS获取元素某一事件上绑定的所有Listener? 突然觉得好像是有解决办法的,查了下,在 chrome 下,支持 window.getEventListeners(obj) ...
- JS DOM元素的操作(创建,添加,删除,和修改属性)
1.1 创建 DOM 元素以及相应的追加方式 1.1.1 创建:document.createElement('div'); 添加: fatherEle.appendChild(ele); appe ...
- JS DOM元素
// 为element增加一个样式名为newClassName的新样式 function addClass(element, newClassName) { var value = element.c ...
- js DOM 元素ID就是全局变量
有人在twitter上提到了:在Chrome的JavaScript终端中,你只需要输入一个元素的ID,就可以访问到这个元素.@johnjbarton给了解释,这是因为所有的元素ID都是全局变量.本文再 ...
- JS DOM视频相关的知识
1.实现点击a标签改变图片时,如果a的href属性有一个目标网址,但是点击又必须跳转到另外一张图,往往会最后跳转到目标网址,可以在onclick事件函数中加入ruturn false,阻止跳转到页面. ...
- js dom元素加载完成执行
//dom ready执行 function ready(fn){ if(document.addEventListener){ document.addEventListener('DOMConte ...
- 第六章 组件 67 使用ref获取DOM元素和组件引用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...
- JS操作DOM元素属性和方法
Dom元素基本操作方法API,先记录下,方便以后使用. W3C DOM和JavaScript很容易混淆不清.DOM是面向HTML和XML文档的API,为文档提供了结构化表示,并定义了如何通过脚本来访 ...
- riot.js教程【三】访问DOM元素、使用jquery、mount输入参数、riotjs标签的生命周期
前文回顾 riot.js教程[二]组件撰写准则.预处理器.标签样式和装配方法 riot.js教程[一]简介 访问DOM元素 你可以通过this.refs对象访问dom元素 而且还有大量的属性简写方式可 ...
随机推荐
- shell 读取文件第几列
读取文件的第2列和第4列: cat filename.txt | awk '{ print $2 $4 }' 求文件file1.txt的第二列 和 file2.txt(单列文件)的交集: cat fi ...
- windows下RocketMQ下载安装教程
一.下载(原文链接:http://www.studyshare.cn/software/details/1183/0 ) 1.官网下载:下载地址 2.百度网盘下载:下载地址 提取码:0g5a ja ...
- 数据库Oracle的安装与卸载
Oracle的安装步骤: 口令管理里面有scott,需要重新设置其口令,scott是测试表,里面有现成的表可以用来做实验. Oracle 自带客户端工具 SQLPlus sys 用户登录命令: sy ...
- ESP8266调试(UDP调试)
1.设置STA模式 AT+CWMODE=1 2.加入热点 AT+CWJAP="Admin_name","password" 3.开启单路连接 AT+CIPMUX ...
- ubuntu文件权限
以root身份登录linux. 在某一目录下执行 ls -al,显示类似如下内容: dr-xr-x---. 14 root root 4096 Aug 27 09:38 . dr-xr-xr-x. 2 ...
- Appium之实操(了解配置项)
使用Appium,测试对象APP的运行环境有两种:① 真实设备 如手机 ②模拟器 如夜神 连接真实设备: - 进入开发者模式,启动usb调试 - 在电脑上 执行adb命令 adb devices ...
- CMFCPropertyGridCtrl的属性改变事件代码
//用于区分Prop, 使用SetData, GetData方法 CMFCPropertyGridProperty* pProp1 = new CMFCPropertyGridProperty(str ...
- postman设置全局变量
//处理token var jsn = JSON.parse(responseBody) console.log(jsn.access_token) //把access_token设置到全局变量中 p ...
- 21.跨域和CORS
一 跨域 同源策略(Same origin policy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响.可以说Web是构建在同源策略基础之上的 ...
- redis(3)--redis原理分析
过期时间设置 在Redis中提供了Expire命令设置一个键的过期时间,到期以后Redis会自动删除它.这个在我们实际使用过程中用得非常多.EXPIRE命令的使用方法为EXPIRE key secon ...