get 获取方式练习题及dom基础
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title></title>
</head> <body>
<div id="div1"></div>
<div class="div2"></div>
</body> dom基础 </html>
<script>
//<!--文档对象模型
//第一步：取对象 -->
var div1 = document.getElementById('div1') // id取对象
var div2 = document.getElementsByClassName('div2')[] // class名取对象
//第二步操作对象
//1 改内容
div1.innerHTML = "<b>加粗</b>"
div2.innerText = "<b>加粗</b>"
//2 改样式
div1.style.color = "blue";
div1.style.fontFamily = "华文彩云";
//3 加事件
div1.onclick=(){
alert("点击事件出发")
}
//造新元素
var new_div=document.createElement("div")
//改样式/改内容
new_div.innerHTML="新元素"
document.body.appendChild(new_div);//增加
document.body.removeChild(new_div);//删除
</script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#s1{
width: 100px; //下拉按钮宽度100像素
}
</style>
</head>
<body>
<form action="" method="get"> //表单，提交方式为get <input type="text" name="t1" id="t1" /> //文本框，名字为t1，地址为t1
<input type="button" id="but1" value="添加"/> //名称为添加，地址为but1的按钮
<select size="" id="s1" > // 地址为s1，下拉项为7的下拉菜单
<input type="button" id="but2" value="删除"> //名称为删除，地址为but2的按钮 </select>
</form>
</body>
</html>
<script>
var s1=document.getElementById("s1") //创造新元素s1为从地址s1取得数
var t1=document.getElementById("t1")
var but1=document.getElementById("but1")
var but2=document.getElementById("but2")
but1.onclick=function(){ //当点击添加按钮时，
// 下拉菜单添加从文本框中提取的值
s1.innerHTML+="<option>"+t1.value+"</option>"
t1.value="";
}
but2.onclick=function(){
s1.removeChild(s1.selectedOptions[]); //当点击删除按钮时，选中的选项的元素被移除
} </script>
get 获取方式练习题及dom基础的更多相关文章
- JavaScript Dom基础-9-Dom查找方法; 设置DOM元素的样式; innerHTML属性的应用; className属性的应用; DOM元素上添加删除获取属性;
JavaScript Dom基础 学习目标 1.掌握基本的Dom查找方法 domcument.getElementById() Domcument.getElementBy TagName() 2.掌 ...
- Javascript DOM基础（一）概念
Dom基础概念: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" ...
- jQuery DOM基础
jQuery DOM基础 1.对元素内容的获取和修改: 表单用value(),普通元素用html()和text(). html() html(value)设置和获取html内容,有html标签会自动 ...
- js入门——Dom基础
DOM=DocumentObject Model,文档对象模型. Dom有三个不同的部分. 1.核心DOM 也是最基础的文档结构的标准模型 2.XMLDOM 针对XML文档的标准模型 3.HTML D ...
- 第一百一十三节，JavaScript文档对象，DOM基础
JavaScript文档对象,DOM基础 学习要点: 1.DOM介绍 2.查找元素 3.DOM节点 4.节点操作 DOM(Document Object Model)即文档对象模型,针对HTML和XM ...
- DOM基础（四）
每次写DOM的时候,就觉得好像没什么好写,因为涉及到知识点的方面的确不多,对于DOM来说,更多的还是练习为主.在练习的时候,最好能结合着js基础语法的知识点来学习.这样,在学习DOM的时候就不会那么枯 ...
- DOM基础（二）
在我之前写的DOM基础(一)的文章中提到过兼容性的问题,也就是在获取标签间文本信息的时候,早期的火狐版本是不支持innerText的,只支持textContent ,现在的火狐浏览器两者都支持.而IE ...
- BOM基础 计时器 定时器 DOM 基础
-------------------------------------------滴水穿石,我心永恒. day48 CSSJS 1 ECMA script 2 BOM browser object ...
- 第五讲 DOM基础
DOM基础: 什么是DOM:其实就是dovument,div获取.修改样式等等,但是不只是js的组成部分,而且还是一套规范,规定了这些浏览器怎么处理这些操作: 浏览器支持情况:IE(IE7-8,10% ...
随机推荐
- Hive内外表的区分方法及内外部差异
Hive内外部区分方法 查看hive元数据:进入mysql中hive元数据库,查看TBLS表,查看对应的表名和表类型: 在hive-cli界面:desc extended tablename,查看Ta ...
- 字节转换函数 htonl*的由来与函数定义...
字节转换字符由来: 在网络上面有着许多类型的机器,这些机器在表示数据的字节顺序是不同的, 比如i386芯片是低字节在内存地址的低端, intel处理器将32位的整数分4个连续的字节,并以字节序1-2- ...
- 热点 | github近期热点项目汇总
本文是近期Github热点项目的汇总,如果你想了解更多优秀的github项目,请关注我们公众号的github系列文章. 推荐 | 7个你最应该知道的机器学习相关github项目 热点 | 六月Gith ...
- 机器学习算法系列：FM分解机
在线性回归中,是假设每个特征之间独立的,也即是线性回归模型是无法捕获特征之间的关系.为了捕捉特征之间的关系,便有了FM分解机的出现了.FM分解机是在线性回归的基础上加上了交叉特征,通过学习交叉特征的权 ...
- rabbitmq++：RabbitMQ的消息确认ACK机制介绍
1):什么是消息确认ACK. 答:如果在处理消息的过程中,消费者的服务器在处理消息的时候出现异常,那么可能这条正在处理的消息就没有完成消息消费,数据就会丢失.为了确保数据不会丢失,RabbitMQ支持 ...
- 透过 ReentrantLock 分析 AQS 的实现原理
对于 Java 开发者来说,都会碰到多线程访问公共资源的情况,这时候,往往都是通过加锁来保证访问资源结果的正确性.在 java 中通常采用下面两种方式来解决加锁得问题: synchronized 关键 ...
- jQuery数组去重复
例如: var yearArray = new Array("三二一", "三二一", "学历", "学历", &quo ...
- 马哥教育PYTHON相关基础 笔记
1 python 推荐书籍 <python Cookbook> <learn python the hard way> <google's python class> ...
- SpringBoot整合Springfox-Swagger2
前言 不管Spring Boot整合还是SpringMVC整合Swagger都基本类似,重点就在于配置Swagger,它的精髓所在就在于配置. @ 目录 1.Swagger简介 2.整合前可能遇到的问 ...
- java 第六周上机练习 04.09
1.编写一个简单程序,要求数组长度为5,静态赋值10,20,30,40,50,在控制台输出该数组的值. int [] arr= {10,20,30,40,50}; for(int i=0;i<a ...