1. 访问特定元素
document.getElementById('id')
2. 根据元素名访问
document.getElementsByTagName('img')
值得注意的是,上述返回的是一个类数组NodeList,他是一个特殊的集合,动态的集合,不是一个Array对象,因此不能对其使用数组方法,例如push()等。NodeList的唯一属性是length,其唯一的方法是item(),该方法接收一个数值参数作为索引,返回该位置的元素
var imgs = document.getElementsByTagName('img');
imgs.item(3);
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<p><img src="001.jpg" alt="xxx" /></p>
<p><img src="002.jpg" alt="xxx" /></p>
<p><img src="003.jpg" alt="xxx" /></p>
<script>
var imgs = document.getElementsByTagName('img');
console.log(imgs.length);//3
var p = document.createElement('p');
var img = document.createElement('img');
img.src = "haha.jpg";
p.appendChild(img);
var paras = document.getElementsByTagName('p');
paras.item(0).parentNode.appendChild(p);
console.log(imgs.length);//4
console.log(paras.length);//4
</script>
</body>
</html>
3. 使用Selects API
方法 | |
document.querySelector() | 返回匹配选择器的第一个结果 |
document.querySelectorAll() | 返回选择匹配其的所有结果 |
值得注意的是,选择器语法派生自支持CSS选择器的语法。
4. 设置元素的CSS样式属性
document.getElementById('id').style.backgroundColor = 'white';
document.getElementById('id').setAttribute("style", "属性:属性值;...");
document.getElementById('id').setAttribute("className", "class1");
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
.class1{
background-color:red;
font-size:20px;
}
</style>
</head>
<body>
<p id="p1">这是一个小小的测试</p>
<script>
var p1 = document.getElementById('p1');
//方式一
//p1.style.backgroundColor = 'red';
//p1.style.fontSize = '20px';
//方式二
//p1.setAttribute('style', 'background-color:red;font-size:20px');
//方式三
p1.setAttribute("class", "class1");
//方式四
//var styleAttr = document.createAttribute("style");
//styleAttr.nodeValue = "background-color:red";
//p1.setAttribute(styleAttr);
</script>
</body>
</html>
5. 对无序列表应用条纹主题
<body>
<ul id="u1">
<li>111</li>
<li>222</li>
<li>333</li>
<li>444</li>
</ul>
<script>
var list = document.querySelectorAll('li');
for (var i = 0; i < list.length; i++) {
list[i].setAttribute('style', "background-color:red");
}
</script>
</body>
6. 找出共享同一属性的所有元素
document.querySelectorAll('*[class]')//选择了所有包含属性的元素
document.querySelectorAll('*[class="class1"]')//选择了所有class属性为red的所有元素
document.querySelectorAll('*[class*="class1"')//选择所有class属性包含字符串class1的所有元素
7. 给新的段落添加文本
<body>
<ul id="u1">
<li>222</li>
<li>222</li>
<li>333</li>
<li></li>
</ul>
<script>
var list = document.querySelectorAll('li');
for (var i = 0; i < list.length; i++) {
list[i].setAttribute('style', "background-color:red");
}
var li = document.querySelectorAll('li')[3];
var txt = document.createTextNode("this is a example");
li.appendChild(txt);
</script>
</body>
8. 从HTML表格删除行
当从Web文档删除一个元素的时候,不仅会删除该元素,而且还会删除其所有的子元素。若想要在完全丢弃被删除的元素之前来处理其内容的话,在这个DOM删改中,可以获取对要删除的元素的一个引用。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
table{
border-collapse:collapse;
}
td,th{
padding:5px;
border:1px solid #ccc;
}
tr:nth-child(2n+1){
background-color:#eeffee;
}
</style>
</head>
<body>
<table id="table1">
<tr>
<th>标题1</th>
<th>标题2</th>
<th>标题3</th>
<th>标题4</th>
</tr>
</table>
<div id="result"></div>
<script>
var values = new Array(4);
values[0] = [32, "hahh", 78.3, 90];
values[1] = ["ddd", "ioi", "89", 78];
values[2] = ["898", "dgs", "yuiu", "hdsh"];
values[3] = ["uiui", 89.67, "hdsjhj", "jdiso"];
var mixed = document.getElementById("table1");
var tbody = document.createElement("tbody");
for (var i = 0; i < values.length; i++) {
var tr = document.createElement("tr");
for (var j = 0; j < values[i].length; j++) {
var td = document.createElement("td");
var txt = document.createTextNode(values[i][j].toString());
td.appendChild(txt);
tr.appendChild(td);
}
//绑定事件处理程序
tr.onclick = prunerow;
tbody.appendChild(tr);
mixed.appendChild(tbody);
}
function prunerow() {
//删除行
var parent = this.parentNode;
var oldrow = parent.removeChild(this);
//来自删除行的数据的datastring
var datastring = "";
for (var i = 0; i < oldrow.childNodes.length; i++) {
var cell = oldrow.childNodes[i];
datastring += cell.firstChild.data + "";
}
//输出消息
var msg = document.createTextNode("removed " + datastring);
var p = document.createElement("p");
p.appendChild(msg);
document.getElementById('table1').appendChild(p);
}
</script>
</body>
</html>
9. 添加一个页面覆盖
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
table{
border-collapse:collapse;
}
td,th{
padding:5px;
border:1px solid #ccc;
}
tr:nth-child(2n+1){
background-color:#eeffee;
}
.overlay{
background-color:#000;
opacity:-5;
filter:alpha(opacity=50);
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
z-index:10;
}
.overlaymsg{
position:absolute;
background-color:yellow;
padding:10px;
width:200px;
height:200px;
font-size:2em;
z-index:11;
top:50%;
left:50%;
margin-left:-100px;
margin-top:-100px;
}
</style>
</head>
<body>
<table id="table1">
<tr>
<th>标题1</th>
<th>标题2</th>
<th>标题3</th>
<th>标题4</th>
</tr>
</table>
<div id="result"></div>
<script>
var values = new Array(4);
values[0] = [32, "hahh", 78.3, 90];
values[1] = ["ddd", "ioi", "89", 78];
values[2] = ["898", "dgs", "yuiu", "hdsh"];
values[3] = ["uiui", 89.67, "hdsjhj", "jdiso"];
var mixed = document.getElementById("table1");
var tbody = document.createElement("tbody");
for (var i = 0; i < values.length; i++) {
var tr = document.createElement("tr");
for (var j = 0; j < values[i].length; j++) {
var td = document.createElement("td");
var txt = document.createTextNode(values[i][j].toString());
td.appendChild(txt);
tr.appendChild(td);
}
//绑定事件处理程序
tr.onclick = prunerow;
tbody.appendChild(tr);
mixed.appendChild(tbody);
}
function prunerow() {
//删除行
var parent = this.parentNode;
var oldrow = parent.removeChild(this);
//来自删除行的数据的datastring
var datastring = "";
for (var i = 0; i < oldrow.childNodes.length; i++) {
var cell = oldrow.childNodes[i];
datastring += cell.firstChild.data + "";
}
//输出消息
var msg = document.createTextNode("removed " + datastring);
var p = document.createElement("p");
p.appendChild(msg);
document.getElementById('table1').appendChild(p);
}
//创建覆盖
function displayPopup() {
var div = document.getElementById('result');
div.setAttribute("class", "overlay");
//创建图像
var msg = document.createElement("div");
var txt = document.createTextNode("please join our mailing list!(click to close.)");
msg.appendChild(txt);
msg.setAttribute("id", "msg");
msg.setAttribute("class", "overlaymsg");
//单击以恢复页面
msg.onclick = restore;
//将消息附加到覆盖
document.body.appendChild(msg);
}
//将页面恢复正常
function restore() {
document.body.removeChild(document.getElementById("result"));
document.body.removeChild(document.getElementById("msg"));
document.body.removeChild(document.getElementById("table1"));
}
window.onload = function () {
displayPopup();
}
</script>
</body>
</html>