这周主要学习了BOM,DOM方面的知识,同样要记忆的东西挺多的呢
一、BOM
1) window对象
- 获取窗口的位置
function getWindowPos(){
return {
leftPos: (typeof window.screenLeft == 'number') ?
window.screenLeft : window.screenX,
topPos: (typeof window.screenTop == 'number') ?
window.screenTop : window.screenY
}
}
- 获取页面视口大小
function getViewPortSize(){
var pageWidth = window.innerWidth;
var pageHeight = window.innerHeight;
if(typeof pageWidth != 'number'){
if(document.compatMode == 'CSS1Compat'){
// 标准模式下
pageWidth = document.documentElement.clientWidth;
pageHeight = document.documentElement.clientHeight;
}else {
// 混杂模式下
pageWidth = document.body.clientWidth;
pageHeight = document.body.clientHeight;
}
}
return {
pageWidth: pageWidth,
pageHeight: pageHeight
}
}
- 间歇调用和超时调用
var num =0;
var max = 10;
var intervalId = null;
function incrementNumber (){
num++;
if(num === max){ // 当达到最大值时,取消间歇调用
clearInterval(intervalId);
console.log('Done')
}
}
intervalId = setInterval(incrementNumber,500)
- 使用超时调用模拟间歇调用
var num =0;
var max =10;
function incrementNumber(){
if(num < max){
setTimeout(incrementNumber,500)
}else {
console.log('Done')
}
}
setTimeout(incrementNumber,500)
2)location对象
-
location.search()
这里封装一个查询字符串参数的方法
function getQueryStringArgs(){
// 去掉查询字符串开头的问号
var qs = (location.search.length > 0 ? location.search.substring(1) : ''),
args = {}, // 保存数据的对象
items = qs.length ? qs.split('&'): [],
item = null,
name = null,
value = null,
len = items.length;
for(var i=0; i< len; i++){
// 分隔name 和 value
item = items[i].split('=');
name = decodeURIComponent(item[0]);
value = decodeURIComponent(item[1]);
if(name.length){
args[name] = value;
}
}
return args;
}
- 其它方法
- location.assign() , location.href() 打开新的文档,可返回
- location.replace() 用新的文档代替旧的文档,不可返回
- location.reload() 刷新页面
3) navigator对象
通过使用console.dir(navigator) 可查看所有的方法以及属性
二、DOM
1)动态插入脚本和样式表
function loadScript(url){
var script = document.createElement('script');
script.type = 'text/javscript';
script.src = url;
document.body.appendChild(script)
}
function loadStyles(url){
var link = document.createElement('link');
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = url;
var head = document.getElementsByTagName('head')[0];
head.appendChild(link)
}
2)节点操作
- 节点操作
- parentNode 获取父节点
2.dhildren 获取子节点
3.hasChildNodes() 检测节点是否包含子节点
4.appendChild() 在节点末尾插入
5.insertBefore() 在节点之前插入
oDiv.insertBefore(oInner, oDiv.firstChild)
- replaceChild() 替换节点
oDiv.replaceChild(oInner,oDiv.firstChild)
- removeChild() 删除子节点
- cloneNode() 复制节点
- 获取元素
document.getElementById(id) //通过id 查找元素
document.getElementsByTagName(tagName) //通过标签名查找元素, 返回的是一个nodeList集合
document.getElementsByName(name) //通过name 属性名来获取
document.getElementsByClassName('box') // 通过类名来获取
document.querySelector('body')
document.querySelector('.box')
- 特殊集合
console.log(document.anchors) // 获取所有带name属性的a元素
console.log(document.forms) // 获取所有form表单元素
console.log(document.images) // 获取所有的img
console.log(document.links) //获取所有带href 的a 元素
- 元素具有的属性
console.log(oDiv.id)
console.log(oDiv.className)
console.log(oDiv.title)
console.log(oDiv.lang)
console.log(oDiv.dir)
- 获取,设置,删除元素属性
- getAttribute 获取
- setAttribute 设置
- removeAttribute 删除
- 创建元素节点,文本节点
document.createElement('div');
document.createTextNode('hello world');
3)增强
-
classList 属性
该属性包含以下几个实用的方法
add() , contains() , remove() , toggle() - 焦点管理
- focus() 元素获取焦点
- document.activeElement 获取当前取得焦点的元素
- document.hasFocus() 检测文档是否获取了焦点
- 判断文档加载情况
if(document.readyState == 'loading'){
console.log('loading')
}
window.onload = function(){
if(document.readyState == 'complete'){
console.log('complete')
}
}
- 获取元素的自定义属性
element.dataset.single
- 插入
- innerHTML
- innerText
- outerHTML
- 样式
- element.style 获取样式
- element.style.cssText 设置多个样式属性
- 获取伪元素样式
document.defaultView.getComputedStyle(Element,':after')
- 滚动条距离
- 滚动条长度
console.log(document.documentElement.scrollHeight)
console.log(document.documentElement.scrollLeft)
- 滚动距离
var scrollT=document.documentElement.scrollTop;
var scrollL=document.documentElement.scrollLeft;
网友评论