核心DOM与HTML DOM

来源：互联网发布：营改增晨曦预算软件编辑：程序博客网时间：2024/05/16 17:09

核心DOM之节点的修改
节点的修改：1.创建节点

2.复制节点

3.删除节点

4.替换节点

1.创建节点——createElement

insertBefore：放在什么之前

<body>

<div id="div1">

<h1>喜欢的图片</h1>

<button onclick="newNode()">增加一幅图片</button>

<br>

<img id="img1" src="../../img/3.jpg" alt="">

</div>

</body>

<script>

function newNode() {

var div1 = document.getElementById("div1");

var oldNode = document.getElementById("img1");

var image = document.createElement("img");

image.src = "../../img/2.jpg";

div1.insertBefore(image,oldNode);

}

</script>

2.复制节点——cloneNode

appendChild：放在什么之后

<body>

<div id="div1">

<h1>喜欢的图片</h1>

<button onclick="copyNode()">复制图片</button>

<br>

<img id="img1" src="../../img/3.jpg" alt="">

</div>

</body>

<script>

function copyNode() {

var image = document.getElementById("img1");

var copyIamge = image.cloneNode();

document.body.appendChild(copyIamge);

}

</script>

3.删除节点——removeChild

<body>

<h1>图片</h1>

<img id="img1" src="../../img/4.jpg" alt="">

<button onclick="remove1()">删除图片</button>

</body>

<script>

function remove1(){

var img1 = document.getElementById("img1");

document.body.removeChild(img1);

}

</script>

4.替换节点——replaceChild

<body>

<h1>图片</h1>

<img id="img1" src="../../img/4.jpg" alt="">

<button onclick="replace1()">替换图片</button>

</body>

<script>

function replace1() {

var oldIamge = document.getElementById("img1");

var newImage = document.createElement("img");

newImage.src = "../../img/2.jpg";

document.body.replaceChild(newImage,oldIamge);

}

</script>

</script>
HTML DOM之表格行列的修改
表格对象：1.增加一行
2.删除第几行
3.修改标题
4.实现购物车删除栏效果
1.增加一行——insertRow
增加该行中的第几列——insertCell
<body>
<table id="myTable" border="1" style="border-collapse: collapse" width="300" height="100">
<tr>
<td>书名</td>
<td>价格</td>
<td><button onclick="delete3(this)">删除</button></td>
</tr>
<tr>
<td>看得见风景的房间</td>
<td>￥30</td>
<td><button onclick="delete3(this)">删除</button></td>
</tr>
<tr id="tr2">
<td>幸福从天而降</td>
<td>￥18.5</td>
<td><button onclick="delete3(this)">删除</button></td>
</tr>
<tr>
<td>60个瞬间</td>
<td>￥32</td>
<td><button onclick="delete3(this)">删除</button></td>
</tr>
</table>
<button onclick="insert1()">增加一行</button>
</body>
<script>
function insert1() {
var table = document.getElementById("myTable");
var row1 = table.insertRow(2);
var cell1 = row1.insertCell(0);
var cell2 = row1.insertCell(1);
var cell3 = row1.insertCell(2);
cell1.innerHTML= "钢铁是怎样炼成的";
cell2.innerHTML = "￥50";
cell3.innerHTML = "<button onclick='delete3(this)'>删除</button>";
}
</script>
2.删除第几行——deleteRow
<body>
<button onclick="delete2()">删除第二行</button>
<script>
function delete2() {
var table = document.getElementById("myTable");
table.deleteRow(1);
}
</script>
3.修改标题——row[]：返回某一行
<body>
<button onclick="changeTitle()">修改标题</button>
</body>
<script>
function changeTitle() {
var table = document.getElementById("myTable");
table.rows[0].cells[0].align = "center";
table.rows[0].cells[1].align = "center";
}
</script>
4.实现购物车删除栏效果——rowIndex[]：返回该行所在的行数
<body>
<table id="myTable" border="1" style="border-collapse: collapse" width="300" height="100">
<tr>
<td>书名</td>
<td>价格</td>
<td><button onclick="delete3(this)">删除</button></td>
</tr>
<tr>
<td>看得见风景的房间</td>
<td>￥30</td>
<td><button onclick="delete3(this)">删除</button></td>
</tr>
<tr id="tr2">
<td>幸福从天而降</td>
<td>￥18.5</td>
<td><button onclick="delete3(this)">删除</button></td>
</tr>
<tr>
<td>60个瞬间</td>
<td>￥32</td>
<td><button onclick="delete3(this)">删除</button></td>
</tr>
</table>
</body>
<script>
function delete3(obj) {
var num = obj.parentNode.parentNode.rowIndex;
var table = document.getElementById("myTable");
table.deleteRow(num);
}
</script>

阅读全文

0 0