JavaScript教程
博客主页：划水的阿瞒的博客主页
欢迎关注🖱点赞🎀收藏⭐留言✒
系列专栏：JavaScript 首发时间：🎞2022年8月5日🎠
如果觉得博主的文章还不错的话，请三连支持一下博主哦
1.创建元素
1.1创建元素：document.createElement()
使用document.createElement()可以创建新元素。这个方法只接受一个参数，即要创建元素的标签名。
使用createElement()方法创建新元素的同时，也为新元素设置了ownerDocument属性，可以操作元素的特性。
新元素尚未被添加到文档树中，因此设置各种特性均不会影响浏览器的显示。要添加到文档树，可用appendChild()、insertBefore()、replaceChild()。（稍后讲到）
简单案例:
添加
2.节点关系
文本关系如下：
<div id="div1">
<div id="div2">2</div>
<div id="div3">3</div>
<div id="div4">4</div>
</div>
2.1父节点：parentNode
parentNode是指定节点的父节点.一个元素节点的父节点一般是一个元素(Element )节点。
每一个节点都有一个parentNode属性。
此时获取的parent就是div1
2.2子节点：childNodes
childNodes 返回包含指定节点的子节点的集合，该集合为即时更新的集合。
即时更新就是对节点元素的任意修改都会立即反映到结果里。
注意:子节点包括空格，回车等，不仅仅是标签元素(不同的浏览器有差异);
</head>
<body>
<div id="contentDiv">
<div id="oldDiv">这是网页的原始内容</div>
</div>
<button onclick="replaceNodeTest()">替换节点replaceNode</button>
3.4 删除节点：removeChild()
该方法移除节点，接受一个参数，即要移除的节点，同时该方法返回被移除的节点。只能是一个节点，不能是一组节点。
function removeNodeTest(){
var oldDiv = document.getElementById("oldDiv");
document.getElementById("contentDiv").removeChild(oldDiv);
}
<div id="contentDiv">
<div id="oldDiv">这是网页的原始内容</div>
</div>
<button onclick="removeNodeTest()">删除节点removeNode</button>
4.元素选择
4.1 getElementById()
返回一个匹配特定 ID的元素。id是大小写敏感的字符串，代表了所要查找的元素的唯一ID，如果没有则返回null。
4.2 getElementsByTagName()
getElementsByTagName() 方法返回一个实时的包含具有给出标签名的元素们的HTMLCollection。指定的元素的子树会被搜索，包括元素自己。
4.3 getElementsByName()
该方法返回一个实时的nodelist collection，包含文档中所有name属性匹配的标签。
4.4 getElementsByClassName()
该方法返回一个即时更新的 HTMLCollection，包含了所有拥有指定 class 的子元素。
5.属性操作
5.1 setAttribute()
添加一个新属性（attribute）到元素上，或改变元素上已经存在的属性的值。
5.2removeAttribute()该方法用于移除元素的属性。
5.3 getAttribute()
该方法返回元素上指定属性（attribute）的值。如果指定的属性不存在，则返
<head>
<meta charset="UTF-8">
<title></title>
<script language="JavaScript">
function clickMe(){
document.myimg.setAttribute("src","images/2.jpg");
document.myimg.removeAttribute("width");
alert(document.myimg.getAttribute("height"));
}
</script>
</head>
<body>
<img src="images/1.jpg" name="myimg" width="200" height="200" />
<button onclick="clickMe()">点点我</button>
</body>
6.表格操作
表格对象由表格，行和单元格三个对象组成，每一个对象都有自己的属性和方法
6.1 table对象的组成
6.2 tableRow表格行对象
6.3 tableCell单元格行对象
案例
//增加购买的商品
function addProd(){
//获取购买商品的额信息
var prodname = document.getElementById("pname").value;
var prodprice = document.getElementById("pprice").value;
var prodnum = document.getElementById("pnum").value;
//计算小计
var prodtotal = parseInt(prodprice)* parseInt(prodnum);
//增加一个购物菜单
//获取表格
var carTab = document.getElementById("carTab");
//获取表格一共有多少行
var row_count = carTab.rows.length;
//在最后增加一个新行
var new_row = carTab.insertRow(row_count);
new_row.id="prod_"+row_count;
//插入每一个单元格
var cell1 = new_row.insertCell(0);
cell1.innerHTML="<input type='checkbox' name='chkprod' value='"+row_count+"' />";
var cell2 = new_row.insertCell(1);
cell2.innerHTML=prodname ;
var cell3 = new_row.insertCell(2);
cell3.innerHTML=prodprice;
var cell4 = new_row.insertCell(3);
cell4.innerHTML=prodnum;
var cell5 = new_row.insertCell(4);
cell5.innerHTML=prodtotal;
var cell6 = new_row.insertCell(5);
cell6.innerHTML="<a href='javascript:updateProd("+row_count+")'>编辑</a>|<a href='javascript:deleteProd("+row_count+")'>删除</a>";
}
function deleteProd(prodid){
//根据商品的ID，获取要删除的商品所在行
var deleteRow = document.getElementById("prod_"+prodid);
//获取行的索引
var rowIndex = deleteRow.rowIndex;
//删除
var carTab = document.getElementById("carTab");
carTab.deleteRow(rowIndex);
}
//删除多行
function deleteProds(){
if(confirm("是否确认要删除选中的商品")){
//获取所有的复选按钮
var chks = document.getElementsByName("chkprod");
//遍历每一复选按钮(从后往前遍历)
for(var i = chks.length-1;i>= 0;i--){
var chk = chks[i];
//判断是否被选中
if(chk.checked == true){
deleteProd(chk.value);
}
}
}
}
//修改购买的数量
function updateProd(prod_id){
//获取修改的行
var updateRow = document.getElementById("prod_"+prod_id);
//获取要修改的数量的单元格
var numCell = updateRow.cells[3];
//把数量单元格里的内容变成一个输入框
numCell.innerHTML = "<input type='text' size='6' name='txtnum' value='"+numCell.innerHTML+"'/>";
//把边界单元格修改为提交
var editCell = updateRow.cells[5];
editCell.innerHTML="<a href='javascript:okProd("+prod_id+")'>提交</a>|<a href='javascript:deleteProd("+prod_id+")'>删除</a>";
}
//点击确认提交
function okProd(prod_id){
//获取要操作的行
var editRow = document.getElementById("prod_"+prod_id);
//获取本行中文本框总的值(input 标签第一个是复选按钮，第二个是数量)
var newnum =editRow.getElementsByTagName("input")[1].value;
//获取单价
var price = editRow.cells[2].innerHTML;
//把数量单远哥内容变化
editRow.cells[3].innerHTML=newnum;
//给小计重新赋值
editRow.cells[4].innerHTML = newnum * parseInt(price);
//为编辑按钮重新赋值
editRow.cells[5].innerHTML ="<a href='javascript:updateProd("+prod_id+")'>编辑</a>|<a href='javascript:deleteProd("+prod_id+")'>删除</a>";
}
标签部分
<h1>表格的基础操作</h1>
<table border="1" id="carTab" align="center">
<tr>
<td><a href="javascript:checkAll()">全选</a>|<a href="">全不选</a></td>
<td>商品名称</td>
<td>商品单价</td>
<td>商品数量</td>
<td>小计</td>
<td>操作</td>
</tr>
<tr id="prod_1">
<td><input type="checkbox" name="chkprod" value="1" /></td>
<td>方便面</td>
<td>2</td>
<td>3</td>
<td>6</td>
<td><a href="javascript:updateProd(1)">编辑</a>|
<a href="javascript:deleteProd(1)">删除</a>
</td>
</tr>
</table>
商品的名称：<input type="text" id="pname"/><br/>
商品的单价：<input type="text" id="pprice"/><br/>
商品的数量：<input type="text" id="pnum"/><br/>
<input type="button" value="购买" οnclick="addProd()"/>
<input type="button" value="删除" οnclick="deleteProds()"/>
249
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
