（十七）js bom/dom

window 是所有BOM中所有对象的核心。
window 的属性

window.self代表自己本身，相当于window。

eg: console.log(window.self === window);

window.parent 返回父窗口。

eg: console.log(window.parent);

window.top返回最顶层的窗口。

eg: console.log(window.to);

winddow.opener指向窗口的开启者

eg: console.log(window.opener);
通过a链接打开的新窗口opener属性指向的是这个新窗口的打开者

window的方法

通过js给页面中的某按钮添加跳转至新页面的功能。
语法：window.open(url,name,feature,replace);

url 指的是想要跳转的目的地的url地址
name可选的字符串，该字符串是一个逗号分隔的特征列表，其中包括数字，字母和下划线，该字符声明了新窗口的名称。

eg: window.open('url','name');
注：如果不加name属性的，只要点击跳转就可以无限制的打开。加上name属性后可以限制这种无限制的叠加，相当于再次点击跳转时，只会跳换到设置了名字后的该网页。放在函数外部时，当页面加载完毕后会自动执行跳转新窗口这个操作。（谷歌默认会把打开的新窗口阻止，但不阻止通过事件点击后跳转的新窗口）

window.close();关闭窗口
window.confirm();弹出框含有确认和取消按钮

注：确认返回值为true取消返回值为false

window.prompt(); 弹出一个含有输入框的框，

注：确认返回值为字符串，取消返回null;

history对象

console.log(history.length);输出结果为页面跳转的历史记录，打开浏览器后，默认为1条历史记录
history.back;返回上一次浏览的页面。通过历史记录的倒退但会上次浏览的页面。
history.formward;前进到最后一次打开的新的页面。通过历史记录返回流过过得比较迟的页面
history.go(x);后退为负数，前进为正数。0刷新页面。数值越大跳转的步数越多

location对象

属性

location.href = ' https://www.baidu.com'; 页面刷新后跳转至百度页面。
location.search ; 输出url地址栏中的查询字符串
location.hash;输出url地址栏中的锚点链接地址
注：完整的URL组成部分：协议 (schema http: // http:// http://)域名（domain）端口号(port 80 443)/路径（path）查询字符串（？query）锚点链接(#hash); /

方法

location.assign(' http://www.baidu.com');页面刷新后开始加载文档，文档类型为新的地址。

注：和histoty.href = ' http://www.baidu.com'类似都会跳转至所设置的页面。

location.reload();当参数是true，任何时候都会重新加载，false的时候，只有在文档改变的时候才会加载，否则直接读取内存当中的
location.replace('url');会加载设置的地址的文档，并代替当前文档。不会产生新的历史记录，会覆盖当前的记录
console.log(navigator.userAgent);用户代理信息，返回结果为用户所使用的浏览器的信息。

window方法

window.onload = function(){};页面加载完毕执行
window.onscroll = function(){};页面滚动条滚动式产生数据。
window.onresize = function(){};页面比例缩放就会产生数据。
console.log(document.documentgetElement.clientWidth);获取视窗宽度
console.log(document.documentgetElement.Height);获取浏览器可视高度
window.onscroll = function(){

console.log(document.documentElement.scrollTop);获取当前滚动条的位置

console.log(document.body.scrollTop);获取当前滚动条位置

}

因浏览器兼容性问题所以改写为一下格式。

window.onscroll = function(){

//获取垂直方向的滚动条的位置

var iScrollT = document.documentElement.scrollTop || document.body.scrollTop;

//获取水平的滚动条的位置

var iScrollL = document.documentElement.scrollLeft || document.body.scrollLeft;

console.log(iScroll);

}

DOM属性

属性

读：console.log(document.title)输出结果为页面的title的标题内容
写：document.title ='千锋教育'; 改变页面title的内容为千锋教育
console.log(document.all);输出页面中所有使用过得标签的集合。
console.log(document.forms);输出结果为页面中所有的form表单元素，可通过name名或者下标的形式访问到相应的form表单。
eg:console.log(docuemtn.forms[0]);访问第一个form表单的元素

方法

console.log(document.getElementById('id')); 通过id访问相应的元素
console.log(document.getElementTagName('divname'))通过标签名来访问相应的元素返回结果永远为集合。
console.log(document.getElementByName('name'))通过name名来访问相应的元素。存在兼容性问题

name 属性分内标准属性和自定义属性。

标准属性为出厂时，自带的name属性，如form自带name刷新为标准
自定义属性为自己定义的name属性，在ie9及其以下村财兼容性问题不可使用。

document.write('2018/01/25');文本输出
console.log(document.getElementsByClassName('classname'));通过类名访问相应的元素获取集合.

存在浏览器兼容性问题,解决方法如下:

//通过ClassName过去元素的集合

function byClassName(sClassName){

if(document.getElementByClassName){

//如果页面中存在该元素的话则返回如果没有则解决思路如下：

//通过便利将页面中的所有元素都拿出来后，进行判断，

return document.getElementsByClassName(sClassName);

}else{

//1获取所有的元素注：此时的getElements!

var allTags = document.getElementsByTagName(*);

//2便利获取的所有元素

var result = [];

for(var i =0; i<allTags.length;i++){

if(allTags[i].className == sClassName){

//因为一个页面中可能存在多个类名相同的元素需要先放到一个数组中存放起来

result.push(allTags[i]);

}

return retsult;

}

console.log(byClassName('div.header'));

操作内容

innerHTML：用来设置或获取对象起始和结束标签内（例如div框架，它只会获取div里面的内容，

而不会获取div）的内容(识别html标签) 。

innerText：用来设置或获取对象起始和结束标签内的内容 (只是获取文字内容)(适用于IE，

最新版火狐已支持)。

textContent用来设置或获取对象起始和结束标签内的内容 (只是获取文字内容)(适用于火狐，

IE8及其以下不支持)。

outerHTML 用来设置或获取包括本对象在内的起始和结束标签内（例如div框架，

不仅会获取div里面的内容，也会获取div自身的内容）的内容(识别html标签) 。

outerText 用来设置或获取包括本对象在内的起始和结束标签内的内容(只是获取文字内容)

（火狐不支持）

注：innerHTML与innerText的区别

读取的区别:

innerHTML会读取出标签和文本内容
innerText只会读取中其中的文本内容
outerHTML会读取出其自身的标签和其中的文本内容
outerText只会读取出其中的文本内容

写入的区别：

innerHTML只会写入文本内容
innerText会写入其中的标签和文本内容
innerouterHTML会将原来的标签代替为所写入的标签。
innerouterText会将缩写的文本内容和标签写入到页面中且将原来的标签代替

操作属性

oBox.id = 'newid'改变原来的id名字，
通过方法的形式读写
读：

eg：console.log(oBox.getAttribulte('id'));

写：

eg：console.log(oBox.setAttribute('id'，'newid'));

删：

eg：oBox.removeAttribute('id');

操作样式

只能读取行内样式

console.log(oBox.style.width)
console.log(oBox.style.height)
console.log(oBox.style.color)
console.log(oBox.style.backgroundColor)/

只能设置行内样式

oBox.style.width = '400px';//必须加单位。
oBox.style.backgroundColor = 'blue';//链接起来的样式要用驼峰命名来写

设置外联样式或者内部样式

获取元素样式值
console.log(document.getComputedStyle(oBox,false).width);ie不可使用
console.log(oBox.currentStyle.width);只支持IE

兼容写法

function getStyle(style,sttr){

if(obj.currentStyle){

return obj.currentStyle[attr];//attr 为变量在这里需要加上中括号

} else{

return docuemnt.getComputerStyle(obj,false)[attr];

}

console.log(oBox,'width');

DOM增删改

创建节点

document.createElement('标签名');

创建属性节点

var oAttr = document.createAttribute(“属性名”);（不常用）

oAttr.value = "attr-name";

oDiv.setAttributeNode(oAttr);

创建文本节点

对象.innerHTML = "";

var oText = document.createTextNode(“文本”); // 文本中的HTML标签实体化

oDiv.appendChild(oText);

追加到页面当中

父对象.appendChild(newNode) // 插入到父对象最后。

父对象.insertBefore(newNode, existsNode) // 插入到什么对象之前。

修改(替换)节点

父对象.replaceChild(newNode,existsNode); // 前面的替换后面的

删除节点

父对象.removeChild(oldNode);

注：如果确定要删除节点，最好也清空内存对象=null;

(详情参考最新完整留言板);

表格操作

获取元素，修改元素，删除元素，添加元素

获取元素：

var oTable = document.getElementById('table');
var oTbody = oTable.tBodies[0];//获取table中的tbody，tbody浏览器默认添加
var oTr = oTbody.rows[0];//获取tbody中的某一行。
var oTd = oTr.Cells[0];//获取这一行中的某一列。
console.log(oTd.innerHTML);获取到td的文本内容

修改：

oTd.innerHTML = '新的内容'

写入:

var oNewtr = oTbody.insertRow[1];//在tbody中添加新的一行
var oNewtd = oNewtd.insertCell[1];//在岗创建的行中添加新的一列。
oMewtd.innerHTML = '新的文本内容';

删除:

var deleteTr = oTbody.rows[2];//获取到tbody中的要删除的行
oTbody.removeChild(deleteTr);//删除获取到的行。

猜你喜欢