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版)>这本书看完了,感觉受益匪浅,我和作者及出版社等等都不认识,无意为他们做广告,不过本书确实值得一看,也值得推 ...
随机推荐
- 服务器Windows 2008R2 C盘清理
今天因为连服务器的时间慢了很多,然后看了一下C盘的空间,OMG剩下222K.然后一直上网找解决方案. 按照惯例,应该开一个360看看,C盘清理啊,搬家什么的.360告知的竟然是没有可以搬移的,所以,这 ...
- 设计模式总结篇系列：单例模式（SingleTon）
在Java设计模式中,单例模式相对来说算是比较简单的一种构建模式.适用的场景在于:对于定义的一个类,在整个应用程序执行期间只有唯一的一个实例对象.如Android中常见的Application对象. ...
- 重磅！阿里巴巴工程师获得 containerd 社区席位，与社区共建云时代容器标准
重磅!阿里巴巴工程师获得 containerd 社区席位,与社区共建云时代容器标准 11 月 29 日,CNCF containerd 社区正式宣布:两位阿里巴巴工程师正式获得 containerd ...
- kubernetes进阶之一：简单例子
kubernetes 从一个简单例子开始 参考 <kubernetes 权威指南>一节的 从一个简单例子开始,操作实录. 一.Java Web 应用结构 二.启动MySql服务 1.首先为 ...
- Docker最全教程——从理论到实战（六）
托管到腾讯云容器服务 托管到腾讯云容器服务,我们的公众号“magiccodes”已经发布了相关的录屏教程,大家可以结合本篇教程一起查阅. 自建还是托管? 在开始之前,我们先来讨论一个问题——是自建 ...
- Supervisor 为服务创建守护进程
今天需要再服务上部署一个.net 方面的项目:当时开启服务的命令只能在前台执行:使用nohub CMD &等放在后台开启服务都会宕机:所以搜寻了Supervisor 这个解决办法,为服务创建守 ...
- javascript基础修炼(7)——Promise，异步，可靠性
开发者的javascript造诣取决于对[动态]和[异步]这两个词的理解水平. 一. 别人是开发者,你也是 Promise技术是[javascript异步编程]这个话题中非常重要的,它一度让我感到熟悉 ...
- [Go] go get获取官方库被墙解决
1.直接在github上clone对应的代码 , 地址为: https://github.com/golang/xxxxxxx.git xxxxxxx为所缺的库名 , 比如net库 text库 h ...
- struct的匿名用法详解
Go只提供类型而不用写字段名的方式,也就是匿名字段,也称为嵌入字段. 当匿名字段是一个struct的时候,那么这个struct所拥有的全部字段都被隐式地引入了当前定义的这个struct. 举个例子,看 ...
- LIMIT与OFFSET的使用
limit 与 offset:从下标0开始 offset X 是跳过X个数据 limit Y 是选取Y个数据 limit X,Y 中X表示跳过X个数据,读取Y个数据 例如: sele ...