Javascript DOM(2)
一、value属性操作
1、具有value属性的三个标签：input、select、textarea
2、value的获取：ele.value
input=document.getElementById('input')
console.log(input.value);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>value属性操作</title>
<!-- input slect textarea -->
</head>
<body>
姓名：
<input type="text" name="user" id='input'><hr>
省份：
<select id='select'>
<optgroup>
<option value="1">江西省</option>
<option value="2">湖南省</option>
<option value="3">辽宁省</option>
</optgroup>
</select><hr>
简介
<textarea id='textarea' cols='30px' rows="10px"> </textarea>
<script type="text/javascript">
input=document.getElementById('input')
select=document.getElementById('select');
textarea=document.getElementById('textarea');
input.onclick=function(){
console.log(input.value); }
select.onclick=function(){
console.log(select.value);
}
textarea.onclick=function(){
console.log(textarea.value);
} </script> </body>
</html>
value属性演示
二、node节点的增删改查
1、创建节点
createElement(标签名) ：创建一个指定名称的元素。
2、添加节点
父项.appendChild(新节点) //在父项后面追加一个子节点
父项.insertBefore(新节点，某节点) //在某节点后面插入新节点
3、删除节点
父项.removeChild(待删除的节点):删除节点
4、替换节点（先删除后添加）
父项.replaceChild(新节点，旧节点) \\把旧节点替换成新节点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>节点操作</title>
<style type="text/css">
button{
width: 300px;
height:50px;
line-height: 50px;
background-color: #11A7C9FF;
text-align:center;
font-size: 20px;
color:white;
} </style>
</head>
<body>
<div id='d0'><h1>welcome</h1></div> <div id='d1'>
<p><button>插入图片</button></p>
</div> <div id='d2'>
<button>点我删除</button>
<div>我写错了，请删除我</div>
</div>
<button id='bb'>替换标题</button>
<script type="text/javascript"> // 节点的添加
document.getElementById('d1').children[0].onclick=function(){ // 1、创建一个节点
image=document.createElement("img");
image.setAttribute("src","赵奕欢.png");
image.setAttribute('width','200px'); // 2、找到触发插入图片的节点
let pele=document.getElementById('d1').children[0];
//添加节点
document.getElementById('d1').appendChild(image); } //节点的删除
document.getElementById('d2').firstElementChild.onclick=function(){ //1、获取到删除的节点
del_ele=document.getElementById('d2').firstElementChild.nextElementSibling;
if (del_ele){
button_del=document.getElementById('d2').firstElementChild;
//2、调用语法删除
document.getElementById('d2').removeChild(del_ele); } } //节点替换 welcome ->欢迎您的到来！ document.getElementById('bb').onclick=function(){
new_node=document.createElement('h1');
new_node.innerText='欢迎您的到来！'; replace_button=document.getElementById('bb');
replace_ele=document.getElementById('d0').firstElementChild;
fu_ele=document.getElementById('d0');
fu_ele.replaceChild(new_node, replace_ele); } </script> </body>
</html>
节点操作代码示例
节点操作总结：
1、找到需要加事件的元素.如：button
2、找到需要更改的元素；
3、新数据的创建；
4、根据节点操作语法进行操作即可。
三、JS常用事件
onclick 当用户点击某个对象时调用的事件句柄。
ondblclick 当用户双击某个对象时调用的事件句柄。 onfocus 元素获得焦点。 练习：输入框
onblur 元素失去焦点。 应用场景：用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证.
onchange 域的内容被改变。 应用场景：通常用于表单元素,当元素内容被改变时触发.（三级联动） onkeydown 某个键盘按键被按下。 应用场景: 当用户在最后一个输入框按下回车按键时,表单提交.
onkeypress 某个键盘按键被按下并松开。
onkeyup 某个键盘按键被松开。 onload 一张页面或一幅图像完成加载。 onmousedown 鼠标按钮被按下。
onmousemove 鼠标被移动。
onmouseout 鼠标从某元素移开。
onmouseover 鼠标移到某元素之上。
onmouseleave 鼠标从元素离开 onselect 文本被选中。
onsubmit 确认按钮被点击。
事件示例待补充
1、onload：
2、onsubmit：
3、事件传播：
4、onselect：
5、onchange:
6、onkeydown:
7、onmouseout与onmouseleave事件的区别：
四、二级联动实例
cslect标签.options.length=1;设置select标签option的个数为1个;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>二级菜单</title>
</head>
<body>
<select id='pro'>
<option value="0">请选择省份</option>
<option value="1">河北省</option>
<option value="2">广东省</option>
<option value="3">湖南省</option>
</select>
<select name='' id='city'>
<option>请选择城市</option>
</select> <script type="text/javascript">
let data={
"1":["石家庄","邯郸","邢台","衡水","保定"],
"2":["东莞","惠州"," 广州","汕头","深圳"],
"3":["长沙","张家界","湘潭","娄底"],
}
let pro=document.getElementById('pro');
let city=document.getElementById('city');
pro.onchange=function(){
pro_va=pro.value;
console.log(pro_va)
city_da=data[pro_va];
city.options.length=1;
for (var i=0;i<city_da.length;i++){
n=0;
let opt=document.createElement('option');
opt.innerText=city_da[i];
opt.value=n;
n+=1;
console.log(opt);
city.appendChild(opt); }
}
</script> </body>
</html>
二级菜单
五、原窗口切换显示不同内容实例
if(arr_nav[j]!==this)//arr_nav[j]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>导航图</title>
<style type="text/css">
div{
margin-top: 15px;
width:600px;
height: 200px;
line-height: 200px;
background-color: #32A6CCFF;
text-align:center; }
ul{
margin: 0;
padding: 0;
font-size: 0; }
ul li{
display: inline-block;
line-height: 200px;
font-size: 38px;
text-align: center;
width: 200px;
}
.c1{
background-color: #A662D2FF;
}
.hide{
display:none;
}
</style>
</head>
<body>
<div>
<ul>
<li class='nav'>第一章</li>
<li class='nav'>第二章</li>
<li class='nav'>第三章</li>
</ul>
</div>
<div class='hide c1'><h1>123</h1></div>
<div class='hide c1'><h1>456</h1></div>
<div class='hide c1'><h1>789</h1></div>
<script type="text/javascript">
let arr_nav=document.getElementsByClassName('nav'); let arr_ye=document.getElementsByClassName('c1');
for (var i=0;i<arr_nav.length;i++)
{ arr_nav[i].onclick=function(){
this.style.backgroundColor = 'red';
console.log(this);
this.style.color='white'; for (let j=0;j<arr_ye.length;j++ )
{ if(arr_nav[j]!==this)//arr_nav[j]
{ arr_ye[j].classList.add('hide');
arr_nav[j].style.backgroundColor = '#32A6CCFF';
arr_nav[j].style.color='black'; }
else
{
arr_ye[j].classList.remove('hide'); } }
} }
</script>
</body>
</html>
原窗口进行内容切换
Javascript DOM(2)的更多相关文章
- 读书笔记：JavaScript DOM 编程艺术（第二版）
读完还是能学到很多的基础知识,这里记录下,方便回顾与及时查阅. 内容也有自己的一些补充. JavaScript DOM 编程艺术(第二版) 1.JavaScript简史 JavaScript由Nets ...
- javascript DOM 操作 attribute 和 property 的区别
javascript DOM 操作 attribute 和 property 的区别 在做 URLRedirector 扩展时,注意到在使用 jquery 操作 checkbox 是否勾选时,用 at ...
- JavaScript DOM 编程艺术·setInterval与setTimeout的动画实现解析
先贴上moveElement()函数的大纲,为了方便观看,删了部分代码,完整版粘到文章后面. function moveElement(elementID,final_x,final_y,interv ...
- javascript DOM 操作
在javascript中,经常会需要操作DOM操作,在此记录一下学习到DOM操作的知识. 一.JavaScript DOM 操作 1.1.DOM概念 DOM :Document Object Mode ...
- javascript DOM操作之 querySelector,querySelectorAll
javascript DOM操作之 querySelector,querySelectorAll
- javaScript DOM JQuery AJAX
http://www.cnblogs.com/wupeiqi/articles/5369773.html 一 JavaScript JavaScript是一门编程语言,浏览器内置了JavaScript ...
- JavaScript : DOM文档解析详解
JavaScript DOM 文档解析 1.节点(node):来源于网络理论,代表网络中的一个连接点.网络是由节点构成的集合 <p title=“a gentle reminder”> ...
- JavaScript DOM 编程艺术（第2版）读书笔记（1）
JavaScript 简史 JavaScript 是Netscape公司与Sun公司合作开发的.在 JavaScript 1.0发布时,Netscape Navigator主宰着浏览器市场.微软在推出 ...
- javascript DOM操作HTML文档
文档对象模型(DOM)是W3C为解决浏览器混战时代不同浏览器环境之间的差别而制定的模型标准.W3C将文档对象模型定义为:是一个能让程序和脚本动态 访问和更新文档内容.结构和样式的语言平台.提供了标准的 ...
- JavaScript DOM编程艺术学习笔记（一）
嗯,经过了一周的时间,今天终于将<JavaScript DOM编程艺术(第2版)>这本书看完了,感觉受益匪浅,我和作者及出版社等等都不认识,无意为他们做广告,不过本书确实值得一看,也值得推 ...
随机推荐
- qt集成dsoframer.ocx打开office办公软件
最近一段时间真是事情太多了,前不久项目中一个嵌入office软件的问题,由于没有时间研究,且项目的需求是浏览word文档,偷了一个懒,把word文档转换成pdf文档,然后嵌入libcef浏览器给打开了 ...
- FALSE
Topic Link http://ctf5.shiyanbar.com/web/false.php 1)源代码分析 2)发现 输入的name和password不能相等相等但是sha1值却相等这在sh ...
- Java实现将任何编码方式的txt文件以UTF-8编码方式转存
本文利用JDK中的BufferedReader和BufferedWriter实现将任何编码方式的txt文件以UTF-8编码方式转存. UTF-8(8-bit Unicode Transformatio ...
- Ansible快速上手
ansible 是通过python 语言开发的自动化运维工具,可以实现批量系统设置.批量程序部署.批量执行命令等功能 下面是基于docker使用ansible测试示例,可以让新手快速上手使用 一.新建 ...
- Spring Boot 2.x （十二）：Swagger2的正确玩儿法
Swagger2简介 简单的来说,Swagger2的诞生就是为了解决前后端开发人员进行交流的时候API文档难以维护的痛点,它可以和我们的Java程序完美的结合在一起,并且可以与我们的另一开发利器Spr ...
- Spring中使用的设计模式
目录 Spring使用的设计模式 1.单例模式 2.原型模式 3.模板模式 4.观察者模式 5.工厂模式 简单工厂模式 工厂方法模式 6.适配器模式 7.装饰者模式 8.代理模式 9.策略模式 S ...
- .net core EFCore CodeFirst 迁移出现错误【No project was found. Change the current working directory or use the --project option. 】
PM> dotnet ef Migrations add Init No project was found. Change the current working directory or u ...
- WebClient下载文件
public void DownDile(string url) { WebClient client = new WebClient(); string URLAddress = @"ht ...
- 【Java】数组转List常见方式的对比
一.最常用通过 Arrays.asList(strArray) 方式,将数组转换List后,不能对List增删,只能查改,否则抛异常. 关键代码: List list = Arrays.asList( ...
- C# 利用反射动态加载dll
笔者遇到的一个问题,dll文件在客户端可以加载成功,在web端引用程序报错.解决方法:利用反射动态加载dll 头部引用加: using System.Reflection; 主要代码: Assembl ...