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% ...
随机推荐
- PAT-B 1040. 有几个PAT（25）
1040. 有几个PAT(25) 时间限制 120 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 CAO, Peng 字符串APPAPT中包含了两个单 ...
- 《JavaScript 模式》读书笔记（5）— 对象创建模式1
这又是一个新的开始,对象的重要性不言而喻.在JavaScript中创建对象是十分容易的,之前聊过的对象字面量和构造函数都可以达到目的.但是本篇中,我们越过那些方法,以寻求一些额外的对象创建模式. 本篇 ...
- OSLab:实模式与保护模式
日期:2019/5/18 12:00 内容:操作系统实验作业:x86:IA-32:实模式与保护模式. PS:如果我们上的是同一门课,有借鉴代码的铁汁请留言告知嗷.只是作业笔记,不推荐学习. 一.实模式 ...
- Java生鲜电商平台-电商中"再来一单"功能架构与详细设计(APP/小程序)
Java生鲜电商平台-电商中"再来一单"功能架构与详细设计(APP/小程序) 说明:在实际的业务场景中(无论是TO B还是TO C)不管是休闲食品.餐饮.水果.日用百货.母婴等高频 ...
- [React]Context机制
在React中,Context机制是为了方便在组件树间传递数据. 例子 import React from 'react' const themes={ light:"亮色主题", ...
- iOS 响应链
一.UIResponder app 使用响应者对象接收和处理事件,只有继承 UIResponder 的类,才能处理事件. UIApplication.UIView.UIViewController 都 ...
- spring5之容器始末源码赏析 (一)总览
首先,本系列并不是以介绍spring5 的新特性为主,之所以以spring5为标题,是因为即将赏析的源码来自最新的spring版本.虽说是spring最新版本,但是容器的整个生命周期与之前版本相比,并 ...
- Redis这些知识你知道吗？
1.什么是redis? Redis 是一个基于内存的高性能key-value数据库. 2.Redis的特点 Redis本质上是一个Key-Value类型的内存数据库,很像memcached,整个数据库 ...
- 模块 subprocess 交互shell
subprocess 交互shell 执行shell命令, 与操作系统交互 三种执行命令的方法 subprocess.run(*popenargs, input=None, timeout=None, ...
- Html,Css遇到的bug2020031601
td,里面jquery设置height,设置成功也没有效果. div可以成功设置,并产生效果. 可能是td,div有一些隐藏的特性不同导致的.