DOM Awesome JS系列

DOM 方法总结

[TOC]

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="foo\bar"></div>  
<div id="foo:bar"></div>

<script>  
  console.log('#foo\bar')               // "#fooar"
  document.querySelector('#foo\bar')    // 不匹配任何元素

  console.log('#foo\\bar')              // "#foo\bar"
  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);
    }
}

enter link description here

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  

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