Web前端开发学习日记8

今天来学习JavaScript中的DOM和BOM相关知识

DOM(document object model)

DOM允许程序和脚本动态的访问和更新文档北荣、结构和样式,以及对网页进行增删改查的操作。
1、DOM查找

  • 按ID属性精确查找
    1
    var elem =document.getElementById("id");
  • 按标签名查找
    1
    var elems =parent.getElementsByTagName("tag");//parent为父元素
  • 按name属性查找
    1
    var list=document.getElementsByName('name');
  • 按class属性查找
    1
    var elems=parent.getElementsByClassName('classname');
  • 通过CSS选择器查找
    1
    2
    var elem=parent.querySelector("selector");//只找一个元素
    var elems=parent.querySelectorAll("selector");//找多个元素

2、DOM修改

  • 修改属性
    1
    2
    3
    4
    var value=elem.getAttribute("属性名");//读取属性值
    elem.setAttribute("属性名",value);//修改属性值
    var bool=elem.hasAttribute("属性名");//判断是否包含指定属性
    elem.removeAttribute("属性名");//移除属性
  • 修改样式
    1
    document.getElementById("p2").style.color = "blue";

3、DOM添加
添加元素步骤:创建空元素,设置关键属性,将元素添加到DOM树

1
2
3
4
5
6
7
var elem=document.createElement("a");//创建空元素
a.innerHTML="go";//设置关键属性
a.herf="heep://tmooc.cn";
a.style.opacity="1";//设置关键样式
a.style.cssText="width:100px;height:100px";
parentNode.appendChild(childNode);//父元素后追加一个子节点
parentNode.insertBefore(newChild,existingChild);//父元素中指定字节点之前添加一个子节点

DOM添加时建议将子元素添加到父元素或平级子元素添加到文档片段中,再将父元素或文档片段添加到页面。

1
2
3
var frag=document.createDocumentFragment();//创建片段
frag.appendChild(child);//将子元素临时追加到frag中
parent.appendChild(frag);//将frag追加到页面,frag自动释放,不会占用元素

BOM(Browser Object Model)

BOM是专门操作浏览器窗口的API,目前没有标准,存在兼容性问题。
1、浏览器对象模型

  • window:代表整个窗口
  • history:封装当前窗口打开后,成功访问过的历史url记录
  • navigator:封装浏览器配置信息
  • document:封装当前正在加载的网页内容
  • location:封装当前窗口正在打开的url地址
  • screen:封装屏幕的信息
  • event:定义了网页中的事件机制

2、获取窗口大小

1
2
window.outerWidth/outerHeight;//获取完整窗口大小,注意大小写
window.innerWidth/innerHeight;//获取文档显示区大小

3、定时器

1
2
3
4
5
6
7
8
var timer=setInterval(function(){
console.log("hello1");
},1000);//周期性定时器,事件周期单位为毫秒
clearInterval(timer);//停止定时器

var timer=setTimeout(function(){
alert("恭喜过关");
},3000);//一次性定时器