代码拉取完成，页面将自动刷新
先抛出2个场景的问题:
JavaScript可以获取浏览器提供的很多对象，并进行操作.
我们的网页是通过浏览器加载出来的, 而浏览器本身也有很多功能:
而这些数据都是绑定在window对象上得, 所以你可以认为对于浏览器加载的网页, window就表示的浏览器本身
window的如下4个属性控制这个浏览器的窗口大小， IE9+、Safari、Opera和Chrome都支持这4个属性
// 可以调整浏览器窗口大小试试:
console.log('window inner size: ' + window.innerWidth + ' x ' + window.innerHeight);
console.log('window outer size: ' + window.outerWidth + ' x ' + window.outerHeight);
我们在页面的时候, 如何知道用户使用的那种浏览器, 好做不通的适配, 毕竟各种厂商的浏览器实现有各有差异
关于浏览器的相关信息都保存在navigator对象上面得:
window.navigator
// appCodeName: "Mozilla"
// appName: "Netscape"
// appVersion: "5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/93.0.4577.63 Safari/537.36"
// ...
最常用的属性包括：
如何判断用户使用的是pc还是手机?
有时候 我们可能需要知道用户的屏幕尺寸, 方便我们做网页布局, 这是好就需要获取屏幕的数据:
window.screen
// Screen {availWidth: 2560, availHeight: 1440, width: 2560, height: 1440, colorDepth: 24, …}
// availHeight: 1440
// availLeft: 1440
// availTop: 0
// availWidth: 2560
// colorDepth: 24
// height: 1440
// orientation: ScreenOrientation {angle: 0, type: 'landscape-primary', onchange: null}
// pixelDepth: 24
// width: 2560
这个很有用, 为了保证每个用户访问该URL都呈现统一的效果, 我们的页面往往都需要读取当前Page的参数
window.location
// Location
// hash: ""
// host: "www.baidu.com"
// hostname: "www.baidu.com"
// href: "https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&rsv_idx=..."
// origin: "https://www.baidu.com"
// pathname: "/s"
// port: ""
// protocol: "https:"
// reload: ƒ reload()
// replace: ƒ replace()
// search: "?ie=utf-8&f=8&rsv_bp=1&rsv_idx=1&tn=..."
下面是一些常用属性:
要加载一个新页面，可以调用location.assign()。如果要重新加载当前页面，调用location.reload()方法非常方便
if (confirm('重新加载当前页' + location.href + '?')) {
location.reload();
} else {
location.assign('/'); // 设置一个新的URL地址
}
history对象保存了浏览器的历史记录，JavaScript可以调用history对象的back()或forward ()，相当于用户点击了浏览器的“后退”或“前进”按钮
// <- 浏览器的“后退”按钮
history.back();
// -> 浏览器的“前进”按钮
history.forward()
AJAX不是JavaScript的规范，它只是一个哥们“发明”的缩写：Asynchronous JavaScript and XML，意思就是用JavaScript执行异步网络请求
简单来说 就是浏览器中的http client
在现代浏览器上写AJAX主要依靠XMLHttpRequest对象
// 新建XMLHttpRequest对象
var request = new XMLHttpRequest();
// 发送请求:
request.open('GET', 'https://www.baidu.com');
request.send();
如何就这样我们是获取不到请求结果, 由于js都是异步的, 我们需要定义回调来处理返回
request.onreadystatechange = function () {
console.log(request.status)
console.log(request.responseText)
}
对于AJAX请求特别需要注意跨域问题: CORS
满足下面3个条件的是简单请求:
通常能满足90%的需求
控制其跨域的关键头 来自于服务端设置的: Access-Control-Allow-Origin
对于简单请求，浏览器直接发出CORS请求。具体来说，就是在头信息之中，增加一个Origin字段
如果服务端不允许该域，就跨越失败
如果想允许特点的Header, 服务端也可以通过添加: Access-Control-Expose-Headers 来进行控制
复杂请求:
非简单请求的CORS请求，会在正式通信之前，增加一次HTTP查询请求，称为"预检"请求（preflight）
preflight请求:
OPTIONS /cors HTTP/1.1
Origin: http://api.bob.com
Access-Control-Request-Method: PUT
Access-Control-Request-Headers: X-Custom-Header
Host: api.alice.com
Accept-Language: en-US
Connection: keep-alive
User-Agent: Mozilla/5.0...
preflight响应:
Access-Control-Allow-Methods: GET, POST, PUT
Access-Control-Allow-Headers: X-Custom-Header
Access-Control-Allow-Credentials: true
Access-Control-Max-Age: 1728000
很显然原生的client库，没那么好用, 于是诞生的axios
浏览器当前加载的Page也是一个对象: window.document
由于HTML在浏览器中以DOM形式表示为树形结构，document对象就是整个DOM树的根节点
比如我们获取当前Document中的一些属性: 比如 title document的title属性是从HTML文档中的<title>xxx</title>读取的，但是可以动态改变
document.title
// 'golang random int_百度搜索'
// 我们可以动态修改
document.title = '测试修改'
// 我们看到浏览器窗口标题发生了变化
很多js库比如JQuery都是通过动态操作Dom来实现很多高级功能的, 这些是上层库的基石
要查找DOM树的某个节点，需要从document对象开始查找。最常用的查找是根据ID和Tag Name以及ClassName
<h1>列表</h1>
<ul id="list_menu" class="ul_class">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
document.getElementById('list_menu')
// <ul data-v-7ba5bd90 id="list_menu"><li data-v-7ba5bd90>…</li><li data-v-7ba5bd90>…</li><li data-v-7ba5bd90>…</li></ul>
document.getElementsByTagName('ul')
// 这里返回所有的ul元素
document.getElementsByClassName('ul_class')
当然我们也可以组合使用
document.getElementById('list_menu').getElementsByTagName('li')
// 上面也等价于
document.getElementById('list_menu').children
// firstElementChild
document.getElementById('list_menu').firstElementChild
// lastElementChild
document.getElementById('list_menu').lastElementChild
// parentElement 获取父元素
document.getElementById('list_menu').parentElement
获取的元素后, 我们可以通过元素的如下2个方法，修改元素:
var le = document.getElementById('list_menu').lastElementChild
le.innerText = '牛奶'
// 我们发现页面的内容已经修改
// html格式无法识别
le.innerText = '<span style="color:red">牛奶</span>'
// <span style="color:red">牛奶</span>
// 使用innterHTML则可以
le.innerHTML = '<span style="color:red">牛奶</span>'
很多响应式框架都会根据数据新增，动态创建一个DOM元素，并插入到指定位置,
我们使用 createElement 来创建一个DOM元素, 比如创建一个a标签
// 创建一个A标签
var newlink = document.createElement('a')
// <a></a>
// 修改A标签属性
newlink.href = "www.baiducom"
newlink.innerText = '跳转到百度'
// 追加到某个元素后面
var lm = document.getElementById('list_menu')
lm.appendChild(newlink)
如果我们想要控制元素插入的位置可以使用insertBefore
insertBefore的语法如下:
parentElement.insertBefore(newElement, referenceElement);
// 父元素
var lm = document.getElementById('list_menu')
// 子元素
var cf = document.getElementById('coffee')
// 需要插入的元素
var newlink = document.createElement('a')
newlink.href = "www.baiducom"
newlink.innerText = '跳转到百度'
// 插入到coffee之前
lm.insertBefore(newlink, cf)
总结: 有2种方式可以插入一个DOM元素
删除一个DOM节点就比插入要容易得多
要删除一个节点，首先要获得该节点本身以及它的父节点，然后，调用父节点的removeChild把自己删掉
removeChild的语法如下:
parent.removeChild(childNode);
比如我们删除刚才添加的那个元素
lm.removeChild(newlink)
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。