前端基础笔记

【javascript】DOM扩展

2017-12-07  本文已影响1人  shanruopeng

选择符API

1、querySelector()方法

//取得body 元素
var body = document.querySelector("body");
//取得ID 为"myDiv"的元素
var myDiv = document.querySelector("#myDiv");
//取得类为"selected"的第一个元素
var selected = document.querySelector(".selected");
//取得类为"button"的第一个图像元素
var img = document.body.querySelector("img.button");

2、querySelectorAll()方法

querySelectorAll()方法接收的参数也是一个CSS 选择符，这个方法返回的是一个NodeList 的实例。

//取得某<div>中的所有<em>元素（类似于getElementsByTagName("em")）
var ems = document.getElementById("myDiv").querySelectorAll("em");
//取得类为"selected"的所有元素
var selecteds = document.querySelectorAll(".selected");
//取得所有<p>元素中的所有<strong>元素
var strongs = document.querySelectorAll("p strong");

var i, len, strong;
for (i=0, len=strongs.length; i < len; i++){
    strong = strongs[i]; //或者strongs.item(i)
    strong.className = "important";
}

3、matchesSelector()方法

if (document.body.matchesSelector("body.page1")){
//true
}

function matchesSelector(element, selector){
    if (element.matchesSelector){
        return element.matchesSelector(selector);
    } else if (element.msMatchesSelector){
        return element.msMatchesSelector(selector);
    } else if (element.mozMatchesSelector){
        return element.mozMatchesSelector(selector);
    } else if (element.webkitMatchesSelector){
        return element.webkitMatchesSelector(selector);
    } else {
        throw new Error("Not supported.");
    }
}
if (matchesSelector(document.body, "body.page1")){
//执行操作
}

元素遍历

/**要跨浏览器遍历某元素的所有子元素**/

//过去
var i,
len,
child = element.firstChild;
while(child != element.lastChild){
    if (child.nodeType == 1){ //检查是不是元素
        processChild(child);
    }
    child = child.nextSibling;
}

//使用Element Traversal 新增的元素

var i,
len,
child = element.firstElementChild;
while(child != element.lastElementChild){
    processChild(child); //已知其是元素
    child = child.nextElementSibling;
}

HTML5

1、与类相关的扩充

(1)getElementsByClassName()方法、

//取得所有类中包含"username"和"current"的元素，类名的先后顺序无所谓
var allCurrentUsernames = document.getElementsByClassName("username current");
//取得ID 为"myDiv"的元素中带有类名"selected"的所有元素
var selected = document.getElementById("myDiv").getElementsByClassName("selected");

(2)classList 属性

<div class="bd user disabled">...</div>

//删除"user"类
//首先，取得类名字符串并拆分成数组
var classNames = div.className.split(/\s+/);
//找到要删的类名
var pos = -1,
i,
len;
for (i=0, len=classNames.length; i < len; i++){
    if (classNames[i] == "user"){
        pos = i;
        break;
    }
}
//删除类名
classNames.splice(i,1);
//把剩下的类名拼成字符串并重新设置
div.className = classNames.join(" ");

<div class="bd user disabled">...</div>

//删除"user"类
div.classList.remove("user");

//删除"disabled"类
div.classList.remove("disabled");

//添加"current"类
div.classList.add("current");

//切换"user"类
div.classList.toggle("user");

//确定元素中是否包含既定的类名
if (div.classList.contains("bd") && !div.classList.contains("disabled")){
    //执行操作
)

//迭代类名
for (var i=0, len=div.classList.length; i < len; i++){
    doSomething(div.classList[i]);
}

2、焦点管理

(1)document.activeElement

var button = document.getElementById("myButton");
button.focus();
alert(document.activeElement === button); //true

(2)document.hasFocus()

var button = document.getElementById("myButton");
button.focus();
alert(document.hasFocus()); //true

3、HTMLDocument的变化

(1)readyState 属性

Document 的readyState 属性有两个可能的值：

if (document.readyState == "complete"){
//执行操作
}

(2)兼容模式

if (document.compatMode == "CSS1Compat"){
    alert("Standards mode");
} else {
    alert("Quirks mode");
}

(3)head属性

-作为对document.body 引用文档的<body>元素的补充，HTML5 新增了document.head 属性，引用文档的<head>元素。

var head = document.head || document.getElementsByTagName("head")[0];

4、字符集属性

(1)charset

alert(document.charset); //"UTF-16"
document.charset = "UTF-8";

(2)defaultCharset

if (document.charset != document.defaultCharset){
    alert("Custom character set being used.");
}

5、自定义数据属性

<div id="myDiv" data-appId="12345" data-myname="Nicholas"></div>

var div = document.getElementById("myDiv");
//取得自定义属性的值
var appId = div.dataset.appId;
var myName = div.dataset.myname;
//设置值
div.dataset.appId = 23456;
div.dataset.myname = "Michael";
//有没有"myname"值呢？
if (div.dataset.myname){
    alert("Hello, " + div.dataset.myname);
}

6、插入标记

(1)innerHTML属性

<div id="content">
    <p>This is a <strong>paragraph</strong> with a list following it.</p>
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>
</div>

<p>This is a <strong>paragraph</strong> with a list following it.</p>
<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

div.innerHTML = "_<script defer>alert('hi');<\/script>";
div.innerHTML = "<div>&nbsp;</div><script defer>alert('hi');<\/script>";
div.innerHTML = "<input type=\"hidden\"><script defer>alert('hi');<\/script>";

(2)outerHTML属性

<div id="content">
    <p>This is a <strong>paragraph</strong> with a list following it.</p>
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>
</div>

div.outerHTML = "<p>This is a paragraph.</p>";

//DOM 脚本代码
var p = document.createElement("p");
p.appendChild(document.createTextNode("This is a paragraph."));
div.parentNode.replaceChild(p, div);

(3)insertAdjacentHTML()方法

//作为前一个同辈元素插入
element.insertAdjacentHTML("beforebegin", "<p>Hello world!</p>");
//作为第一个子元素插入
element.insertAdjacentHTML("afterbegin", "<p>Hello world!</p>");
//作为最后一个子元素插入
element.insertAdjacentHTML("beforeend", "<p>Hello world!</p>");
//作为后一个同辈元素插入
element.insertAdjacentHTML("afterend", "<p>Hello world!</p>");

(4)内存与性能问题

for (var i=0, len=values.length; i < len; i++){
    ul.innerHTML += "<li>" + values[i] + "</li>"; //要避免这种频繁操作！！
}

/**
最好的做法是单独构建字符串，然后再一次
性地将结果字符串赋值给innerHTML
**/

var itemsHtml = "";
for (var i=0, len=values.length; i < len; i++){
    itemsHtml += "<li>" + values[i] + "</li>";
}
ul.innerHTML = itemsHtml;

7、scrollIntoView()方法

//让元素可见
document.forms[0].scrollIntoView();

专有扩展

(1)文档模式

<meta http-equiv="X-UA-Compatible" content="IE=IEVersion">

(2）children属性

var childCount = element.children.length;
var firstChild = element.children[0];

（3）contains()方法

alert(document.documentElement.contains(document.body)); //true
掩码 节点关系
1 无关（给定的节点不在当前文档中）
2 居前（给定的节点在DOM树中位于参考节点之前）
4 居后（给定的节点在DOM树中位于参考节点之后）
8 包含（给定的节点是参考节点的祖先）
16 被包含（给定的节点是参考节点的后代） 
var result = document.documentElement.compareDocumentPosition(document.body);
alert(!!(result & 16));

function contains(refNode, otherNode){
    if (typeof refNode.contains == "function" &&
    (!client.engine.webkit || client.engine.webkit >= 522)){
    /**检查了当前浏览器所用的WebKit 版本号，如果浏览器是WebKit 且至少是Safari 3（WebKit版本号为522 或更高）**/
        return refNode.contains(otherNode);
    } else if (typeof refNode.compareDocumentPosition == "function"){
        return !!(refNode.compareDocumentPosition(otherNode) & 16);
    } else {
        var node = otherNode.parentNode;
        do {
            if (node === refNode){
                return true;
            } else {
                node = node.parentNode;
            }
        } while (node !== null);
        return false;
    }
}

(4)插入文本

<div id="content">
    <p>This is a <strong>paragraph</strong> with a list following it.</p>
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>
</div>

This is a paragraph with a list following it.
Item 1
Item 2
Item 3

div.innerText = "Hello world!";

<div id="content">Hello world!</div>

function getInnerText(element){
    return (typeof element.textContent == "string") ?
        element.textContent : element.innerText;
}
function setInnerText(element, text){
    if (typeof element.textContent == "string"){
        element.textContent = text;
    } else {
        element.innerText = text;
    }
}
setInnerText(div, "Hello world!");
alert(getInnerText(div)); //"Hello world!"

div.outerText = "Hello world!";

//这行代码实际上相当于如下两行代码：
var text = document.createTextNode("Hello world!");
div.parentNode.replaceChild(text, div);

滚动

The scrollByLines method is only supported by Firefox, use the cross-browser scrollBy method instead.

好好学习
上一篇 下一篇

猜你喜欢

热点阅读