DOM和BOM

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