JavaScript04

JavaScript04

1.操作BOM对象（重点）

浏览器介绍

BOM：浏览器对象模型

//location代表当前页面的URL信息
host:"www.baidu.com"
href:"https://www.baidu.com/"
protocol:"https:"
reload:f reload() //刷新网页
//设置新的地址
location.assign('https://blog.kuangstudy.com/')

//document代表当前的页面，HTML DOM文件树
document.title
"百度一下，你就知道"
document.title = "dashabi"
"dashabi"

//获取具体的文档树节点
<dl id="app">
    <dt>java</dt>
	<dd>javase</dt>
</dl>
<script>
    var dl = document.getElementById('app');
</script>

//获取cookie
document.cookie

劫持cookie原理

www.taobao.com

<script src="aa.js"></script>
<!--恶意人员：获取你的cookie上传到他的服务器-->

服务器可以设置cookie：httpOnly

//history代表浏览器的历史记录（不建议使用）
history.back()//后退
history.forward()//前进

还有其他BOM命令可以自己查阅

2.操作DOM对象（重点）

DOM:文档对象模型

核心

浏览器网页就是一个DOM树形结构

• 更新：更新DOM节点
• 遍历DOM节点：得到DOM节点
• 删除：删除一个DOM节点
• 添加：添加一个新的节点

要操作一个DOM节点，就必须先获得这个DOM节点

获得DOM节点

<div id = "father">
	<h1>标题一</h1>
	<p id="p1">p1</p>
	<p class='p2'>p2</p>
</div>
<script>
	//对应css选择器
    var h1 = document.getElementsByTagName('h1');
    var p1 = document.getElementById('p1');
    var p2 = document.getElementsByClassName('p2');
    var father = document.getElementById('father');
    
    var childrens = father.children;//获取父节点下的所有子节点
    //father.firstChild
    //father.lastChild
</script>

这是原生代码，之后尽量使用jQuery()

更新节点

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

操作文本

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

操作js

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

删除节点

删除节点的步骤：先获取父节点，再通过父节点删除自己

<div id="father">
	<h1>标题一</h1>
	<p id="p1">p1</p>
	<p class='p2'>p2</p>
</div>
<script>
    var self = document.getElementById('p1');
    var father = p1.parentElement; //找p1的父节点
	father.removeChild(self)
    
    //删除是一个动态的过程
    father.removeChild(father.children[0])
    father.removeChild(father.children[1])
    father.removeChild(father.children[2])
</script>

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

插入节点

我们获得了某个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');
	
    //通过JS创建一个新的节点
    var newP = document.createElement('p');//创建一个p标签
    newP.id = 'newP';
    newP.innerText = 'hello';
    
    //创建一个标签节点（通过这个属性，可以设置任意的值）
    var myScript = document.createElement('script');
    myScript.setAttribute('type','text/javascript');
    
    //可以创建一个style标签
    var myStyle = document.createElement('style');//创建了一个空style标签
    myStyle.setAttribute('type','text/css');
    myStyle.innerHTML = 'body{background-color:chartreuse;}';//设置标签内容
    document.getElementsByTagName('head')[0].appendChild(myStyle)
</script>

insertBefore

var ee = document.getElementById('ee');
var js = document.getElementById('js');
var list = document.getElementById('list');
//要包含的节点.insertBefore(newNode,targetNode)
list.insertBefore(js,ee);

3、操作表单（验证）

表单是什么 from DOM树

• 文本框 text
• 下拉框
• 单选框 redio
• 多选框 checkbox
• 隐藏框 hidden
• 密码框 password
• …

表单的目的：提交信息

获得要提交的信息

<form method="post">
    <p>
        <span>用户名:</span><input type="text" id="username" required>
    </p>
<!--多选框的值，就是定义好的value-->
	<p>
    	<span>性别:</span>
    	<input type="radio" name="sex" value="man" id="boy">男
    	<input type="radio" name="sex" value="woman" id="girl">女
	</p>
</form>

<script>
	var input_text = document.getElementById('username');
	var boy_radio = document.getElementById('boy');
	var girl_radio = document.getElementById('girl');
    
    //得到输入框的值
    input_text.value;
    //修改输入框的值
    input_text.value='123';
    
    //对于单选框，多选框等等固定的值，boy_radio.value只能取到当前的值
    boy_radio.checked;//查看返回的结果，是否为true，如果为true则被选中
    girl_radio.checked = true; //赋值
</script>

提交表单 md5加密 表单优化

<!--MD5工具类-->
<script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>

<!--表单绑定提交事件  οnsubmit=绑定一个提交检测的函数，true,false
将这个结果返回给表单，使用onsubmit接收！
οnsubmit=“return aaa()”-->

<form action='https://www.baidu.com/' method="post" onsubmit="return aaa()">
    <p>
        <span>用户名:</span><input type="text" id="username" name="username">    
    </p>
    <p>
        <span>密码:</span><input type="password" id="input-password">
    </p>
    
    <input type="hidden" id="md5-password" name="password">
    <!--
    绑定事件 onclick 被点击
    <button type="submit" οnclick="aaa()">提交</button>
    -->
    <button type="submit">提交</button>
</form>

<script>
	function aaa(){
        var uname = document.getElementById('username');
        var pwd = document.getElementById('password');
        var md5pwd = document.getElementById("md5-password");

        md5pwd.value = md5(pwd.value);
        //可以校验判断表单内容，true就是通过提交，false阻止提交
        return true;
        
        //md5算法加密
        //pwd.value = md5(pwd);
    }
</script>