DOM

DOM 方法总结

DOM javascript

HTML5新加入的api:

querySelectorAll()

返回当前文档中匹配一个特定选择器的所有的元素(使用深度优先,前序遍历规则这样的规则遍历所有文档节点) .返回的对象类型是 NodeList. document.querySelectorAll(selectors);

function getElementsByTagNames(list,obj) {  
if (!obj) var obj = document;  
var tagNames = list.split(',');  
var resultArray = new Array();  
for (var i=0;i<tagNames.length;i++) {  
var tags = obj.getElementsByTagName(tagNames[i]);  
for (var j=0;j<tags.length;j++) {  
resultArray.push(tags[j]);  
}
}
var testNode = resultArray[0];  
if (!testNode) return [];  
if (testNode.sourceIndex) { // sourceIndex 为IE专有  
resultArray.sort(function (a,b) {  
return a.sourceIndex - b.sourceIndex;  
});
}
else if (testNode.compareDocumentPosition) {  
resultArray.sort(function (a,b) {  
return 3 - (a.compareDocumentPosition(b) & 6);  
});
}
return resultArray;  
}

原生选择器的简单实现 https://developer.mozilla.org/zh-CN/docs/Web/API/Document/

querySelectorAll
关键是获取所有选择器选择的元素按文档顺序来返回。

querySelector()

document.querySelector(selectors);
返回当前文档中第一个匹配特定选择器的元素(使用深度优先,前序遍历规则遍历所有文档节点)。

语法 : https://developer.mozilla.org/zh-CN/docs/Web/API/document/querySelector

如果没有找到匹配元素,则返回 null,否则找到多个匹配元素,则返回第一个匹配到的元素。

选择器非法字符

需要利用反斜杠进行转义 http://www.cnblogs.com/Wayou/p/html5webapi_queryselector.html

如果要匹配的ID或选择器不符合 CSS 语法(比如不恰当地使用了冒号或者空格),你必须用反斜杠将这些字符转义。由于 JavaScript 中,反斜杠是转义字符,所以当你输入一个文本串时,你必须将它转义两次(一次是为 JavaScript 字符串转义,另一次是为 querySelector 转义):

<div id="foobar"></div>  
<div id="foo:bar"></div>  
<script>  
console.log('#foobar') // "#fooar"  
document.querySelector('#foobar') // 不匹配任何元素  
console.log('#foo\bar') // "#foobar"  
console.log('#foo\\bar') // "#foo\bar"  
document.querySelector('#foo\\bar') // 匹配第一个div  
document.querySelector('#foo:bar') // 不匹配任何元素  
document.querySelector('#foo\:bar') // 匹配第二个div  
</script>  

分析:

翻译:http://web.jobbole.com/84141/ 原文:https://www.lvh.io/posts/queryselectorall-from-an-element-probably-doesnt-do-what-you-think-it-does.html# 上面文章将的很重要,由于使用的是css选择器,所以balabala。 CSS选择器是独立于整个页面的!

<div id="my-id">  
<img id="inside">  
<div class="lonely"></div>  
<div class="outer">  
<div class="inner"></div>  
</div>  
</div>  
document.querySelectorAll("#my-id div div").length === 1;  
document.querySelector("#my-id").querySelectorAll("div div").length === 3;  
注意上面的选择器,返回的结果不一样,这就是要注意的点。

方法汇总

查询:

document.getElementById();  
document.getElementsByTagName();  
document.getElementsByClassName();  
document.getElementsByName(); //name=""  
document.querySelector();  
document.querySelectorAll();  

创建:

document.createElement();  
document.createTextNode();  
document.createAttribute();  
// var a = document.createElement("p");
// a.value = "收拾收拾"

元素关系:

// 获取父元素、父节点
var parent = ele.parentElement;  
var parent = ele.parentNode;  
// 获取子节点,子节点可以是任何一种节点,可以通过nodeType来判断
var nodes = ele.children;  
// 查询子元素
var els = ele.getElementsByTagName('td');  
var els = ele.getElementsByClassName('highlight');  
// 当前元素的第一个/最后一个子元素节点
var el = ele.firstElementChild;  
var el = ele.lastElementChild;  
//对于直接获取元素节点,兼容性不好,一般是不加Element ,使用节点NodeType 判断
// 下一个/上一个兄弟元素节点:
var el = ele.nextElementSibling;  
var el = ele.previousElementSibling;  
**这里都是指的元素节点**
https://developer.mozilla.org/en-US/docs/Web/API/NonDocumentTypeChildNode/nextElementSibling  
https://developer.mozilla.org/en-US/docs/Web/API/Node/nextSibling  
//下一个,上一个节点
previousSibling  
nextSibling  

增删插:

// 添加、删除子元素
ele.appendChild(node); node是节点对象  
ele.removeChild(node);  
// 替换子元素
ele.replaceChild(el1, el2);  
// 插入子元素
parentElement.insertBefore(newElement, referenceElement);  

属性操作:

// 获取一个{name, value}的数组
var attrs = el.attributes;  
// 获取、设置属性
var c = el.getAttribute('class');  
el.setAttribute('class', 'highlight');  
// 判断、移除属性
el.hasAttribute('class');  
el.removeAttribute('class');  
// 是否有属性设置
el.hasAttributes();  

节点名称和值:

1.nodeName属性用来获取节点的名称,文本节点返回#text,元素节点返回标签名称(此时等价于tagName)。语法:目标节点.nodeName 返回大写的节点名。"P" "DIV"  
2.nodeType属性用来获取节点的类型,元素节点:1,属性节点:2,文本节点:3。语法:目标节点.nodeType  
3.nodeValue属性用来获取和设置节点的值。元素节点返回 null 。语法:目标节点.nodeValue  

节点指针:

// 不要总是忘了文本节点
1.childNodes属性用来获取元素节点的子节点,返回节点数组。语法:父节点.childNodes;  
2.children属性可以用来获取忽略了空白节点的有效节点(在某些浏览器上,空白符或换行符也是一个文本节点)。语法:父节点.children;  
3.firstChild属性可以用来获取元素的第一个子节点,等价于 childNodes[0]。语法:父节点.firstChild;  
3.lastChild属性可以用来获取元素的最后一个子节点,等价于 childNodes[childNodes.length-1]。语法:父节点.lastChild;  
4.previousSibling属性用来获取目标节点的前一个兄弟节点。语法:目标节点.previousSibling;  
5.nextSibling属性用来获取目标节点的后一个兄弟节点。语法:目标节点.nextSibling;  
6.parentNode属性用来获取已知节点的父节点。语法:子节点.parentNode;  
7.ownerDocument属性用来当前节点所在文档的根节点,等价于document。语法:目标节点.ownerDocument;  

扩展: insertAfter(); 此方法来自红宝书

/*
* newElement : 要插入的新元素
* targetElement : 目标元素
*/
function insertAfter(newElement,targetElement){  
var parent = targetElement.parentNode;  
if(parent.lastChild == targetElement){  
/*
如果目标元素是parent的最后一个子元素,则把新元素追加到parent元素上,
也就是在parent的子元素的末尾位置添加新元素
*/
parent.appendChild(newElement);  
}else{
/*
否则,就把新元素添加到目标元素和目标元素的下一个兄弟元素之间
*/
parent.insertBefore(newElement,targetElement.nextSibling);  
}
}

BOM:
BOM的核心是window,而window对象又具有双重角色,它既是通过js访问浏览器窗口的一个接口,又是一个Global(全局)对象。这意味着在网页中定义的任何对象,变量和函数,都以window作为其global对象。

window.close(); //关闭窗口  
window.alert("message"); //弹出一个具有OK按钮的系统消息框,显示指定的文本  
window.confirm("Are you sure?"); //弹出一个具有OK和Cancel按钮的询问对话框,返回一个布尔值  
window.prompt("What's your name?", "Default"); //提示用户输入信息,接受两个参数,即要显示给用户的文本和文本框中的默认值,将文本框中的值作为函数值返回  
window.status //可以使状态栏的文本暂时改变  
window.defaultStatus //默认的状态栏信息,可在用户离开当前页面前一直改变文本  
window.setTimeout("alert('xxx')", 1000); //设置在指定的毫秒数后执行指定的代码,接受2个参数,要执行的代码和等待的毫秒数  
window.clearTimeout("ID"); //取消还未执行的暂停,将暂停ID传递给它  
window.setInterval(function, 1000); //无限次地每隔指定的时间段重复一次指定的代码,参数同setTimeout()一样  
window.clearInterval("ID"); //取消时间间隔,将间隔ID传递给它  
window.history.go(-1); //访问浏览器窗口的历史,负数为后退,正数为前进  
window.history.back(); //同上  
window.history.forward(); //同上  
window.history.length //可以查看历史中的页面数  

Document对象:

document对象:实际上是window对象的属性,document == window.document为true,是唯一一个既属于BOM又属于DOM的对象  
document.lastModified //获取最后一次修改页面的日期的字符串表示  
document.referrer //用于跟踪用户从哪里链接过来的  
document.title //获取当前页面的标题,可读写  
document.URL //获取当前页面的URL,可读写  
document.anchors[0]或document.anchors["anchName"] //访问页面中所有的锚  
document.forms[0]或document.forms["formName"] //访问页面中所有的表单  
document.images[0]或document.images["imgName"] // 访问页面中所有的图像  
document.links [0]或document.links["linkName"] //访问页面中所有的链接  
document.applets [0]或document.applets["appletName"] //访问页面中所有的Applet  
document.embeds [0]或document.embeds["embedName"] //访问页面中所有的嵌入式对象  
document.write(); 或document.writeln(); //将字符串插入到调用它们的位置  

location对象:

location对象:表示载入窗口的URL,也可用window.location引用它  
location.href //当前载入页面的完整URL,如http://www.somewhere.com/pictures/index.htm  
location.portocol //URL中使用的协议,即双斜杠之前的部分,如http  
location.host //服务器的名字,如www.wrox.com  
location.hostname //通常等于host,有时会省略前面的www  
location.port //URL声明的请求的端口,默认情况下,大多数URL没有端口信息,如8080  
location.pathname //URL中主机名后的部分,如/pictures/index.htm  
location.search //执行GET请求的URL中的问号后的部分,又称查询字符串,如?param=xxxx  
location.hash //如果URL包含#,返回该符号之后的内容,如#anchor1  
location.assign("http:www.baidu.com"); //同location.href,新地址都会被加到浏览器的历史栈中  
location.replace("http:www.baidu.com"); //同assign(),但新地址不会被加到浏览器的历史栈中,不能通过back和forward访问  
location.reload(true | false); //重新载入当前页面,为false时从浏览器缓存中重载,为true时从服务器端重载,默认为false  

navigation对象:

navigator`对象:包含大量有关Web浏览器的信息,在检测浏览器及操作系统上非常有用,也可用window.navigator引用它  
`navigator.appCodeName` //浏览器代码名的字符串表示
navigator.appName //官方浏览器名的字符串表示  
navigator.appVersion //浏览器版本信息的字符串表示  
navigator.cookieEnabled //如果启用cookie返回true,否则返回false  
navigator.javaEnabled //如果启用java返回true,否则返回false  
navigator.platform //浏览器所在计算机平台的字符串表示  
navigator.plugins //安装在浏览器中的插件数组  
navigator.taintEnabled //如果启用了数据污点返回true,否则返回false  
navigator.userAgent //用户代理头的字符串表示  

参考链接:

http://www.smohan.net/blog/5020/
http://segmentfault.com/a/1190000000654274