javascript权威指南第11章 DOM扩展

//javascript 权威指南 第三版 第11章 DOM扩展
//取得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");

//取得某div中的所有<em> 元素 类似于getElmenetsByTageNmae("em")
var ems = document.getElementById("myDiv").querySelectorAll("em");

//取得类为 selected 的所有元素
var selecteds = document.querySelectorAll(".selected");

//取得所有p 元素中所有strong 元素
var strongs = document.querySelectorAll("p strong"); //获取 p 标签下 strong 元素

var i, len, strong;

for (i = 0, len = strongs.length; i < len; i++) {
    strong = strongs[i];
    strong.className = "important";
}
//元素是否匹配，如果是返回true
document.body.MatchesSelector("body .page1");

//11.2 元素遍历

var element = document.body;
var i, len, child = element.firstChild;
while (child != element.lastChild) {
    if (child.nodeType == 1) { //检查是不是元素
        processChild(child);
    }
    child = child.nextSibling; //节点后的下一个（紧挨）节点
}

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

//取ID 为 mydiv 的元素中带有类名 selected 的所有元素
var selected = document.getElementById("mydiv").getElementsByClassName("selected");

var div = document.getElementById("div");
div.classList.remove("disabled"); //移除类
div.classList.add("current"); //添加类
div.classList.toggle("user"); //切换类

if (div.contains("bd") && !div.classList.contains("disabled")) {
    //执行操作
}
//迭代类名
for (var i = 0, len = div.classList.length; i < len; i++) {
    //操作
}

//11.3.2  焦点管理
var button = document.getElementById("mybutton");
button.focus();
if (document.activeElement == button) {
    //true; 判定文档激活的节点
}

//11.3.5 自定义数据属性
//<div id="mydiv" data-appId="12345" data-myname="Nicholas" ></div>
var div = document.getElementById("div");
//获取自定义属性值
var appId = div.dataset.appId;
var myname = div.dataset.myname;

//设置值
div.dataset.appId = 23556;
div.dataset.myname = "Michael";

//判定自定义属性是否存在
if (div.dataset.myname) {

}
// scrollIntoView 方法是Html提供的标准方法，将元素移入视图内
function scrollDiv() {
    var div = document.getElementById("myDiv");
    div.scrollIntoView(); //滚动到可见视图
    div.scrollIntoViewIfNeeded(true); //alignCenter=true 显示在视图窗口中部垂直方向
    //只有当元素不可见的情况下执行，如果在可见情况下不执行
    div.scrollByLines(30); // lineCount 将元素的内容滚动指定行高
    div.scrollByPages(1); // pageCount 将元素的内容滚动指定页面高度，具体高度由元素高度决定。
}
//<div id="topDiv" style="height:800px;">
//<input type="button" onclick="scrollDiv();">
//</div>
//<div id="myDiv">
//<ul>
//  <li></li>
//<li></li>
//<li></li>
//</ul>
//</div>