ll_0801xyz通过本文主要向大家介绍了dom,浏览器,对象等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com
document object model ： 文档对象模型
将html代码结构化为浏览器可识别和js可识别的东西即DOM
DOM基本数据结构：树
二、DOM操作
1、获取节点：
document.getElementById();
document.getElemenstByTagName();
document.getElemenstByClassName();
获取父元素：
var div1 = document.getElementById('div1');
var parent = div1.parentElement;
获取子元素：
var div1 = document.getElementById('div1');
var child = div1.childNodes;
property与attribute区别：
property是js对象的一个属性的修改
var obj = {x:100,y:200};
console.log(obj.x);//100
var p=document.getElementsByTagName('p')[0];
console.log(p.nodeName); //p
Attribute 是对html标签属性的修改
var pList = document.querySelectorAll('p');
var p=pList[0];
p.getAttribute('data-name');
p.setAttribute('data-name','imooc');
p.getAttribute('style');
p.setAttribute('style','font_size:30px;')
2、新增节点：
var div1 = document.getElementById('div1');
var p = document.createElement('p'); //创建节点
div1.appendChild(p); //用于添加新节点获移动已有节点
3、移除节点：
var div1 = document.getElementById('div1');
var child = div1.childNodes;
div1.removeChild(child[0]);
4、替换节点：
var div1 = document.getElementById('div1');
var p = document.createElement('p');
var child = div1.childNodes;
div1.replaceChild(p,child[0]);
三、BOM操作
browser object model:浏览器对象模型
1、navigator浏览器属性
可检测浏览器类型：console.log(navigator.userAgent)
var ua = navigator.userAgent;
var isChrome = ua.indexOf('Chrome');
console.log(isChrome);
解析一个URL参数以对象输出：
function parseQueryString(url){
var para = url.split('?')[1];
var arr_para=para.split('&');
for(var i=0;i<arr_para.length;i++){
var arr=arr_para[i].split('=');
this[arr[0]]=arr[1];
}
}
var url='http://m.quanmian.tv?tag=news_entertainment&ac=wap&item_type=4&count=20&format=json';
var obUrl=new parseQueryString(url);
console.log(obUrl);//{tag: "news_entertainment", ac: "wap", item_type: "4", count: "20", format: "json"}
2、screen 屏幕属性
console.log(screen.width);
console.log(screen.height);
3、location 地址
console.log(location.href);
console.log(location.protocol);
console.log(location.host);
console.log(location.pathname);
console.log(location.search);
console.log(location.hash);
4、history历史
history.back();
history.forward();