JavaScript（二）--DOM和BOM

文章目录

BOM对象
DOM对象
操作表单
jQuery
事件
事件注册

BOM对象

1、window 代表浏览器窗口

window.alert(11);//可以弹窗

2、Navigator 封装了浏览器的信息

navigator.appName
"Netscape"
navigator.appVersion
"5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.88 Safari/537.36"

3、screen 屏幕尺寸

screen.width
1366
screen.height
768

4、location 代表当前页面的URL信息

host:"www.baidu.com"
hostname:"www.baidu.com"
href:"https://www.baidu.com/index.php?tn=02049043_8_pg&ch=9"
origin:"https://www.baidu.com"
pathname:"/index.php"
protocol:"https:"
reload:ƒ reload() // 刷新网页
// 设置新的地址
location.assign('https://blog.kuangstudy.com/')

5、document 代表当前页面
可以获取文档的树节点

document.title
"百度一下，你就知道"
document.title='哈哈哈'
"哈哈哈"

6、history 代表浏览器的历史记录

history.back() //后退
history.forward() //前进

DOM对象

1、获得dom节点

//获得id选择器
			var father=document.getElementById("father");
			//获得标签选择器
			var h1=document.getElementsByTagName("h1");
			//获得类选择器
			var p1=document.getElementsByClassName("p2");
			var child=father.children;//获得父节点下面的子节点

2、更新节点

<div id="id1">

</div>

<script>
    var id1 = document.getElementById('id1');
</script>

操作文本

-  `id1.innerText='456'` 修改文本的值
-  `id1.innerHTML='<strong>123</strong>'` 可以解析HTML文本标签

操作css

id1.style.color = 'yellow'; // 属性使用 字符串 包裹
id1.style.fontSize='20px'; // - 转 驼峰命名问题
id1.style.padding = '2em'

3、删除节点

删除节点的步骤：先获取父节点，在通过父节点删除自己不可以自己删除自己

var self=document.getElementById("p1");
			var father=self.parentElement;
			//father.removeChild(self);//父节点删除自己
			// 删除是一个动态的过程；
    father.removeChild(father.children[0])
    father.removeChild(father.children[1])
    father.removeChild(father.children[2])//可能不存在，因为删除了一个下标就会往前移动

== 删除多个节点的时候，children 是在时刻变化的，删除节点的时候一定要注意 ==

4、插入节点

我们获得了某个Dom节点，假设这个dom节点是空的，我们通过 innerHTML 就可以增加一个元素了，但是这个DOM 节点已经存在元素了，我们就不能这么干了！会产生覆盖

追加

<p id="js">JavaScript</p>
<div id="list">
    <p id="se">JavaSE</p>
    <p id="ee">JavaEE</p>
    <p id="me">JavaME</p>
</div>

<script>
    var js = document.getElementById('js');
    var list = document.getElementById('list');
    list.appendChild(js);// 追加到后面
</script>

效果如图：
在这里插入图片描述

插入标签

<script>
				//已经存在的标签
			    var js = document.getElementById('js');
			    var list = document.getElementById('list');
			  //创建一个p标签
             var newp=document.createElement('p');
              newp.id='newp';
              newp.innerText='我是新的p标签';
               // 创建一个script标签
			    var myScript = document.createElement('script');
			    myScript.setAttribute('type','text/javascript');//设置值
              //追加到list里面
              list.appendChild(newp);
             // list.appendChild(myScript);
             //创建style标签
             var mystyle=document.createElement('style');//创建空标签
             mystyle.setAttribute('type','text/css');//设置属性
             document.innerHTML='body{background-color: chartreuse;}'; //设置标签内容
			//在头结点后面插入
			 document.getElementsByTagName('head')[0].appendChild(mystyle)
			</script>

操作表单

操作单选框和多选框

<!--单选框-->
			<p>
				<span >用户名
				<input type="text"  id="username"/>
			</span>
			</p>
			<!--多选框-->
			<input type="radio" name="sex" id="boy" value="man" />男
			<input type="radio" name="sex" id="girl" value="woman" />女
		</form>
		<script type="text/javascript">
			var input_text=document.getElementById("username");
			var boy=document.getElementById("boy");
			var girl=document.getElementById("girl");

得到输入框的值
input_text.value
修改输入框的值
input_text.value = ‘123’
对于单选框，多选框等等固定的值，boy.value只能取到当前的值
boy.checked; //查看返回的结果，是否为true，如果为true，则被选中~
girl.checked = true; //赋值可以选中！！

提交表单
1、按钮绑定提交

<title>提交表单</title>
		<!--导入md5算法-->
		<script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>

	</head>
	<body>
		<form action="https://www.baidu.com/" method="post">
			<p>
			<span >
				用户名<input type="text" name="username" id="username"  />
			</span>
		</p>
		<p>
			<span >
				密码<input type="password" name="password" id="password"  />
			</span>
		</p>
		<!--按钮绑定函数 进行密码的验证-->
			<input type="submit" value="提交" onclick="aaa()"/>
		</form>
		
		<script type="text/javascript">
			function aaa(){
				//alert(1);
				var uname=document.getElementById('username');
				var pwd=document.getElementById('password');
				//md5 算法 加密
				pwd.value=md5(pwd.value);//password: d41d8cd98f00b204e9800998ecf8427e
				console.log(pwd.value);
			}		</script>
	</body>

2、表单绑定提交

<title>提交表单2</title>
		<!--导入md5算法-->
		<script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>

	</head>
	<body>
		<!--表单提交
			onsubmit 一定要用加return 
			
		-->
		<form action="https://www.baidu.com/" method="post" onsubmit=" return check()">
			<p>
			<span >用户名<input type="text" name="username" id="username"  /></span>	
		</p>
		<p>
			<span >密码<input type="password"  id="input_password"  /></span>
			
		</p>
		<!--要提交的密码进行隐藏-->
		 <input type="hidden" id="md5_password" name="password">
		<!--按钮绑定函数 进行密码的验证-->
			<input type="submit" value="提交" />
		</form>
		
		<script type="text/javascript">
			function check(){
				alert(1);//用来检查是否调用了函数
				var uname=document.getElementById('username');
				var pwd=document.getElementById('input_password');
				var md5pwd=document.getElementById('md5_password')
                  //md5 算法 加密
				md5pwd.value=md5(pwd.value);//password: d41d8cd98f00b204e9800998ecf8427e  
				//false 就会提交不成功
				return false;
			}	
			</script>
	</body>

jQuery

公式：$(选择器).事件(事件函数)

<!--导入jQuery库-->
		<script type="text/javascript" src="lib/jquery-3.4.1.js"></script>
			<a href="#" id="use">点我</a>
		<script >
			//要用引号包围选择器，否则出错！！！
			$('#use').click(function(){
				alert("我在");
			})
		</script>

选择器

//原生js，选择器少，麻烦不好记
//标签
document.getElementsByTagName();
//id
document.getElementById();
//类
document.getElementsByClassName();
//jQuery css 中的选择器它全部都能用！
$(‘p’).click(); //标签选择器
$(’#id1’).click(); //id选择器
$(’.class1’).click() //class选择器

文档工具站：http://jquery.cuishifeng.cn/
操作事件
鼠标移动显示出坐标

<title>鼠标移动</title>
		<script src="lib/jquery-3.4.1.js"></script>
			<style type="text/css">
				/*给移动区域设置属性*/
				div{
					width: 100px;
					height: 100px;
					border: 2px blue solid;
					font: "微软雅黑" ;
					font-size: 5px;
				}
			</style>
		
	</head>
	<body>
		mouse:<span id="mouse"></span>
		<!--定义一个方块让鼠标移动-->
		<div class="mousediv">
			鼠标滑我呀
		</div>
		<script type="text/javascript">
			//设置鼠标移动事件
			$('.mousediv').mousemove(function(e){
              $('#mouse').text("x:"+e.pageX+",y"+e.pageY);
			})
		</script>
	</body>

操作dom

<script src="lib/jquery-3.4.1.js"></script>    必须导入jQuery！！
	
		<ul id="test">
			<li class="hello">hello</li>
			<li name="java">java</li>
		</ul>

$('#test-ul li[name=python]').text(); //获得值  只能是字符串
$('#test-ul li[name=python]').text('设置值'); //设置值
$('#test-ul').html(); //获得值
$('#test-ul').html('<strong>123</strong>'); //设置值  可以指定格式

css的操作

 $('#test-ul li[name=python]').css({"color","red"})

元素的显示和隐藏：本质 display ： none；

$('#test-ul li[name=python]').show()
$('#test-ul li[name=python]').hide()

窗口

$(window).width()
$(window).height()
$('#test-ul li[name=python]').toggle();

事件

blur 失去焦点
focus 获得焦点

click 鼠标单击
dbclick 鼠标双击

keydown 键盘按下
keyup   键盘弹起

mousedown 鼠标按下
mouseover 鼠标经过
mousemove 鼠标经过
mouseout鼠标离开
mouseup 鼠标弹起

reset 表单重置
submit 表单提交

change 下拉列表选中项改变，或者文本框内容改变
select 文本框选定
load 页面加载完毕

任何事件都会对应一个事件句柄！！！

事件注册

第一种方式–直接在标签中使用事件句柄

 <script type="text/javascript">
//回调函数：自己把函数代码写出来了，但是函数不是自己调用，由其他程序负责调用
       function sayHello(){
       	alert("hello");
       }
	    </script>
	    //注册事件的第一种方式，直接在标签中使用事件句柄！
	    //将sayHello的函数注册到按钮上，点击click事件之后，该函数被浏览器调用，称为回调函数
		<input type="button" value="button" onclick="sayHello()" />

第二种方式–纯JS代码完成事件的注册

input标签必须写在js代码前面

       <input type="button"value="hello" id="mybtn" />
		<input type="button"value="hello1" id="mybtn1" />
	    <script type="text/javascript">
	    	function dosome(){
	    		alert("do some");
	    	}
        //第一步:根据id获取节点对象
        var mybtnn=document.getElementById("mybtn");
        //第二步:给节点对象绑定事件
        mybtnn.onclick=dosome;//不能加括号
        
        var mybtn1n=document.getElementById("mybtn1");
        mybtn1n.onclick=function (){  //使用匿名函数
        	alert("do some 1");
        }
	    </script>

所以

<!-- load事件什么时候发生？页面元素全部加载完毕之后才会发生！-->
	<body onload="ready()">
		
	    <script type="text/javascript">
	    	function ready(){
	    		var btn=document.getElementById("mybtn");
	    		btn.onclick=function(){
	    			alert("hello js");
	    		}
	    	}
	    </script>
	    <input type="button"value="hello" id="mybtn" />
		
	</body>

练习

<title>将文本框改为复选框</title>
	</head>
	   <body>
	   	<script type="text/javascript">
	   		window.onload=function(){//页面将加载所有元素后执行这个函数
	   			document.getElementById("mybtn").onclick=function(){
	   				var mycheckbox=document.getElementById("mytext");
	   				//一个节点对象的所有属性都可以改变
	   				mycheckbox.type="checkbox";
	   			}
	   		}
	   	</script>
	  <input type="text"  id="mytext" value="" /> 	
	  <input type="button"  id="mybtn" value="将文本框变为复选框" />
	  
		
	</body>

捕捉键盘事件

<title>JS代码捕捉回车键</title>
	</head>
	<body>
		<script type="text/javascript">
			window.onload=function(){
				//获取节点对象
				var i=document.getElementById("username");
				i.onkeydown=function(event){                	
					if(event.keyCode==13){
					alert("正在验证中。。。。");
					}
				}
			}
			
		</script>
		<input type="text" id="username"  />

天黑之前往前冲

发布了46 篇原创文章 · 获赞 1 · 访问量 996

私信关注