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
2var elem=parent.querySelector("selector");//只找一个元素
var elems=parent.querySelectorAll("selector");//找多个元素
2、DOM修改
- 修改属性
1
2
3
4var value=elem.getAttribute("属性名");//读取属性值
elem.setAttribute("属性名",value);//修改属性值
var bool=elem.hasAttribute("属性名");//判断是否包含指定属性
elem.removeAttribute("属性名");//移除属性 - 修改样式
1
document.getElementById("p2").style.color = "blue";
3、DOM添加
添加元素步骤:创建空元素,设置关键属性,将元素添加到DOM树
1 | var elem=document.createElement("a");//创建空元素 |
DOM添加时建议将子元素添加到父元素或平级子元素添加到文档片段中,再将父元素或文档片段添加到页面。
1 | var frag=document.createDocumentFragment();//创建片段 |
BOM(Browser Object Model)
BOM是专门操作浏览器窗口的API,目前没有标准,存在兼容性问题。
1、浏览器对象模型
- window:代表整个窗口
- history:封装当前窗口打开后,成功访问过的历史url记录
- navigator:封装浏览器配置信息
- document:封装当前正在加载的网页内容
- location:封装当前窗口正在打开的url地址
- screen:封装屏幕的信息
- event:定义了网页中的事件机制
2、获取窗口大小
1 | window.outerWidth/outerHeight;//获取完整窗口大小,注意大小写 |
3、定时器
1 | var timer=setInterval(function(){ |