使用元素对象
- 使用以下的一组属性能够读取或者修改被代表的元素的数据,属性如下:
使用类
- 有两种方法来处理元素的类,className和classList
- className返回一个类的列表。使用举例如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
p {
border: 2px solid black;
width:200px;
height:100px
}
p.newclass{
background-color: lightcoral;
}
</style>
</head>
<body>
<p class="you gala" id="text">
像条狗,更像一个笑话,也许我很傻,但我不会怕,我知道只有不断出发,才能够紧随你纵情的步伐
</p>
<button id="pressme">Press Me</button>
<script>
document.getElementById("pressme").onclick = function(e){
console.log("按我添加一个新类!")
document.getElementById("text").className += " newclass"
}
</script>
</body>
</html>
- 使用classList属性返回一个DOMTokenList对象,这个对象定义了一些有用的方法和属性来管理类列表
- classList使用举例如下(还是上面的代码):
使用元素属性
- 后面四种操作属性的方法使用举例
使用以data-开头的属性
- 网站中经常会看到以data-开头的属性定义,虽然W3C不认定,但最新HTML5规定data-是合理的,在HTML5中,任何以data-开始的都是自定义属性,通常它用来实现一些HTML里没有明确定义的元素,把用户自定义的属性应用到代码中
- 在DOM中可以通过dataset属性来操作这些自定义属性,返回一个包含值的数组。如下是使用方法示例
- 使用dataset需要注意的几点是,不根据位置进行索引而是根据名称来进行索引,因此遍历也是用for in语句。(如下)
使用所有属性
- 可以通过attributes属性获取一个包含某元素所有属性的集合,它会返回一个由 Attr 对象构成的数组。
使用 text 对象
- 元素的文本内容由text对象代表,在文档模型中表现为元素的子对象
- text对象的成员如下
修改模型
- DOM 操纵成员的方法有以下好多种呀
- 下面两个是创建新元素的方法
创建和删除元素
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
table {
border: 2px solid black;
border-collapse: collapse;
margin: 10px;
}
td {
padding:4px 5px;
}
</style>
</head>
<body>
<table border="1">
<thead>
<th>Name</th>
<th>Color</th>
</thead>
<tbody id="fruitBody">
<tr><td>Banana</td><td>Yellow</td></tr>
<tr><td>Apple</td><td>Red/Green</td></tr>
</tbody>
<button id="add">Add Element</button>
<button id="remove">Remove Element</button>
</table>
<script>
var tableBody = document.getElementById("fruitBody")
document.getElementById("add").onclick = function(){
var row = tableBody.appendChild(document.createElement("tr"));
row.setAttribute("id","newrow");
row.appendChild(document.createElement("td"))
.appendChild(document.createTextNode("Plum"));
row.appendChild(document.createElement("td"))
.appendChild(document.createTextNode("Purple"));
};
document.getElementById("remove").onclick = function() {
var row = document.getElementById("newrow");
row.parentNode.removeChild(row);
}
</script>
</body>
</html>
复制元素
- 可以使用 cloneNode 方法来复制现有的元素,使用此方法可以不必从头开始创建想要的元素如下所示喽
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
table {
border: 2px solid black;
border-collapse: collapse;
margin: 10px;
}
td {
padding:4px 5px;
}
</style>
</head>
<body>
<table border="1">
<thead>
<th>Multiply</th>
<th>Result</th>
</thead>
<tbody id="fruitBody">
<tr><td class="sum">1*1</td><td class="result">1</td> </tr>
</tbody>
<button id="add">Add Row</button>
</table>
<script>
var tableBody = document.getElementById("fruitBody")
document.getElementById("add").onclick = function(){
var count = tableBody.getElementsByTagName("tr").length+1;
var newElem = tableBody.getElementsByTagName("tr")[0].cloneNode(true);
newElem.getElementsByClassName("sum")[0].firstChild.data = count+"*"+count;
newElem.getElementsByClassName("result")[0].firstChild.data = count*count;
tableBody.appendChild(newElem)
};
</script>
</body>
</html>
移动元素
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
table {
border: 2px solid black;
border-collapse: collapse;
margin: 10px;
}
td {
padding:4px 5px;
}
</style>
</head>
<body>
<table border="1">
<thead><th>Name</th><th>Color</th></thead>
<tbody>
<tr><td>Banana</td><td>Yellow</td></tr>
<tr id="apple"><td>Apple</td><td>Red/Green</td></tr>
</tbody>
</table>
<table border="1">
<thead><th>Name</th><th>Color</th></thead>
<tbody id="fruitBody">
<tr><td>Plum</td><td>Purple</td></tr>
</tbody>
</table>
<button id="move">Move</button>
<script>
document.getElementById("move").onclick = function(){
var elem = document.getElementById("apple");
document.getElementById("fruitBody").appendChild(elem);
}
</script>
</body>
</html>
比较元素对象
- 使用 isSameNode 方法比较元素对象是否代表了同一个元素(代码是移动元素部分的代码)。
- 也可以使用isEqualNode方法来比较
使用HTML片段
- 使用innerHTML和outerHTML属性获取HTML片段
- outerHTML返回包含定义这个元素及其所有子元素的HTML,innerHTML属性则返回子元素的HTML
向文本块插入元素
- 向由Text对象代表的文本块添加元素(偷懒)