js dom演示

<div id="testInsert">
<p>测试insertBefore(newEle,插入子节点前元素)</p>
</div>

<div id="removeChild">
<p>测试removeChild1</p>
<p>测试removeChild2</p>
</div>

//根据name属性获取元素,返回数组
var ep = document.getElementsByName("p1");
ep[0].style.color = "red";

var ep2 = document.getElementsByTagName("p");
ep2[1].style.backgroundColor = "#0000FF";

//只获取 div1 下的所有p
var odiv = document.getElementById("div1");
var childP = odiv.getElementsByTagName("p");

//获取属性与设置属性
var ea = document.getElementsByTagName("a")[0];
var strHref = ea.getAttribute("href");
ea.setAttribute("href","http://www.baihe.com");

//获取子节点
var oul = document.getElementById("ul");
// var nodeli = oul.childNodes; 不建议使用,因为会自动将标签后的空格设为一个子节点
var nodeLi = oul.children;
nodeLi[0].style.color = "red";

//通过子元素获取父级节点
var parentP = document.getElementById("nodeP");
parentP.parentNode.style.backgroundColor = "#eee";

//创建元素节点
var oinput = document.createElement("input");
oinput.type = "text";
oinput.placeholder = "请输入内容";
document.getElementById("warpInput").appendChild(oinput);

var testInsert = document.getElementById("testInsert");
var oinput2 = document.createElement("input");
oinput2.type = "text";
oinput2.placeholder = "请输入内容";
//insertBefore(新元素,目标元素);
testInsert.insertBefore(oinput2, testInsert.getElementsByTagName("p")[0]);

//删除节点
var testRemove = document.getElementById("removeChild");
//removeChild(父元素的子节点);
testRemove.removeChild(testRemove.getElementsByTagName("p")[0]);

</script>
</body>

js dom演示的更多相关文章

Js DOM 详解
DOM事件类基本概念 DOM事件的级别 1.DOM0 element.onclick = function(){} 2.DOM2 element.addEventListener("cli ...
JS(DOM 和 BOM)
JS(DOM 和 BOM) 常说的JS(浏览器执行的JS)包含两部分:1.JS基础知识(语法)(ECMA262标准)2.JS-Web-API(W3C标准) W3C 标准中关于 JS 的规定有:(只管定 ...
货架工程项目之js dom实现项目工程进度图
笔者最近要负责有个项目工程网站的安装进度过程,实现的效果要求大概如下图所示由于笔者没有参与到数据库的制作,得知他们这个项目设计工序的时候就一个开始日期的和完成日期,连整个项目的安装结束时间都没有简直 ...
js DOM优化相关探索
我在这尝试两个方面:-->DOM与js -->DOM与浏览器 (最近在秒味视频上学到不少,哈哈哈) 一.DOM与js 1.js与dom的交互问题频繁的与dom交互,是一件浪费时间与金钱的 ...
js DOM的几个常用方法
<div id="div1">这是个测试</div> <p </p> <p </p> //js DOM的几个常用方法 / ...
JS DOM 来控制HTML元素
JS DOM 来控制HTML元素 (ps:这个有很多方法,挑一些详解,嘻嘻) 1.getElementsByName():获取name. ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ...
JS Dom节点操作demo!
通过黑马课程的学习,在这里分享一个js Dom中节点操作的小练习需求:使用js创建一个4*3的表格table. onload = function(){ function c(tagName){ r ...
JS DOM对象控制HTML元素详解
JS DOM对象控制HTML元素详解方法: getElementsByName() 获取name getElementsByTagName() 获取元素 getAttribute() 获取元素 ...
css3动画和JS+DOM动画和JS+canvas动画比较
css3兼容:IE10+.FF.oprea(animation):safari.chrome(-webkit-animation) js+dom:没有兼容问题: js+canvas:IE9+:(性能最 ...

随机推荐

vue+ajax的实现
html <tr> <td>用户名</td> <td id="t01"><input type="text" ...
微信小程序踩坑之前端问题处理篇
近期完成了一个小程序,自己做的前后端开发.真是惨哭我了o(╥﹏╥)o,下面几点希望大家可以避雷. 首先,想先介绍一下我遇到问题的解决思路: 1.先在postman调试接口,看数据获取是否正常, 2.在 ...
docker 镜像删除
(我们以删除 php-fpm 这个镜像为例子) 一.查看镜像的 ID [root@localhost ~]# docker images REPOSITORY TAG IMAGE ID CREATED ...
Shiro简单加密服务
编码/加密在涉及到密码存储问题上,应该加密 / 生成密码摘要存储,而不是存储明文密码.比如之前的 600w csdn 账号泄露对用户可能造成很大损失,因此应加密 / 生成不可逆的摘要方式存储. Sh ...
黎活明8天快速掌握android视频教程--22_访问通信录中的联系人和添加联系人
Android系统中联系人的通讯录的contentProvide是一个单独的apk,显示在界面的contact也是一个独立的apk,联系人apk通过contentProvide访问底层的数据库. 现在 ...
MySQL8.0窗口函数实践及小结
MySQL8.0之前,做数据排名统计等相当痛苦,因为没有像Oracle.SQL SERVER .PostgreSQL等其他数据库那样的窗口函数.但随着MySQL8.0中新增了窗口函数之后,针对这类统计 ...
【转载】npx 真香
npx 主要提供了一些便捷操作: 调用项目安装的模块避免全局安装模块使用不同版本的 node 执行 GitHub 源码原文地址:http://www.ruanyifeng.com/blog/20 ...
入门大数据---Spark_Streaming整合Kafka
一.版本说明 Spark 针对 Kafka 的不同版本,提供了两套整合方案:spark-streaming-kafka-0-8 和 spark-streaming-kafka-0-10,其主要区别如下 ...
VC单选按钮控件(Radio Button)用法（转）
先为对话框加上2个radio button,分别是Radio1和Radio2. 问题1:如何让Radio1或者Radio2默认选上?如何知道哪个被选上了? 关键是选上,“默认”只要放在OnInitDi ...
洛谷 P2298 【Mzc和男家丁的游戏】
这道题还是挺水的,广搜模板题,注意一下细节就是了. :码代上上代码: #include <bits/stdc++.h> using namespace std; int n , m , s ...

js dom演示

js dom演示的更多相关文章

随机推荐

热门专题