JavaScript获取和创建元素
1、JavaScript中获取元素
常用的获取document中元素的方法:
1) document.getElementById() =》通过元素ID获取文档中特定的元素,如获取 id = "button1" 的按钮 可以写成: var btn = document.getElementById("button1");
2) document.getElementByTagName() =>获取特定标签的元素集合(返回为 NodeList 结果),因为一个document中可能会有多个该tag的元素。
如: var divs = documet.getElementByTagName("div"); 获取文档中所有的div;
divs.length 获取元素个数,divs[0]取得第一个元素
2、动态创建元素并添加到页面中
1)//创建一块文本,并添追加到文档的最末尾
function addText(){
var text = document.getElementById("txtarea").value;
var newText = document.createTextNode(text);
var newPart = document.createElement("P");
newPart.appendChild(newText);
var body = document.getElementsByTagName("body")[0];
body.appendChild(newPart);
return false;
}
2)//创建一个超链接,并指定url
function addLink() {
var linkA = document.createElement("a");
linkA.href = "http://www.baidu.com";
linkA.innerText = "GOTO...";
linkA.title = "goto another url";
var body = document.getElementsByTagName("body")[0];
body.appendChild(linkA);
alert("添加成功!");
}
3)创建一个按钮并指定单击事件
var btnCnt = 0;
function addNewBtn(){
btnCnt += 1;
var btn = document.createElement("input");
btn.type = "button";
btn.value = "new btn" + btnCnt;
btn.id = "btn" + btnCnt;
btn.onclick = newBtnClicked;
var div = document.getElementById("div1");
div.appendChild(btn);
alert("OK");
}
function newBtnClicked() {
alert("New button clicked here");
}
4)删除指定的按钮
function removeBtn(){
if(btnCnt == 0){
alert("No button to delete");
return;
}
var btn = document.getElementById("btn" + btnCnt);
if(btn != null){
document.getElementById("div1").removeChild(btn);
alert("removed");
btnCnt -= 1;
}
else{
alert("Not found btn" + btnCnt);
}
}
注:因为 btn 是在 div 中添加的,因此需要从DIV中删除,而不是直接从document中删除。
5)除了增加、删除外,还可以调用 节点.insertBefor(new,old)的方式在节点的old前面插入新元素;或节点.replace(new ,old)方法替换节点处的元素
JavaScript获取和创建元素的更多相关文章
- Javascript:DOM动态创建元素实例应用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Javascript 获取文档元素
一.getElementById() 参数:id 属性,必须唯一. 返回:元素本身.若 id 不唯一,则返回第一个匹配的元素. 定义的位置:仅 document(即:除 document 之外的元素调 ...
- 使用JavaScript获取CSS伪元素属性
我们可以通过DOM元素的 style 属性获取基本的CSS样式值, 但怎么获取CSS伪元素属性呢? 如下 // 获取 .element:before 的 color 值 var color = win ...
- js | javascript获取和设置元素的属性
获取和设置元素的内容: var nv = document.getElementById("pid"); alert(nv.innerHTML); nv.innerHTML=&qu ...
- 使用javascript获取父级元素
之前jquery用多了习惯了它那简洁的写法,后来使用ES6进行编写的时候,需要使用类似$(this).parent();来获取点击元素所属的父级元素时发现,es6中的class下的this指向是cla ...
- javascript获取数组最后一个元素(三种方法)
JavaScript 获取Array末尾元素 一.JavaScript pop() 方法 pop() 方法用于删除并返回数组的最后一个元素. 注意:pop() 方法将删除 arrayObject 的最 ...
- JavaScript DOM动态创建(声明)Object元素
http://www.cnblogs.com/GuominQiu/archive/2011/04/01/2002783.html 一文提及“等整个页面加载完毕后,根据用户所选的阅读机类型,再用Java ...
- JavaScript获取HTML DOM节点元素详解(转)
在Web运用程序特别是Web 2.0程序开发中,经常要获取页面中某个元素,然后更新该元素的样式.内容等.如何获取要更新的元素,是首先要处理的疑问. 51CTO推荐阅读:JavaScript DOM文档 ...
- javascript数组操作(创建、元素删除、数组的拷贝)
这篇文章主要介绍了javascript数组操作,包括创建.元素的访问.元素删除.数组的拷贝等操作,还有其它示例,需要的朋友可以参考下 1.数组的创建 复制代码 代码如下: var arrayObj = ...
随机推荐
- 手机app微信支付后台处理流程
第一步:客户在手机app确认订单,提交订单后,app将订单详情传给后台,后台将订单存入数据库,将存入数据库的id返回给app. 第二步:这时候手机端app会让客户选择哪种付款方式,我们做的是微信,所以 ...
- java 线程 理解 解析
1 线程的概述 进程:正在运行的程序,负责了这个程序的内存分配,代表了内存中的执行区域. 线程:就是在一个进程中负者一个执行路径. 多线程:就是在一个进程中多个执行路径同时执行. 假象: 电脑上的程序 ...
- C# Using的用法
C#里面Using有两种用法: 1.作为指令. using+命名空间,导入其他命名空间中定义的类型,这样可以在程序中直接用命名空间中的类型,不必指定命名空间: 命名空间是.NET程序在逻辑上的组织结构 ...
- 拥抱.NET Core系列:Logging (1)
在之前我们简单介绍了 .NET Core 中的 DI组件,没来及了解的童鞋可以翻翻我之前的文章. 接下来会对 .NET Core 中的 Logging 进行介绍. 本文中使用了"Micros ...
- Java之字符串String,StringBuffer,StringBuilder
String类: String类即字符串类型,并不是Java的基本数据类型,但可以像基本数据类型一样使用,用双引号括起来进行声明.在Java中用String类的构造方法来创建字符串变量. 声明字符串: ...
- Java数据类型+练习
java基础数据类型: 四类八种: 1, 整数型 byte 2的8次方(取值范围--<-128~127>)--1个字节 short 2的16次方--2个 int 2的32次方- ...
- UltraEdit MAC破解方法
在终端输入 printf '\x31\xC0\xFF\xC0\xC3\x90' | dd seek=$((0x92D370)) conv=notrunc bs=1 of=/Applications/U ...
- 如何使用OLAMI自然语言理解开放平台API制作自己的智能对话助手小程序
我们经常在电影中看到机器和人对答如流,随着越来越多自然语言开放平台的出现,IT爱好者制作一个自己的APP或者小玩具等逐渐可以变为现实. 自然语言对话即你的APP或者你制作的工具.机器人等能够对用户输入 ...
- python web开发之django
上一篇介绍了python-web.py的开发,本节课我们详细说明django的开发与使用. 简介及可以学习到的内容: 1.Python下有许多款不同的 Web 框架.Django是重量级选手中最有代表 ...
- vue 实现 tomato timer(蕃茄钟)
近期在学习[时间管理]方面的课程,其中有一期讲了蕃茄工作法,发现是个好多东西.蕃茄工作法核心思想就是:工作25分钟,休息5分钟.如果您好了解更多可以自行度娘. 在加上本人是一个程序猿,就想用程序的方式 ...