整理JavaScript对DOM中各种类型的元素的常用操作(2)

// 创建 table var table = document.createElement("table"); table.border = 1; table.width = "100%"; // 创建tbody var tbody = document.createElement("tbody"); table.appendChild(tbody); // 创建第一行 tbody.insertRow(0); tbody.rows[0].insertCell(0); tbody.rows[0].cells[0].appendChild(document.createTextNode("cell 1,1")); tbody.rows[0].insertCell(1); tbody.rows[0].cells[1].appendChild(document.createTextNode("cell 2,1")); // 创建第二行 tbody.insertRow(01); tbody.rows[1].insertCell(0); tbody.rows[1].cells[0].appendChild(document.createTextNode("cell 1,2")); tbody.rows[1].insertCell(1); tbody.rows[1].cells[1].appendChild(document.createTextNode("cell 2,2")); document.body.appendChild(table);

选择符API
querySelector()方法

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

querySelectorAll()方法

// 取得某<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");

HTML5
与类相关的扩充
getElementsByClassName()方法：
该方法可以通过document对象及所有HTML元素调用该方法。

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

焦点管理

HTML5也添加了辅助管理DOM焦点的功能。首先就是document.activeElement属性，这个属性始终会引用DOM中当前获得了焦点的元素。

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

默认情况下，文档刚刚加载完成时，document.activeElement中保存的是document.body元素的引用。文档加载期间，docuemnt.activeElement的值为null。
另外就是新增了document.hasFocus()方法，这个方法用于确定文档是否获得了焦点。

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

您可能感兴趣的文章: