【Javascript基础】

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);