JavaScript学习三

七、操作BOM对象（重点）

浏览器介绍

JavaScript和浏览器关系？

JavaScript诞生就是为了能够让它在浏览器中运行

BOM：浏览器对象模型

window

window代表 浏览器窗口

Navigator

Navigator，封装了浏览器的信息

大多数时候，我们不会使用navigator对象，因为会被人为修改，不建议使用这些属性来判断和编写代码

screen

代表屏幕尺寸

screen.width
1920 px
screen.height
1080 px

location（重要）

host:"www.baidu.com"
herf:"https://www.baidu.com/"
protocol:"https:"
reload:f reload()  //刷新网页
//设置新的地址
location.assign('https://blog.kuangstudy.com/')

document

document代表当前的页面，HTML

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

获取具体的文档树节点

<dl id="app">
   <dt>Java<dt>
   <dd>JavaSE<dd>
   <dd>JavaEE<dd>
</dl>

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

获取cookie

document.cookie
"_guid=111872281.88378365678900.2263789465789.133;monitor_count=1"

劫持cookie原理

www.taobao.com

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

服务器端可以设置cookie:httpOnly

history

history代表浏览器的历史记录

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

八、操作DOM对象（重点）

DOM：文档对象模型

核心

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

1.更新：更新Dom节点

2.遍历dom节点：得到Dom节点

3.删除：删除一个Dom节点

4.添加：添加一个新的节点

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

获得Dom节点

//对应css选择器
var h1=document.getElementsByTagName('h1');
var p1=document.getElementById('p1');
var p1=document.getElementsByClassName('p2');
var father=document.getElementById('father');

var childrens=father.children; //获取父节点下的所有子节点
//father.firstChild
//father.lastChild

这是原生代码，之后我们尽量都是用jQuery();

更新节点

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

id1.innerText=’456'  修改文本的值

id1.innerHTML='<strong>123</script>'  可以解析HTML文本标签

操作css

id1.style.color='yellow'; //属性使用 字符串 包裹
id1.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;
   father=removeChild(self)

   //删除是一个动态的过程
   father.removeChild(father.children[0])
   father.removechild(father.children[1])
   father.removechild(father.children[3])
</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,kele':
   //创建一个标签节点
   var myScript=document.createElement('script');
   myScript.setAttribute('type','text/javascript');
   
   //可以创建一个style标签
   var myStyle=document.createElement('style');
   myStyle.setAttribute('type','text/css');
   myStyle.innerHTML='body{background-color:chartreuse;}';//设置标签内容

   document.getElementsByTagName('head')[0].appendChild(myStyle)
</script>

insertBefore

//对应css选择器
var h1=document.getElementByTagName('h1');
var p2=document.getElementById('p1');
var p2=document.getElementByClassName('p2');
var father=document.getElementById('father');

var childrens=father.children;  //获取父节点下的所有子节点
//father.firstChild
//father.lastChild

九、操作表单（验证）

表单是什么 form DOM树

1.文本框 text

2.下拉框 <select>

3.单选框 radio

4.多选框 checkbox

5.隐藏框 hidden

6.密码框 password

.................

表单的目的：提交信息

获得要提交的信息