详解DOM和BOM

116 阅读3分钟

1,DOM规范()

1)DOM:是一种帮助Javascript管理,操作,控制html页面的规范

节点:在DOM规范下,认为元素就是节点,文本也是节点。

节点树:由节点构成的树状结构

根节点:最顶级结构,即document节点

2)DOM中为节点提供的属性分为【通用属性】和【专用属性】两种很多API不能混用

eg:

btn.onclick = function(){
tempLI.innerhTML = "123";
list.appendChild(tempLi);
}

3)DOM的通用型属性【node.nodeName](节点名称)和【node.nodeType】

eg:

btn.onclick = function(){
console.log(document.node.nodeName);
console.log(document.node.nodeType)
}

even.target:事件.对象

专门判断节点:

if(enent.target.nodeName == "LI"){
coonsole.log(event.target.innerhTML);
}

4)DOM的通用属性(提高性能)

访问当前节点的父节点:父元素 node.parentNode node.parentElement(只找元素)

var ul =documennt.querySelector("ul");
console.log(ul.parentNode.parentNode.parentNode.parentNoed);
console.log(ul.parentElement.parentNode.parentElement.parentElenment);
console.log(ul.childNodes);
console.log(ul.previousSibling);
console.log(ul.previousElementSibing);

访问当前节点的子节点:子元素 node.childNodes (子节点) node.children

访问当前节点的前一个兄弟节点:元素 node.previousSibling node.previousElementSibling

访问当前节点的后一个兄弟节点:元素 node.nextSibling node.nextElementSibing

ps:理论上来说,javascript中操作页面的时候只需要知道其中一个节点就可以直接或间接访问如何一个节点

ps:回流(reflow):页面中元素尺寸或可见性结构发生变化时,导致的页面重新加载

重绘(repaint):页面中元素可见性描绘状态发生变化时,导致页面重新渲染

ps:

JavaScript引擎

javascript解释器(翻译)+javascript渲染引擎(画家)

5)静态与动态

querySelect家族方法和getElement家族方法的区别

querySelect家族方法:获取内容为动态,表示这个瞬间的结构,后续变化与之无关。

(选中的结构称为NodeList,静态节点列表)

getElement家族方法:动态,表示持续关注(会出现死循环),后续变化会立即反应到这里。

(HTMLCollection,动态元素集合)

eg:

var lis = document.querySelectorAll("li");
btn.onclick = function (){
for(let i =0;i<lis.lengh;i++){
var tempLi = document.createElement("li");
tempLi.oinnerHTMl = "li-----"+i;
list.appendChild(tempLi);
}
};

6)节点守恒原则

HTML中的节点只要不主动删除,那么节点的数量永恒不变。

2,BOM规范(Browser Object Model,意味着对象模型)

1)DOM:是一种帮助Javascript管理,操作,控制的浏览器的规范

对象:BOM规范认为所有浏览器结构都被称为对象,

根对象:顶级对象window

(window.console.log(window);

(window.console.log(window.document);

2),顶级对象window ,添加在window上的属性和方法都可以省略不写,所有无人认领的变量和函数也会自称为window的属性和方法。

3)window.location.herf 表示URL地址

congsole.log(window.screen);//获取屏幕大小
congsole.log(window.location);//浏览器的位置,当前页面所在的地址信息
congsole.log(window.herf);//超链接
window.location.herf = div.setAttribute("herf");
congsole.log(window.navigator.userAgent);//获取用户型号信息
​
​
​

路由:控制页面跳转

forward 前进 back返回 go指定跳转到那个

window.history.forward ........

1)计时器:

描述:

本质:计时器的本质实际上是挂载在系统时钟上的程序段

说明:javascript中计时器分为【定时器】和【延迟器】两种

语法:

创建定时器

var timer = setIntrval(function(){....},ms);

移除定时器:

clearInterval(timer);

创建延迟器:

var timer = setTimeout(function(){....},ms);

移除延迟器

ClearTimeout(timer);

var num =1;
setInterval(function){
console.log(num);
num++;
if(num == 6){
clearInterval(1);
}
    clearTimeout(1);
},10000);
setTimeout(function(){
console.log("hello word");
},20000);
​
​
console.log(typeof timer1);//
console.log(typeof timer1);//

2)数据本地化策略Storage(H5新增用来代替cookie)

描述:

cookie笨重,繁琐,体积小(每条4kb左右)

storage简易,高效,体积大(每条5mb左右)

说明:

localStorage:本地数据仓库,只要不主动删除,数据永远保存

sessionStorage:安全数据仓库,只要页面关闭,数据立即删除

语法:存:

XXXStorage.setitem("key","value");

取:

xxxstorage .getitem(“key'');

列子:

​
// sessionstorage.setItem( "username ", "469191420");
// sessionstorage.setItem( "password", "123456789");
//localstorage.setItem( "username", "469191420");
//localstorage.setItem( "password", "123456789");
// var username = localstorage.getItem( "username " );
//var password = localstorage.getItem( "password" );
//console.log(username,password);
​
​

补充:使用数据仓库的时候,记得仓库内部只放字符串类型

不是会强制转换

建议先手动转成字符串类型

直接存对象导致数据丢失

//cache 缓存

\