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之QComboBox定制
说起下拉框,想必大家都比较熟悉,在我们注册一些网站的时候,会出现大量的地区数据供我们选择,这个时候出现的就是下拉框列表,再比如字体选择的时候也是使用的下拉框,如图1所示.下拉框到处可见,作为一个图形库 ...
- 采坑：python base64
需求: 读取文本内容,对字符串进行base64加密 >>> str = 'aaaaaaaaaaaaaaaaaaa\nbbbbbbbbbbbbbbbbbbbbbbbbbbb\nccc ...
- MongoDB Export & Import
在使用MongoDB数据库的过程中,避免不了需要将数据进行导入和导出的工作,下面为具体的用法.注意 不同的数据库版本可能存在略微的差异,所以在使用时,先查看 --help 来进行确认.下面的为3.6版 ...
- Chapter 5 Blood Type——9
He grimaced. 他扮了一个鬼脸. "Or better," I continued, the pent-up annoyance flowing freely now, ...
- 使用RESTful风格开发Java Web
什么是RESTful风格? REST是REpresentational State Transfer的缩写(一般中文翻译为表述性状态转移),REST 是一种体系结构,而 HTTP 是一种包含了 RES ...
- 【ASP.NET Core快速入门】（五）命令行配置、Json文件配置、Bind读取配置到C#实例、在Core Mvc中使用Options
命令行配置 我们通过vs2017创建一个控制台项目CommandLineSample 可以看到现在项目以来的是dotnet core framework 我们需要吧asp.net core引用进来,我 ...
- 4.镜像管理【Docker每天5分钟】
Docker给PaaS世界带来的“降维打击”,其实是提供了一种非常便利的打包机制.该机制打包了应用运行所需要的整个操作系统,从而保证了本地环境和云端环境的高度一致,避免了用户通过“试错”来匹配不同运行 ...
- [十四]JavaIO之PrintStream
功能简介 PrintStream 为其他输出流添加了功能,使它们能够方便地打印各种数据值表示形式 装饰器模式中具体的装饰类 它提供的功能就是便捷的打印各种数据形式 FilterInputStrea ...
- [二十]JavaIO之StringReader 与 StringWriter
功能简介 还记得前面说过的CharArrayReader 和 CharArrayWriter吗? CharArray 是数据源 CharArrayReader 是读, 从一个CharArray 中读 ...
- Golang垃圾回收机制（一）
原文: http://legendtkl.com/2017/04/28/golang-gc/ 1. Golang GC 发展 Golang 从第一个版本以来,GC 一直是大家诟病最多的.但是每一个版本 ...