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+:(性能最 ...

随机推荐

041.Kubernetes集群网络-K8S网络策略
一 Kubernetes网络策略 1.1 策略说明为实现细粒度的容器间网络访问隔离策略,Kubernetes发布Network Policy,目前已升级为networking.k8s.io/v1稳定 ...
恕我直言你可能真的不会java第3篇：Stream的Filter与谓词逻辑
一.基础代码准备建立一个实体类,该实体类有五个属性.下面的代码使用了lombok的注解Data.AllArgsConstructor,这样我们就不用写get.set方法和全参构造函数了.lombok ...
Linux环境下操作Oracle数据库命令
A增量备份在Oracle用户下进行: 1.su – oracle, pwd to make sure. 2.脚本位置more /home/oracle/arch.sh 3.运行脚本 ./arch.s ...
cb47a_c++_STL_算法_排列组合next_prev_permutation
cb47a_c++_STL_算法_排列组合next_prev_permutation 使用前必须先排序.必须是 1,2,3或者3,2,1.否者结果不准确.如果, 1,2,4,6.这样数据不会准确nex ...
C#结构体struct -0029
结构体有时候我们仅需要一个小的数据结构,类提供的功能多于我们需要的功能:考虑到性能原因,最好使用结构体. 结构体是值类型,存储在栈中或存储为内联(如果结构体是存储在堆中的另一个对象的一部分). 例如 ...
opencv C++矩阵操作
int main(){ cv::Mat src1=(cv::Mat_<float>(2,3)<<1,2,3,4,5,6); cv::Mat src2=(cv::Mat_< ...
java 加密与解密艺术
视频来自黑马程序员公开课对称加密之后的密文可能存在乱码,这些乱码无法识别,信息经过加密后会变成一串毫无规律的二进制串,此时再选择一种编码方式来展示,通常是 BASE64 格式的编码. 为了解决这个问 ...
MySql索引要注意的8个事情
设计好MySql索引可以让你的数据库查询效率大为提高.设计MySql索引的时候,有一些问题需要值得我们注意的: 1,创建MySql索引对于查询占主要的应用来说,索引显得尤为重要.很多时候性能问题很简 ...
前端基础：HTTP 协议详解
参考:https://kb.cnblogs.com/page/130970/#httpmeessagestructe HTTP协议是无状态的 http协议是无状态的,同一个客户端的这次请求和上次请求是 ...
Nginx配置upstream实现负载均衡1
如果Nginx没有仅仅只能代理一台服务器的话,那它也不可能像今天这么火,Nginx可以配置代理多台服务器,当一台服务器宕机之后,仍能保持系统可用.具体配置过程如下: 1. 在http节点下,添加ups ...

js dom演示

js dom演示的更多相关文章

随机推荐

热门专题