BOM
//window瀏覽器窗口，js可以控制一部分Browser Object Model
//document頁面的主體部分Document Object Model
//window
location 本地
history 历史
screen 屏幕
navigator 信息
//window下的屬性
document.onmousemove=function(){
close();//关闭
open("http://www.163.com","网易","width=400,height=400");//打开
}
console.log(innerWidth,innerHeight);//浏览器内部宽度，高度
console.log(outerWidth,outerHeight);//浏览器外部宽度，高度
// 窗口距离屏幕左上角的位置
console.log(screenLeft,screenTop)
console.log(screenX,screenY)
location.reload();//重载，刷新当前页面;reload(true)方法:刷新页面，如果参数为true，通过缓存刷新。[注意： 不要写在全局，不然浏览器就会一直处在刷新状态]
//reload()方法用于刷新当前文档。reload() 方法类似于浏览器上的刷新页面按钮。
//如果把该方法的参数设置为 true，那么无论文档的最后修改日期是什么，它都会绕过缓存，从服务器上重新下载该文档。这与用户在单击浏览器的刷新按钮时按住 Shift 健的效果是完全一样。
location.href="http://www.163.com";
location.assign("http://www.163.com");
location.replace("http://www.163.com")
// encodeURIComponent函数可把字符串作为 URI 组件进行编码
//http%3A%2F%2Fw3cschool.cc%2Fmy%20test.php%3Fname%3Dst%C3%A5le%26car%3Dsaab
// decodeURIComponent
document.onclick=function(){
console.log(location.href)//可以获取当前页面的地址
location.href="http://www.163.com";//可以设置跳转当前页面地址，獲取當前頁面的地址encodeURIComponent
location.assign("http://www.163.com");//可以设置跳转当前页面地址
location.replace("http://www.163.com");//不产生历史记录
}
console.log(location.hash);//获取#号后面的锚点
console.log(location.search);//获取?号后面的参数
console.log(location.hostname);
console.log(location.pathname);
console.log(location.port);
console.log(location.protocol);//websocket聊天游戲協議，http/https協議，視頻二進制流的協議rtmp協議，qq無連接協議UDP，上傳提交内容ftp
history.back();
history.forward();
history.go(-1);//回退1
history.go(0);//刷新
history.go(1);//前进1
history.pushState({a:1},"aaa");
history.replaceState({a:1},"aa");
console.log(history);
console.log("aaa");
//仅改变网址,网页不会真的跳转,也不会获取到新的内容,本质上网页还停留在原页面
//做到改变网址却不需要刷新页面，这个特性后来用到了单页面应用中
//window.history.pushState(data, title, targetURL);
//状态对象：传给目标路由的信息,可为空（一个与指定网址相关的状态对象，popstate事件触发时，该对象会传入回调函数。如果不需要这个对象，此处可以填null）
//页面标题：目前所有浏览器都不支持,填空字符串即可
//可选url：目标url，不会检查url是否存在，且不能跨域。如不传该项,即给当前url添加data
//特点：pushState()可以创建历史，可以配合popstate事件，可以使用history.go(-1)返回到上一个页面。
//window.history.replaceState(data, title, targetURL);
/类似于pushState,但是会直接替换掉当前url,而不会在history中留下记录
//特点：replaceState不会加入到历史记录里面，用history.go(-1)会跳过当前页面相当于是history.go(-2)。
console.log(screen.availWidth,screen.availHeight);//不包含任务宽高
console.log(screen.width,screen.height);//整个屏幕宽高
console.log(navigator.userAgent);
console.log(navigator.appName)
console.log(navigator.appVersion)
console.log(navigator.platform)
console.log(getBrowserInfo());
function getBrowserInfo(){
if(navigator.userAgent.indexOf("Chrome")>-1) return "Chrome:"+navigator.userAgent.split("Chrome")[1].split(" ")[0].slice(1);
if(navigator.userAgent.indexOf("Firefox")>-1) return "Firefox:"+navigator.userAgent.split("Firefox")[1].slice(1);
}
Window 尺寸
有三种方法能够确定浏览器窗口的尺寸。
对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari：
window.innerHeight - 浏览器窗口的内部高度(包括滚动条)
window.innerWidth - 浏览器窗口的内部宽度(包括滚动条)
对于 Internet Explorer 8、7、6、5：
document.documentElement.clientHeight
document.documentElement.clientWidth
或者
document.body.clientHeight
document.body.clientWidth
实用的 JavaScript 方案（涵盖所有浏览器）：
var w=window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth;
var h=window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight;
//来自 navigator 对象的信息具有误导性，不应该被用于检测浏览器版本，这是因为：
//navigator 数据可被浏览器使用者更改,一些浏览器对测试站点会识别错误,浏览器无法报告晚于浏览器发布的新操作系统,浏览器检测:由于 navigator 可误导浏览器检测，使用对象检测可用来嗅探不同的浏览器。
//由于不同的浏览器支持不同的对象，您可以使用对象来检测浏览器。例如，由于只有 Opera 支持属性 "window.opera"，您可以据此识别出 Opera。例子：if (window.opera) {...some action...}
DOM節點
// node 标签 注释 文本 文档
// 任何标签的nodeName都是该标签的大写字母
console.log(document.body.firstChild.nodeName==="DIV");
console.log(document.body.firstChild.constructor===HTMLDivElement);
console.log(document.body.firstChild.nodeType);
console.log(document.body.firstChild.nodeValue);
document.getElementById("id");//通过id获取元素
var list=document.getElementsByTagName("div");
//通过标签名获取标签列表，只能通过document获取,HTMLCollection
var list=document.getElementsByClassName("div1")
//通过Class名获取标签列表,任何标签都可以获取其子项中Class列表,HTMLCollection
console.log(list)
var list=document.getElementsByName("sex");
//通过name属性获取节点列表，只能通过document获取,NodeList
// NodeList
// 选择选择器列表中的第一个元素
var div=document.querySelector(所有选择器)
var div=document.querySelector("#div0");
var div=document.querySelector(".div1");
var div=document.querySelector("[type=text]");
var div=父容器.querySelector()
// 选择选择器可以获取的所有元素
var div=document.querySelectorAll(所有选择器)
var div0=document.getElementById("div0");
var list=div0.getElementsByClassName("div1");
console.log(list);
div0.innerHTML="aaa";
var forms=document.getElementById("form0");
console.log(forms)
var list=forms.getElementsByName("sex");
console.log(list);
//nodeList是有forEach方法遍历
var list=document.getElementsByName("sex");
list.forEach(function(item){
console.log(item);
})
// 节点遍历
console.log(document.body.children);//所有子元素的列表
console.log(document.body.childNodes);//所有子节点列表
console.log(document.body.firstChild);//第一个子节点
console.log(document.body.firstElementChild);//第一个子元素
console.log(document.body.lastChild);//最后一个子节点
console.log(document.body.lastElementChild);//最后一个子元素
console.log(document.body.lastElementChild.previousSibling);//上一个兄弟节点
console.log(document.body.lastElementChild.previousElementSibling);//上一个兄弟元素
console.log(document.body.firstElementChild.nextSibling);//下一个兄弟节点
console.log(document.body.firstElementChild.nextElementSibling);//下一个兄弟元素
console.log(document.body.firstChild.parentNode);//父节点
console.log(document.body.firstChild.parentElement);//父元素
DOM的創建和使用
//创建元素document.createElement(标签名)
var div=document.createElement("div");
div.style.width="100px";
div.style.height="100px";
div.style.backgroundColor="red";
//appendChild追加到子元素中 父元素.appendChild(子元素)
document.body.appendChild(div);
var script=document.createElement("script");
var img=document.createElement("img");
var table=document.createElement("table");
var bn=document.querySelector("button");
var div0=document.querySelector("#div0");
bn.onclick=function(){
console.log('aaaa');
div0.innerHTML+="<div></div>";
}
var str="aaa";
str+="aaa";
str=str+"aaa";
var bn=document.querySelector("button");
bn.onclick=function(){
var div=document.createElement("div");
document.body.appendChild(div);
}
function ce(type,style,parent){
var elem=document.createElement(type);
for(var prop in style){
elem.style[prop]=style[prop];
}
if(typeof parent==="string") parent=document.querySelector(parent);
if(parent){
parent.appendChild(elem);
}
return elem;
}
var div=ce("div",{
"50px",
height:"50px",
backgroundColor:"red"
});
document.body.appendChild(div);
var div=ce("div",{
"50px",
height:"50px",
backgroundColor:"red"
},"#div0");
document.addEventListener("click",clickHandler);
function clickHandler(e){
Utils.ce("div",{
"50px",
height:"50px",
backgroundColor:Utils.randomColor(),
position:"absolute",
left:e.x-25+"px",
top:e.y-25+"px"
},"body");
}
// 碎片容器
var con=document.createDocumentFragment();
var ul=document.createElement("ul");
for(var i=0;i<10;i++){
var li=document.createElement("li");
li.innerHTML=i;
ul.appendChild(li);
}
document.body.appendChild(ul);
var con=document.createDocumentFragment();
for(var i=0;i<10;i++){
var div=document.createElement("div");
con.appendChild(div);
}
document.body.appendChild(con);
DOM插入複製和刪除替換
var span=document.createElement("span");
span.textContent="你好";//给div设置文本内容，不能设置html
document.body.appendChild(div);
// 父容器.insertBefore(要插入的元素,插入在谁的前面);
document.body.insertBefore(div,document.body.firstChild)
var div0=document.querySelector("#div0");
// 插入在子元素的最尾部
div0.appendChild(span);
// 插入在子元素的最前面
div0.insertBefore(span,div0.firstChild);
// 插入在元素的兄弟项前面
div0.parentElement.insertBefore(span,div0);
// 插入在元素的兄弟项后面
div0.parentElement.insertBefore(span,div0.nextSibling);
// 给指定元素列表中的内容增加外容器
function warp(elemType,newType){
var elems=document.querySelectorAll(elemType);
elems.forEach(function(item){
var parent=document.createElement(newType);
item.parentElement.insertBefore(parent,item);
parent.appendChild(item);
})
}
warp("span","div");
function warpAll(elemType,newType){
var elems=document.querySelectorAll(elemType);
if(elems.length===0) return;
var parent=document.createElement(newType);
elems[0].parentElement.insertBefore(parent,elems[0]);
elems.forEach(function(item){
parent.appendChild(item);
})
}
warpAll("span","div");
// 创建文本节点
var txt=document.createTextNode("你好");
div0.insertBefore(txt,div0.firstElementChild);
var p=document.createElement("p");
// 父容器.replaceChild(新的子元素，要替换掉旧元素);
div0.replaceChild(p,div0.firstElementChild);
// 删除节点
// 父容器.removeChild(子元素);
// 子元素.remove()
// 在删除时，元素仅仅是从页面中删除，不是从内存删除
div0.addEventListener("click",clickhandler);
function clickhandler(){
console.log("aaa");
}
div0.remove();
div0=null;//需要在设值null之前将事件也需要删除
document.body.appendChild(div0);
// 如果在没有清楚内存的情况下还可以加入回去
div0.textContent="";
div0.innerHTML="";
// 复制 复制元素=复制目标.cloneNode(深浅复制)
// true 深复制 复制元素和元素的所有子元素和节点
// false 浅复制 仅复制当前元素
var span1=document.querySelector("#span1");
var span2=span1.cloneNode(true);
// 复制标签时，会标签的属性一起复制
span2.id="span2";
div0.appendChild(span2);
DOM屬性
var div=document.querySelector("div");
var input=document.querySelector("input");
div.aa=3;
// DOM 对象属性
// DOM的对象属性，分为自定义型和原DOM对象属性
console.dir(div);
// DOM的对象原属性与DOM对象的标签属性部分对应，部分有差别
div.className="div1";//就是设值class标签属性
div.id="div2";
div.style="100px;height:100px;"
div.stlye.width="100px";
input.name="user";
input.checked=true;
input.placeholder="用户名"
div.aa=10;
console.log(div.aa);
// DOM 标签属性
// 设置标签的属性和值，值和属性都必须是字符类型
// DOM的标签属性命名，不能使用大小写区分不适用下划线区分
// 属性名必须全小写字母，并且使用-区分每个单词
div.setAttribute("shop-data","10");
// 获取标签属性
console.log(div.getAttribute("shop-data"));
console.log(div.getAttribute("class"));
// 删除标签属性
div.removeAttribute("shop-data");
document.body
document.title
document.head
document.URL 当前页面地址
document.domain 域名
var str="欢迎同学们来千锋好程序员学习H5的课程。";
var i=0;
setInterval(animation,400);
function animation(){
i++;
if(i>str.length-1) i=0;
document.title=str.slice(i);
}
https://blog.csdn.net/qq_41328247/article/details/80074098