5 Javascript
BOM
BOM:浏览器对象模型(Browser Object Model),是一个用于访问浏览器和计算机屏幕的对象集合。我们可以通过全局对象window来访问这些对象。
console.log(window.document);
console.log(window.frames);
console.log(window.navigator);
console.log(window.screen);
console.log(window.location);
console.log(window.history);
//window.document
//是一个BOM对象,表示的是当前所载入的文档(即页面),但它的方法和属性同时也属于DOM对象所涵盖的范围。
//window.frames
//是当前页面中所有框架的集合
//window.navigator
//用于反应浏览器及其功能信息的对象
//window.screen
//提供浏览器以外的环境信息
//window.location
//href属性 控制浏览器地址栏的内容
//reload() 刷新页面
//reload(true) 刷新页面,不带缓存
//assign() 加载新的页面
//replace() 加载新的页面(注意:不会再浏览器的历史记录表中留下记录)
function func() {
//alert("点我干啥?");
window.location.href = "greenWindow.html";
}
function refresh() {
window.location.reload();
}
function ass() {
window.location.assign("greenWindow.html");
// window.location.replace("greenWindow.html");
}
//window.history
//window.history.length获取历史记录的长度
//back() 上一页
//forward() 下一页
//go(num) //num<0时,跳转到自己后方的第num个记录。num>0时,跳转自己前方的第num个记录
console.log("window.history.length = " + window.history.length);
//上一页
function backPage() {
window.history.back();
}
//下一页
function forwardPage() {
window.history.forward();
}
//
function goPage() {
window.history.go(2);
}
BOM就相当于一个组成浏览器(window相当于一个最底层基本的浏览器,我们进行web开发都在window上面进行)各个部分的一个集合的总称,包括浏览器中的document、location、history等等。
DOM
了解DOM * DOM:文档对象模型(Document Object Model) * DOM是访问HTML和操作HTML的标准。 --------------------------------------------------- DOM节点的分类 * 1、文档节点 * 2、标签(元素)节点 * 3、属性节点 * 4、文本节点 * 5、注释节点 --------------------------------------------------- JS跟页面中这些标签进行交互 * 1、获取标签(元素)节点 * 修改标签CSS样式 * 修改标签属性 * 2、创建标签 * 3、删除标签 * 4、复制标签 ---------------------------------------------------
a:获取标签(元素)节点
1、getElementById("str")
//根据元素id获取元素节点
2、getElementsByClassName()
//获取相同class属性的元素节点列表
3、getElementsByTagName()
//根据标签名来获取元素节点的集合
4、getElementsByName()
//根据name属性值来获取元素节点的集合
b:获取属性节点
var jsInput = getelementbyId("str")
方法二:
//元素节点.getAttribute("属性名")
//得到元素对应属性的属性值
//注意:该方法还可以获取自定义属性
var idNode = jsInput.getAttribute("my");
console.log(idNode);
//修改元素对应属性的属性值
//元素节点.setAttribute("属性名", "新的属性值");
jsInput.setAttribute("my", "sunck");
console.log(jsInput);
//移除元素节点中的某个属性节点,某些低版本浏览器不支持
//元素节点.removeAttribute("属性名");
jsInput.removeAttribute("my");
console.log(jsInput);
c:获取文本节点
//1、元素节点.innerHTML
//从对象的开始标签到结束标签的全部内容,不包括本身Html标签
var inner = jsDiv.innerHTML;
console.log(inner);
console.log(typeof inner);
//2、元素节点.outerHTML
//除了包含innerHTML的全部内容外, 还包含对象标签本身
var outer = jsDiv.outerHTML;
console.log(outer);
console.log(typeof outer);
//3、元素节点.innerText
//从对象的开始标签到结束标签的全部的文本内容
var text = jsDiv.innerText;
console.log(text);
console.log(typeof text);
//修改
jsDiv.innerHTML = "dsgewqrgewr";
console.log(jsDiv);