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% ...
随机推荐
- ubuntu初始化root密码
输入 sudo passwd root 输入两遍密码.
- STM32CubeMx——串口收发
生成代码 1.配置串口1 2.选择模式 3.开中断 4.其他的RCC.调试都一样,弄完直接生成代码. 串口发送 1.定义一个用来测试的数组并初始化 /* USER CODE BEGIN 0 */ ui ...
- 构建一个简单的 Google Dialogflow 聊天机器人【上】
概述 本教程将向您展示如何构建一个简单的Dialogflow聊天机器人,引导您完成Dialogflow的最重要功能.您将学习如何: 创建Dialogflow帐户和第一个Dialogflow聊天机器人, ...
- 用c#判断回文数和降序数
题目:编一个程序,输入一个正整数,判定它是否为回文数和降序数.当输入的数为0时,则退出程序,否则继续循环执行程序. 所谓“降序数”是指一个自然数的低位数字不大于高位数字的数.例如: 64, 55, 3 ...
- Java 运行时数据区
写在前面 本文描述的有关于 JVM 的运行时数据区是基于 HotSpot 虚拟机. 概述 JVM 在执行 Java 程序的过程中会把它所管理的内存划分为若干个不同的数据区域.这些区域都有各自的用途,以 ...
- Educational Codeforces Round 83 (Rated for Div. 2)
A. Two Regular Polygons 题意:给你一个 正n边形,问你能否以这个 n 的其中一些顶点组成一个 m边形, 思路 :如果 n % m == 0 ,就可 收获:边均分 B. Bogo ...
- 面试总结：关于MySQL事务的10个问题常见面试问答（FQA）
学习关系型数据库MySQL是很好的切入点,大部分人工作中用惯了CRUD,对面试官刨根问底的灵魂拷问你还能对答如流吗?我们有必要了解一些更深层次的数据库基础原理. 文章每周持续更新,各位的「三连」是对我 ...
- 1025 PAT Ranking (25 分)
Programming Ability Test (PAT) is organized by the College of Computer Science and Technology of Zhe ...
- Node.js快速创建一个Express应用的几个步骤
Node.js 的 Express 框架学习 转载和参考地址: https://developer.mozilla.org/zh-CN/docs/Learn/Server-side/Express_N ...
- Nordic nRF52820超低功耗蓝牙5.2 SoC芯片-低端无线连接方案首选
nRF52820是功耗超低的低功耗蓝牙 (Bluetooth Low Energy /Bluetooth LE).蓝牙mesh.Thread.Zigbee和2.4 GHz专有低端无线连接解决方案.nR ...