JavaScript5——DOM高级编程

最新推荐文章于 2022-06-21 16:21:54 发布

千和儿

最新推荐文章于 2022-06-21 16:21:54 发布

阅读量262

点赞数 2

分类专栏： JavaScript 文章标签： javascript html css

本文链接：https://blog.csdn.net/m0_47887988/article/details/123764921

版权

JavaScript 专栏收录该内容

7 篇文章 1 订阅

订阅专栏

8.1 Core DOM的操作

查看节点
创建和增加节点
删除和替换节点

8.1.1 查看节点

访问指定节点的方法
- getElementById()：返回一个节点对象
- getElementsByName()：返回多个（节点数组）
- getElementsByTagName()：返回多个（节点数组）
查看/修改属性节点
- getAttribute("属性名")
- setAttribute("属性名","属性值")

<head>
    <meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
    <title>使用getAttribute读取节点的属性值</title>
    <style type="text/css">
        img{
            border:0px;
            float:left;
            padding:3px;
        }
        body{
            margin:0px;
            font-size:12px;
            line-height:20px;
        }
        input{
            margin-top:5px;
        }
    </style>
    <script type="text/javascript">
    	function hh(){
            var hText=document.getElementById("fruit").getAttribute("src");
            alert("图片的路径是："+hText);
        }
        function check(){
            var favor=document.getElementsByName("enjoy");
            var like="你喜欢的水果是：";
            for(var i=0;i<favor.length;i++){
                if(favor[i].checked==true){
                    like+="\n"+favor[i].getAttribute("value");
                }
            }
            alert(like);
        }
        function change(){
            var imgs=document.getElementsByTagName("img");
            imgs[0].setAttribute("src","images/grape.jpg");
        }
    </script>
</head>
<body>
    <img src="images/fruit.jpg" alt="水果图片" id="fruit" />
    <h1 id="love">
        选择你喜欢的水果：
    </h1>
    <input name="enjoy" type="checkbox" value="apple" />苹果
    <input name="enjoy" type="checkbox" value="banana" />香蕉
    <input name="enjoy" type="checkbox" value="grape" />葡萄
    <input name="enjoy" type="checkbox" value="pear" />梨
    <input name="enjoy" type="checkbox" value="watermelon" />西瓜
    <br />
    <input name="btn" type="button" value="显示图片路径" onclick="hh()" />
    <br />
    <input name="btn" type="button" value="喜欢的水果" onclick="check()" />
    <br />
    <input name="btn" type="button" value="改变图片" onclick="change()" />
</body>

如果编程时希望访问某个元素的父元素，但又不知道父元素的ID、name、tag，怎么办?

根据层次关系查找节点
- parentNode
- firstChild
- lastChild

obTable.lastChild.firstChild.firstChild.innerHTML：lastChild是tbody,（thead是firstChild），firstChild是tr,firstChild是td,innerHTML是欧阳兰。

<script type="text/javascript">
function checks(){
	var tt=document.getElementById("myTable");
	/*查找第二行第一个单元格内容*/
	var s=tt.lastChild.firstChild.firstChild.innerHTML;
	/*查找最后一行最后一个单元格内容
	var s=tt.lastChild.lastChild.lastChild.innerHTML;
	*/
	/*查找最后一行第一个单元格内容
	var s=tt.lastChild.firstChild.lastChild.innerHTML;
	*/
	alert(s);
	}
</script>

<body>
    <table border="0" cellspacing="0" cellpadding="0" id="myTable">
 		<thead>
   			<td>姓名</td>
    		<td>课程</td>
    		<td>成绩</td>
 		</thead>
		<tbody>
 		 	<tr>
    			<td>欧阳兰</td>
    			<td>语文</td>
    			<td>88</td>
  			</tr>
  			<tr>
    			<td>白杨</td>
    			<td>数学</td>
    			<td>96</td>
  			</tr>
  		</tbody>
	</table>
<input name="btn" type="button" value="第二行第一个单元格内容" onclick="checks()" />
</body>

8.1.2 创建和增加节点

创建和增加节点的方法：

createElement()：创建节点
appendChild()：末尾追加方式插入节点
insertBefore()：在指定节点前插入新节点
cloneNode()：克隆节点

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>增加节点</title>
    <script type="text/javascript">
    	function newNode(){
            var oldNode=document.getElementById("sixty1");//访问插入节点的位置
            var image=document.createElement("img");//创建一个图片节点
            image.setAttribute("src","images/newing.jpg");//设置图片路径
            
            document.body.insertBefore(image,oldNode);//插入图片到sixty1前面
        }
        function copyNode(){
            var image=document.getElementById("sixty1");//访问复制的节点
            var copyImage=image.cloneNode(false);//复制指定的节点
            document.body.appendChild(copyImage);//在页面最后增加节点
        }
    </script>
</head>
<body>
    <h2>
        喜欢的水果
    </h2>
    <input id="b1" type="button" value="增加一幅图片" onclick="newNode()" />
    <input id="b2" type="button" value="复制原图" onclick="copyNode()" />
    <br />
    <img src="images/sixty1.jpg" id="sixty1" alt="水果" />
    <img src="images/sixty2.jpg" id="sixty2" alt="果篮" />
</body>

8.1.3 删除和替换节点

删除和替换节点的方法：

removeChild():删除节点
replaceChild():替换节点

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
	<title>删除节点</title>
    <script type="text/javascript">
    	function delNode(){
            var dNode=document.getElementById("sixty1");//访问被删除的节点
            document.body.removeChild(dNode); //删除图片
        }
        function repNode(){
            var oldimage=document.getElementById("sixty2");//访问被替换的节点
            var newimage=document.createElement("img");//创建一个图片节点
            newimage.setAttribute("src","images/repimg.jgp");//设置图片路径
            document.body.replaceChild(newimage,oldimage);//替换原来的图片
        }
    </script>
</head>
<body>
    <h2>
        喜欢的水果
    </h2>
    <input id="b1" type="button" value="删除图片" onclick="delNode()" />
    <input id="b2" type="button" value="替换图片" onclick="repNode()" />
    <br />
    <img src="images/sixty1.jpg" id="sixty1" alt="水果" />
    <img src="images/sixty2.jpg" id="sixty2" alt="果篮" />
</body>

8.2 HTML DOM的特有对象和操作

8.2.1 HTML DOM对象

8.2.2 HTML DOM对象的属性访问

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
	<title>使用HTML DOM对象的属性访问节点</title>
    <script type="text/javascript">
    	function change(){
            var imgs=document.getElementById("s1");
            imgs.src="images/grape.jpg";
        }
        function show(){
            var hText=document.getElementById("s1").alt;
            alert("图片的alt是："+hText);
        }
    </script>
</head>
<body>
    <img src="images/fruit.jpg" id="s1" alt="水果图片" />
    <br />
    <input name="b1" type="button" value="改变图片" onclick="change()" />
    <input name="b2" type="button" value="显示图片路径" onclick="show()" />
</body>

8.2.3 HTML DOM对象 —— table对象

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
	<title>使用HTML DOM操作表格</title>
    <style type="text/css">
        body{
            font-size:13px;
            line-height:25px;
        }
        table{
            border-top:1px solid #333;
            border-left:1px solid #333;
            width:300px;
        }
        td{
            border-right:1px solid #333;
            border-bottom:1px solid #333;
        }
        .center{
            text-align:center;
        }
        .title{
            text-align:center;
            font-weight:bold;
            background-color:#cccccc;
        }
    </style>
    <script type="text/javascript">
    	function addRow(){
            var newRow=document.getElementById("myTable").insertRow(2);
            var.coll=newRow.insertCell(0);
            coll.innerHTML="幸福从天而降";
            var col2=newRow.insertCell(1);
            col2.innerHTML="&yen;18.5";
            col2.align="center";
        }
        function updateRow(){
            var uRow=document.getElemnetById("myTable").rows[0];
            uRow.className="title";
        }
        function delRow(){
            document.getElementById("myTable").deletRow(1);
        }
    </script>
</head>
<body>
    <table border="0" cellspacing="0" cellpadding="0" id="myTable">
        <tr id="row1">
        	<td>书名</td>
            <td>价格</td>
        </tr>
        <tr id="row2">
        	<td>看得见风景的房间</td>
            <td class="center">&yen;30.00</td>
        </tr>
        <tr id="row3">
        	<td>60个瞬间</td>
            <td class"center">&yen;32.00</td>
        </tr>
    </table>
    <input name="b1" type="button" value="增加一行" onclick="addRow()" />
    <input name="b2" type="button" value="删除第2行" onclick="delRow()" />
    <input name="b3" type="button" value="修改标题" onclick="updateRow()" />
</body>

千和儿

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
JavaScript5——DOM高级编程

8.1 Core DOM的操作查看节点创建和增加节点删除和替换节点 8.1.1 查看节点访问指定节点的方法 getElementById()：返回一个节点对象 getElementsByName()：返回多个（节点数组） getElementsByTagName()：返回多个（节点数组）查看/修改属性节点 getAttribute("属性名") setAtt...
复制链接

扫一扫