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% ...
随机推荐
- 【深度学习】perceptron（感知机）
目录 1.感知机的描述 2.感知机解决简单逻辑电路,与门的问题. 2.多层感应机,解决异或门 个人学习笔记,有兴趣的朋友可参考. 1.感知机的描述 感知机(perceptron)由美国学者Frank ...
- [Java8教程]Java8新特性进阶集合
Java8新特性进阶集合 基于 AOP 抽离方法的重复代码 Java8:当 Lambda 遇上受检异常 Java8:对字符串连接的改进 Java8:Java8 中 Map 接口的新方法 Java8:当 ...
- Go语言库系列之dotsql
导读:能单独拎出SQL文件的某一行或几行执行,是不是非常有趣?今天我们来介绍一下这个有意思的库--dotsql. 背景介绍 dotsql不是ORM,也不是SQL查询语句的构建器,而是可以在一个SQL文 ...
- PHP7内核：源码分析的环境与工具
本文主要介绍分析源码的方式,其中包含环境的搭建.分析工具的安装以及源码调试的基本操作. 一.工具清单 PHP7.0.12 GDB CLion 二.源码下载及安装 $ wget http://php.n ...
- Go语言micro之快速搭建微服务
背景 go-micro给我们提供了一个非常便捷的方式来快速搭建微服务,而且并不需要提前系统了解micro,下面用一个简单的示例来快速实现一个服务. 创建Proto文件 因为我们要做微服务,那么就一定有 ...
- CUDA编程入门
CUDA是一个并行计算框架.用于计算加速.是nvidia家的产品.广泛地应用于现在的深度学习加速. 一句话描述就是:cuda帮助我们把运算从cpu放到gpu上做,gpu多线程同时处理运算,达到加速效果 ...
- 解决 node-sass 安装失败
在项目下新建.npmrc文件内容如下: sass_binary_site=https://npm.taobao.org/mirrors/node-sass/ phantomjs_cdnurl=http ...
- PTA数据结构与算法题目集(中文) 7-5
PTA数据结构与算法题目集(中文) 7-5 堆中的路径 7-5 堆中的路径 (25 分) 将一系列给定数字插入一个初始为空的小顶堆H[].随后对任意给定的下标i,打印从H[i]到根结点的路径. ...
- Python 参数使用总结
Python 中参数的传递非常灵活,不太容易记住理解,特整理如下备忘: 普通参数 即按照函数所需的参数,对应位置传递对应的值,可以对应 Java 中的普通参数 def max(a, b): if a ...
- DOS命令集
1.ASSOC显示或修改文件扩展名关联.ASSOC [.ext[=[fileType]]] .ext 指定跟文件类型关联的文件扩展名 fileType 指定跟文件扩展名关联的文件类型键 ...