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 QClipBoard
部分思路借鉴这篇文章: Qt学习之路(55): 剪贴板操作 剪贴板,这个词相信大家都比较熟悉,比如使用offiece的时候就会有粘贴板,文本编辑的时候Ctrl+C和Ctrl+V的使用, ...
- 带着萌新看springboot源码05
上一节走了一遍从浏览器发出请求到得到向页面的流程,基本的功能是已经实现了.但是现在啊,我想自定义一个拦截器(拦截器可以做用户登录验证,如果登录了,就让你通过,如果没有登录,就重定向登录页面),这里就不 ...
- 洛谷：P1036：选数
题目描述 已知 nn 个整数 x1,x2,…,xnx1,x2,…,xn ,以及 11 个整数 kk ( k<nk<n ).从 nn 个整数中任选 kk 个整数相加,可分别得到一系列的 ...
- Chapter 5 Blood Type——4
"Does he mean you?" Jessica asked with insulting astonishment in her voice. “他对你有意思吗?”Jess ...
- .NET: 使用.NET Core CLI开发应用程序
要开发.NET Core应用程序,除了使用强大的Visual Studio之外,还可以使用.NET Core CLI..NET Core CLI (Command-Line Interface),也就 ...
- python学习笔记(八)、特殊方法、特性和迭代器
1 新式类和旧式类 python类的工作方式在不断变化.较新的Python2版本有两种类,其中旧式类正快速退出舞台.新式类时Python2.2 引入的,提供了一些额外功能,如支持函数super 和 p ...
- Java开发笔记（二）Java工程的帝国区划
上一篇文章介绍了如何运行了第一个Java程序“Hello World”.然而这个开发环境看起来那么陌生,一个个名字符号完全不知道它们是干啥的呀,对于初学者来说,好比天书一般,多看几眼感觉都要走火入魔了 ...
- 【转】Android必备知识点- Android文件（File）操作
Android 使用与其他平台上基于磁盘的文件系统类似的文件系统. 本文讲述如何使用 Android 文件系统通过 File API 读取和写入文件. File 对象适合按照从开始到结束的顺序不跳过地 ...
- Numpy常用概念-对象的副本和视图、向量化、广播机制
一.引言 在我们操作数组的时候,返回的是新数组还是原数组的链接,我们就需要了解对象副本和视图的区别. 向量化和广播是numpy内部实现的基础. 二.对象副本和视图 我们应该注意到,在操作数组的时候返回 ...
- [ArcGIS API for JavaScript 4.8] Sample Code-Get Started-widgets简介
[官方文档:https://developers.arcgis.com/javascript/latest/sample-code/intro-widgets/index.html] 一.Intro ...