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% ...
随机推荐
- mysql系列--sql实现原理
count(*) MyISAM 引擎把⼀个表的总⾏数存在了磁盘上,因此执⾏ count(*) 的时候会直接返回这个数,效率很⾼:但是加了条件则不能快速返回⽽ InnoDB 引擎就麻烦了,它执⾏ cou ...
- 【笔记3-24】Python语言基础
环境搭建与语法入门 遇到问题解决问题 积累 英语单词 认真听讲,多敲代码 计算机是什么 计算机的组成 计算机的使用方式 TUI文本交互 GUI图形化交互 windows 的命令行 Shell.Term ...
- TensorFlow 卷积神经网络手写数字识别数据集介绍
欢迎大家关注我们的网站和系列教程:http://www.tensorflownews.com/,学习更多的机器学习.深度学习的知识! 手写数字识别 接下来将会以 MNIST 数据集为例,使用卷积层和池 ...
- Flume数据采集结合etcd作为配置中心在爬虫数据采集处理中的架构实践。
Apache Flume是一个分布式的.可靠的.可用的系统,用于有效地收集. 聚合和将大量日志数据从许多不同的源移动到一个集中的数据存储,但是其本身是以本地properties作为配置的,配置无法做到 ...
- Selenium系列（十四） - Web UI 自动化基础实战（1）
如果你还想从头学起Selenium,可以看看这个系列的文章哦! https://www.cnblogs.com/poloyy/category/1680176.html 其次,如果你不懂前端基础知识, ...
- Sprinboot 整合 RabbitMQ,RabbitMQ 消息重试机制
当消费者消费消息的时候,出现错误,RabbitMQ 本身会有
- QCustomPlot图形和图例同步方法
QCustomPlot图形和图例同步前言 我现在有几条折线,折线和图例一一对应,不管点击图例或者折线,相关的都高亮 QCustomPlot图形和图例同步方法 // 链接信号槽 m_plot即为QCus ...
- fstream
fstream file("b.txt", ios::in|ios::out|ios::app); mode ate - seek to the end of stream imm ...
- 1039 Course List for Student (25分)
Zhejiang University has 40000 students and provides 2500 courses. Now given the student name lists o ...
- JVM 理解性学习（一）
重新学习,重新理解 1.类加载过程等 验证:.class 文件加载到 JVM 里的时候,会验证下该文件是否符合 JVM 规范. 准备:给实体类分配内存空间,以及给类变量(static 修饰)分配&qu ...