JS-----第七章DOM编程

于 2022-06-06 11:19:11 发布
阅读量932 收藏 8
点赞数
分类专栏： JS 文章标签： javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_68509156/article/details/125143033
版权

本章目标

理解文档对象模型

熟练掌握document对象访问页面元素

熟练掌握动态添加页面元素

通过DOM操作html页面中的标签，属性，样式等。

1.DOM编程概述

1.1 什么是DOM编程

​ 文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标记语言的标准编程接口。在网页上，组织页面（或文档）的对象被组织在一个树形结构中。

使用js代码来操作文档中的元素（标签元素，文本，属性）。

1.2 为什么要学习DOM编程

学习DOM操作 就是 操作页面中的标签/节点/元素的。

增删改

新增：新增什么？ 各种标签 本来不存在，但是我们又想用， 无中生有！

  1. 造标签 此时没有样式 创建
  2. 美化（设置样式，添加内容） 美化
  3. 将造好的标签 添加到 该添加的地方！添加

删除：删除标签

修改：1.修改样式 2.内容 3. 替换 4.属性

2.节点操作

对节点的操作 增删改查

2.1 节点概述

什么是节点？

  • 文档是一个文档节点。（页面中的汉字，空格符，特殊符号）
  • 所有的HTML元素都是元素/标签节点。 **
  • 所有 HTML 属性都是属性节点。
  • 文本插入到 HTML 元素是文本节点。

2.2 标签节点对象的获取

想操作页面中的某一个标签，要先拿到这个标签。

2.3 节点的操作

增加操作

名称

含义

document.createElement(标签名)

创建一个节点

insertBefore(新标签,哪个标签之前)

在哪个标签之前插入节点

父.appendChild(新标签)

在父节点的里边追加子节点

cloneNode()

复制节点，如果参数为true，还会复制当前节点的子孙节点，否则只复制当前节点。

删除操作

名称

含义

父.removeChild（子元素对象）

删除指定的子标签/子节点

自己.remove()

删除自身

修改操作

名称

含义

父.replaceChild(新标签, 旧标签);

将父标签中的旧标签用新标签替换掉

<!DOCTYPE html >
<html>
 <head>
  <title> New Document </title>
  <meta charset="utf-8">
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <style type="text/css">
	#con{
		width:300px;
		height:300px;
		border:2px solid red;
	}
  </style>
 </head>

 <body>
  <!--onclick="addYS()" 通过标签事件属性绑定函数-->
  <input type="button" value="添加元素" id="btnAdd" />
  <input type="button" value="删除元素" id="btnDelete" />
  <hr/>
  <div id="con">
  
  </div>

   <script type="text/javascript">
	//通过js方式绑定元素的事件函数
	//var btn = document.getElementById("btnAdd");
	// 为按钮的单击事件绑定一个函数
	// 改函数并不会马上运行，只有按钮点击的时候才会触发
	// btnAdd:通过id名获取元素对象
	btnAdd.onclick = function(){
		// 创建一个p元素，并添加到div中
		var myp = document.createElement("p");
		// 设置p元素的内容
		myp.innerHTML="这是一个P";
		// 将p元素添加到页面的div中，这样新加的元素才会显示出来
		con.appendChild(myp);
	}

	btnDelete.onclick=function(){
		//删除div中的元素
		//1.通过父删除子元素
		// con.lastElementChild:div中的最后一个元素
		//con.removeChild(con.lastElementChild);
		//2.通过子元素删除自己
		con.lastElementChild.remove();
	}

   </script>

 </body>
</html>

2.4 节点具有的属性

属性中包含Node关键字，获取都是节点(html标签,文本)

属性中包含Element关键字的，获取的都是元素(html元素/标签)

节点对象属性

含义

childNodes

所有直接子节点（包含文本节点和元素节点）

*children

所有元素子节点——获取所有的子标签

*firstElementChild

第一个子元素对象，获取的是html元素

firstChild

第一个子节点对象，获取的是节点

*lastElementChild

最后一个子元素对象

lastChild

最后一个子节点对象

parentNode

父节点

*parentElement

父元素

nextSibling

返回当前元素紧跟的下一个兄弟节点(包含文本/标签等)

*nextElementSibling

返回指定元素之后的下一个兄弟元素节点（相同节点树层中的下一个元素节点）。

previousSibling

返回当前元素上一个节点紧挨着的

*previousElementSibling

返回指定元素的前一个兄弟元素（相同节点树层中的前一个元素节点）

节点对象属性

含义

nodeValue

节点值 （文本节点的值）。文本节点和属性节点返回文本内容，元素节点返回null

nodeType

节点类型。1标签节点 2 属性节点 3文本节点

nodeName

节点名称。文本节点固定返回: #text 元素节点:返回标签名

<!DOCTYPE html >
<html>
 <head>
  <title> New Document </title>
 </head>

 <body>
  <div id="con">
	<h1>这是标题</h1>
	<span>这是span</span>
	<p>这是p元素</p>
  </div>

  <script type="text/javascript">
	//获取div
	var mydiv = document.getElementById("con");
	//firstElementChild:找父元素的第一个子元素
	var myh1 = mydiv.firstElementChild;
	//nodeName: 元素名字
	//alert(myh1.nodeName);
	//tagName :标签名
	//alert(myh1.tagName);
	//innerHTML:元素内部内容
	//alert(myh1.innerHTML);
	//outerHTML:元素包含自己标签的内容
	alert(myh1.outerHTML);

  </script>
 </body>
</html>

元素对象属性/方法

值

*value

文本框的值

id

标签的id属性值

name

表单元素的name属性值

className

class属性值

*innerHTML

标签中的所有HTML内容

outerHTML

包含标签本身以及标签体

innerText

标签中的所有文本内容

getAttribute("属性名")

获取标签属性值方法

setAttribute("属性名","属性值")

为标签设置属性方法

getAttributeNode("属性名")

获取属性节点对象方法

修改本身就有的属性 只要能直接 . 出来 就表示 . 出来的属性都是本身就有的（系统规定的）

2.5 常用查询节点方法

方法

说明

*getElementById

根据编号获取元素

getElementsByTagName

根据标签名获取元素数组

getElementsByClassName

根据类样式名获取元素数组

getElementsByName

根据元素的name属性查找元素数组

*querySelector

可以根据标签名，id名(#id)，类名(.类)获取单个元素

*querySelectorAll

可以根据标签名，id多名，类名获取元素数组

<!DOCTYPE html >
<html>
 <head>
  <title> New Document </title>
  <meta charset="utf-8">
 </head>

 <body>
  <div class="c1">这是一个div1</div>
  <p>这是一个p1</p>
  <p class="c1">这是一个p2</p>
  
  <div>这是一个div2</div>
  <p>这是一个p3</p>

  <script type="text/javascript">
	//var ary = [1,2,3,4];
	
	//获取当前页面中所有的p元素
	var pAry = document.getElementsByTagName("p");
	//pAry[0].innerHTML:访问第一个p元素的innerHTML属性
	//alert(pAry[0].innerHTML);
	//pAry[1].innerHTML:访问第二个p元素的innerHTML属性
	//alert(pAry[1].innerHTML);
	//alert(pAry[2].innerHTML);

	//获取class名字为c1的所有元素
	var ary = document.getElementsByClassName("c1");
	//遍历获取的元素数组
	/*for(var i=0;i<ary.length;i++){
		//获取其中的一个元素
		var ys = ary[i];
		//ys.innerHTML:获取遍历的元素的内部内容
		alert(ys.innerHTML);
	}*/

	//div元素
	//div元素.innerHTML: 显示的div元素的内容

	//对象:具有一系列的属性和行为
  </script>
 </body>
</html>
<!DOCTYPE html >
<html>
 <head>
  <title> New Document </title>
  <meta charset="utf-8">
 </head>

 <body>
  爱好:
  <input type="checkbox" name="hobby" value="奋斗"/>奋斗
  <input type="checkbox" name="hobby" value="运动"/>运动
  <input type="checkbox" name="hobby" value="看B站"/>看B站
  <input type="checkbox" name="hobby" value="读唐诗"/>读唐诗
  <input type="checkbox" name="hobby" value="练习毛笔字"/>练习毛笔字

  <input type="button" value="你的爱好是哪些?" id="btnShow1"/>
  <hr/>
  你喜欢的水果?
  <input type="checkbox" name="fruit" value="苹果"/>苹果
  <input type="checkbox" name="fruit" value="香蕉"/>香蕉
  <input type="checkbox" name="fruit" value="橘子"/>橘子
  <input type="checkbox" name="fruit" value="榴莲"/>榴莲

  <input type="button" value="你喜欢的水果是哪些?" id="btnShow2"/>

  <script type="text/javascript">
	//练习:获取选中的复选框

	//绑定按钮的单击事件
	btnShow1.onclick=function(){
		//1.获取所有的爱好复选框
		var ckAry = document.getElementsByName("hobby");
		//2.判断复选框是否处于选中状态
		//遍历获取的所有复选框
		for(var i=0;i<ckAry.length;i++){
			//获取当前遍历到的复选框
			var ck = ckAry[i];
			//判断这个复选框的状态
			// ck.checked:复选框的选中状态 true/false
			if(ck.checked==true){
				//这个复选框选中了，则提示它的值
				alert(ck.value);
			}
		}

		//一次性弹出所有选中内容
	}
  </script>
 </body>
</html>

querySelector,querySelectorAll

<!DOCTYPE html >
<html>
 <head>
  <title> New Document </title>
  <meta charset="utf-8">
 </head>
 <body>
  <div class="c1">这是一个div1</div>
  <p>这是一个p1</p>
  <p class="c1">这是一个p2</p>
  
  <div id="mydiv">这是一个div2</div>
  <p>这是一个p3</p>

  <script type="text/javascript">
	//使用querySelector，根据选择器(标签,.类,#id)获取单个元素
	//var d = document.querySelector("#mydiv");
	//alert(d.innerHTML);
	//使用querySelectorAll,根据选择器(标签,.类,#id)获取元素元素
	var ary = document.querySelectorAll(".c1");
	for(var i=0;i<ary.length;i++){
		alert(ary[i].innerHTML);
	}
  </script>
 </body>
</html>

3.案例练习

3.1 发表说说

分析：

​ 1.首先需要一个div装所有的评论。

​ 2.当点击发表按钮时 将评论添加到div中

​ 3.添加之前 先创建标签 < span>放名字 在创建一个span放内容 在将创建的两个span 添加到一个P标签中

<!DOCTYPE html>
<html>
 <head>
  <title> new document </title>
  <style type="text/css">
    fieldset{
        width:500px;
        height:300px;
        border:1px solid red;
        margin:0px auto;
        text-align:center
    }
    #con{
        border:2px dashed gray;
        height:200px;
        margin:10px;
        padding:10px;
        text-align:left;
​
    }
  </style>
​
 <script type="text/javascript">
    function send(){
        var xm = txtName.value;
        var nr = txtMsg.value;
        //var str = xm+"说:"+nr+"<br/>";
        //con.innerHTML +=str;
        var span1 = document.createElement("span");
        span1.innerHTML=xm+"说:";
        span1.style.backgroundColor="#ffff66";
​
        var span2 = document.createElement("span");
        span2.innerHTML=nr;
        span2.style.backgroundColor="lightblue";
        
        var p = document.createElement("p");
        p.style.border="1px solid gray";
        p.appendChild(span1);
        p.appendChild(span2);
​
        con.appendChild(p);
        
    }
​
    // 扩展，添加删除按钮删除说说
 </script>
​
 </head>
​
 <body>
    <fieldset>
        <legend>发表说说</legend>
        <div>
            姓名:
            <input type="text" id="txtName"/>
            内容:
            <input type="text" id="txtMsg"/>
            <input type="button" value="发表" onclick="send()"/>
        </div>
        <div id="con">
        
        </div>
    </fieldset>
 </body>
</html>

 扩展功能，添加删除按钮

掌握事件函数绑定的各种方式

 

<body>
  <!--标签事件绑定方式
  <input type="button" value="按钮1" id="btn1" onclick="test1()"/>
  <input type="button" value="按钮2" id="btn2" onclick="test2()"/>
  <input type="button" value="按钮3" id="btn3" onclick="test3()"/>
  -->

  <input type="button" value="按钮1" id="btn1" />
  <input type="button" value="按钮2" id="btn2" />
  <input type="button" value="按钮3" id="btn3" />

  <script type="text/javascript">
	function test1(){
		alert("1111");
	}
	function test2(){
		alert("2222");
	}
	function test3(){
		alert("3333");
	}

	//通过元素对象绑定事件/js方式绑定事件
	/*btn1.onclick=test1;
	btn2.onclick=test2;
	btn3.onclick=test3;*/

	//事件绑定匿名函数
	btn1.onclick=function(){
		//this：当前触发事件的元素
		alert(this.value);
	}
	btn2.onclick=function(){
		alert(this.value);
	}
	btn3.onclick=function(){
		alert(this.value);
	}

  </script>
 </body>

完成说说删除功能

<!DOCTYPE html >
<html>
 <head>
  <title> New Document </title>
  <meta charset="utf-8">
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <style type="text/css">
	fieldset{
		width:500px;
		border:2px solid gray;
		margin:0px auto;
		text-align:center;
	}
	#con{
		margin:10px;
		padding:10px;
		border:2px dashed gray;
		height:300px;
		text-align:left;
	}

	#con p{
		border:1px solid gray;
		padding:10px;
		/*变为相对定位*/
		position:relative;
	}

	#con .s1{
		background-color:#ffff99;
	}
	#con .s2{
		background-color:#6699ff;
	}

	#con .close{
		border:2px solid red;
		width:20px;
		height:20px;
		/*变为圆形*/
		border-radius:10px;
		text-align:center;
		line-height:20px;
		/*元素设置绝对定位:可以变为块状*/
		position:absolute;
		right:-10px;
		top:-10px;
		background-color:#cccc33;
		/*让鼠标放到span上时，变为手型*/
		cursor:pointer;
	}
  </style>
 </head>

 <body>
  <!--发表说说-->
  <fieldset>
	<legend>发表说说</legend>
	<div>
		姓名:
		<input type="text" name="xm" id="xm"/>
		内容:
		<input type="text" name="msg" id="msg"/>
		<input type="button" value="发表说说" onclick="sendMsg()"/>
	</div>
	<div id="con">
		
	</div>
  </fieldset>

  <script type="text/javascript">

	//定义函数，发表说说
	function sendMsg(){
		//获取姓名文本框的内容
		var name = xm.value;
		//获取内容框中的信息
		var xinxi = msg.value;

		//创建p元素
		var myp = document.createElement("p");
		
		//创建span元素
		var myspan1 = document.createElement("span");
		myspan1.innerHTML=name+"说:";
		//设置元素的行内样式
		//myspan1.style.backgrounColor="yellow";
		//设置元素的类样式
		myspan1.className="s1";

		//创建span元素
		var myspan2 = document.createElement("span");
		myspan2.innerHTML=xinxi;
		//设置元素的类样式
		myspan2.className="s2";

		//创建span元素，作为关闭按钮
		var myspanClose = document.createElement("span");
		myspanClose.innerHTML="x";
		myspanClose.className="close";
		//为元素绑定单击事件
		myspanClose.onclick=function(){
			//alert(123);
			//this:表示当前发生点击事件的span元素,固定写法
			//this.parentElement:当前元素的爹
			//remove():删除自己
			this.parentElement.remove();
		}

		//将两个span添加到p元素中
		myp.appendChild(myspan1);
		myp.appendChild(myspan2);
		myp.appendChild(myspanClose);

		//将p元素添加到div中
		con.appendChild(myp);
		
	}

  </script>

 </body>
</html>

3.2 购物车

 

分析：

​ 1.先搭建ui

​ 2.新增

新增基操：（没有任何限定条件）

添加条件：

1.新增商品时要先判断购物车中是否为空，如果为空直接新增，否则就判断

该商品在购物车中是否存在，如果不存在就新增，如果存在就让数量++；

抛出问题：我要怎么做才能取出 购物车中的每一个商品名称？

​ 可以看出 购物车中的每一个商品名称 都是所属tr的第二个子标签，那么我们可以通过 取出所有的tr,然后在去tr的第二个td子标签。

3.+ - 按钮

4.计算总价，和数量

5.删除一行

6.全选和全不选

7.删除多行

<!DOCTYPE html>
<html>
 <head>
  <title> new document </title>
  <meta charset="gbk"/>
  <script type="text/javascript">
    // 1.创建购物车UI(user interface)用户界面
    // 2.功能实现
    /*   
         a. 添加商品
            a1: 直接添加
            a2: 如果添加商品存在的时候，进行数量累加
         b. 调整数量,计算小计
            b1: 通过"+","-"调整数量
            b2: 通过文本框输入调整数量(数据校验)，通过文本框的onblur(失焦)事件处理
         c. 汇总合计(汇总选择商品的总价)
         d. 删除(单行删除)
         e. 选择部分商品(全选/部分选择/反选)
         f. 批量删除多个商品
    */
  </script>
 </head>
​
 <body>
  <div style="width:800px;height:500px;margin:10px auto;border:1px solid black">
    <!--商品信息部分-->
    <fieldset>
        <legend>商品信息</legend>
        <form name="frmGoods">
            <!--
                name属性用于向服务器传值的时候，做数据标识
                id属性用于在js中获取元素的查找条件
​
                使用元素名访问元素对象:frmGoods(表单名).goodsName(元素名)
                使用元素的id名访问元素对象: goodsName(元素id)
            -->
            
            品名:<input type="text" name="goodsName" id="goodsName"/>
            单价:<input type="text" name="goodsPrice" id="goodsPrice"/>
            数量:<input type="text" name="qty" id="qty"/>
            <input type="button" value="添加商品" onclick="addGoods()"/>
        </form>
    </fieldset>
    <fieldset>
        <legend>购物车</legend>
        <table border="1" width="100%" >
            <thead>
                <tr>
                    <th>
                        全选
                        <input type="checkbox" name="ckAll" id="ckAll"/>
                    </th>
                    <th>品名</th>
                    <th>单价</th>
                    <th>数量</th>
                    <th>小计</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody id="tby">
​
            </tbody>
        </table>
        合计:<span id="total"></span>
    </fieldset>
  </div>
  
  <script type="text/javascript">
    // 点击按钮添加商品
    /*
       1.获取商品信息表单填写的数据:品名,单价,数量
       2.拼接6个td的字符串，添加tr对象中,最终将tr添加到tbody中
    
    */
    function addGoods(){
        //1. 获取商品信息
        //   goodsName.value:通过id属性直接获取对象，并访问对象的value属性
        var gname = goodsName.value;
        var gprice = goodsPrice.value;
        var gqty = qty.value;
​
        //alert(gname+" "+gprice+" "+gqty);
        //2 拼接表格行中的6个td字符串
        var str = "";  //定义变量，累加拼接每个td字符串
        // 第1个td:复选框
        str += "<td><input type='checkbox' name='ckgoods'/></td>";
        // 第2个td:品名
        str += "<td>" + gname + "</td>";
        // 第3个td:单价
        str += "<td>"+gprice+"</td>";
        // 第4个td:数量(两个按钮和一个文本框)
        str += "<td>" +
                    "<input type='button' value='+' onclick='addQty(this)' />"+
                    "<input type='text' value='"+gqty+"' onblur='changeQty(this)' /> "+
                    "<input type='button' value='-' onclick='subQty(this)' />"+ 
                "</td>";
        // 第5个td：小计
        str += "<td>"+gqty*gprice+"</td>";
        // 第6个td
        str += "<td><input type='button' value='删除' onclick='del(this)'/></td>";
​
        // 创建tr元素对象
        var tr = document.createElement("tr");
        // 设置tr的内容为拼接的td字符串
        tr.innerHTML=str;
        // 将tr添加到tbody中
        // append(添加)Child(子元素)
        tby.appendChild(tr);
​
        //更新总计
        sum();
​
    }
​
    // 点击加号按钮调整数量
    function addQty(btnQty){
        // 1.通过点击的按钮对象找到数量文本框，获取文本框的数据
        var txtQty = btnQty.nextElementSibling;
        txtQty.value++; // 文本框的值自增
        // 2.数量变化引起小计变化: 获取单价，计算小计
        var price = Number(btnQty.parentNode.previousElementSibling.innerText);
        alert(price);
        var money = price*txtQty.value;
        // 设置小计内容
        btnQty.parentNode.nextElementSibling.innerText=money;
        //更新总计
        sum();
    }
    // 点击减号按钮调整数量
    // 点击加号按钮调整数量
    function subQty(btnQty){
        // 1.通过点击的按钮对象找到数量文本框，获取文本框的数据
        var txtQty = btnQty.previousElementSibling;
        txtQty.value--; // 文本框的值自增
        // 2.数量变化引起小计变化: 获取单价，计算小计
        var price = Number(btnQty.parentNode.previousElementSibling.innerText);
        //alert(price);
        var money = price*txtQty.value;
        // 设置小计内容
        btnQty.parentNode.nextElementSibling.innerText=money;
        //更新总计
        sum();
    }
    // 文本框输入数量之后，光标离开时(失焦)，调整数量
    // onblur:触发失焦事件  onfoucs:获得焦点
    function changeQty(txt){
        // 将文本框的内容转为数值
        var qty = Number(txt.value);
        // 如果转换后不是一个数值
        if(isNaN(qty)){
            //提示错误
            alert("输入的数据不是数值");
            // 终止方法执行
            return;
        }
​
        //如果数值超出范围要提示错误
        if(qty<=0 || qty>100){
            alert("数值必须是1-100");
            return;
        }
​
        // 测试文本框的数据
        //alert(txt.value);
        // 1.获取单价
        var price= txt.parentNode.previousElementSibling.innerText;  
        // 2.计算小计
        var money = price*qty; //单价*文本框的数量
        // 3.将金额设置到小计单元格中
        txt.parentNode.nextElementSibling.innerText=money;
        //更新总计
        sum();
​
    }
    // 删除一行
    function del(btnQty){
        // 判断是否确定删除
        if(confirm('确定删除?')){
            //btnQty.parentNode:父级元素td .parentNode td的父级元素tr
            btnQty.parentNode.parentNode.remove();
            //更新总计
            sum();
        }
    }
​
    // 合计:汇总所有的小计
    function sum(){
        // 获取所有的tr行
        //tby.children :通过tbody元素获取下面的tr数组
        var trAry = tby.children;
        // 遍历tr，找到tr中的小计td单元格，取出数据
        var zongji = 0;
        for(var i=0;i<trAry.length;i++){
            // 取出当前遍历到的数组中的一个tr
            var tr = trAry[i];
            // 通过tr，获取tr中下标为4的小计单元格，取出数据
            // tr.children: tr这一行的td数组(子元素数组)
            // tr.children[4]:取出数组中下标为4的元素:小计单元格元素
            var xj = Number(tr.children[4].innerText);
            // 累加小计到zongji变量
            zongji+=xj;
        }
        // 将累加后的数据设置到汇总标签上
        total.innerText = zongji;
    }
 
  </script>
 </body>
</html>
​

3.3 模板法

简化代码，比jQuery的DOM操作还要简单。

1.创建模板

2.读取模板，并替换模板中的内容

3.模板法购物车（新增）

4.JSON对象

JSON ( JavaScript  Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式。它基于  ECMAScript  (欧洲计算机协会制定的js规范)的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。 易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。

核心:

  • json是一个具有特定格式的js数据对象
  • 用于在系统间交互数据(传递数据)

4.1 js对象,json对象,json字符串

js对象语法:

{
  属性1:数据1,
  属性2:数据2,
  属性3:数据3,
  ...  
  方法名:function(){
    //函数体
  }
}

js对象的特点:

  • js对象的属性不用加双引号
  • js对象中可以有函数
  • 可以通过.访问属性，或者属性下标访问属性
<script type="text/javascript">
	//js数据对象
	//请存储学生的姓名，性别，年龄，身高
	//使用单独变量表示对象数据，无法体现数据的关联性，而且比较繁琐.
	/*
	var stuName = "张三";
	var sex = "男";
	var age = 20;
	var tall = 1.7;
	*/

	//定义js对象表示学生数据
	var stu = {
		stuName:"张三",  //对象的属性(描述特征  属性:值)
		sex :"男",
		age :20,
		tall:1.7,
		zwjs:function(){ //对象的方法(描述行为)
			//this:当前的数据对象
			alert(this.stuName+" "+this.sex+" "+this.age+" "+this.tall);
		}
	};

	//访问学生对象的属性
	/*alert(stu.stuName);
	alert(stu.sex);
	alert(stu.age);
	alert(stu.tall);*/
	//访问学生对象的方法
	//stu.zwjs();
  </script>

json对象语法

{
  "属性1":数据1,
  "属性2":数据2,
  "属性3":数据3,
  ...
  "属性n":数据n
}

json对象的特点:

  • 属性名都要用双引号括起来，必须是双引号，不能用单引号
  • json对象中不能定义函数，主要作用就是传递数据
  • 可以通过.访问属性，或者属性下标访问属性
//json格式的数据对象
	var car = {
		"brand":"宝马",
		"color":"红色",
		"price":2000000,
		"speed":180
	}
	
	//返回的是对象
	//alert(typeof(car));

	//访问汽车的属性
	//使用.操作符访问对象属性，此时属性不能加引号
	//alert(car.brand+" "+car.color+" "+car.price+" "+car.speed);
	//使用属性文本下标的方式，访问对象属性。属性要加引号
	//alert(car["brand"]+" "+car["color"]+" "+car["price"]);

json格式字符串

'{"属性1":值1,"属性2":值2}'

特点:

  • 首先数据本身是字符串类型的数据
  • 字符串的内容复合json格式
  • 如果要访问其中的属性数据，需要转为json对象

将json字符串转为json对象

JSON.parse(json对象)

将json对象转为json字符串

JSON.stringify(json字符串)

<script type="text/javascript">
	//json格式的数据对象
	var car = {
		"brand":"宝马",
		"color":"红色",
		"price":2000000,
		"speed":180
	}
	
	//返回的是对象
	//alert(typeof(car));

	//访问汽车的属性
	//使用.操作符访问对象属性，此时属性不能加引号
	//alert(car.brand+" "+car.color+" "+car.price+" "+car.speed);
	//使用属性文本下标的方式，访问对象属性。属性要加引号
	//alert(car["brand"]+" "+car["color"]+" "+car["price"]);

	//json格式字符串

	//json格式的对象
	//var stu = {"name":"张三","age":20};
	//json格式的字符串
	var stu = '{"name":"张三","age":20}';
	//alert(typeof(stu));
	//字符串没有name属性和age属性
	//alert(stu.name+" "+stu.age);
	//将json格式的字符串转为json对象，从而愉快的访问其中的属性
	//JSON.parse("json字符串")

	//使用JSON工具类对象的parse方法，将stu这个json字符串转为json对象
	// 并存储到mystu这个变量中
	var mystu = JSON.parse(stu);
	//alert(mystu.name+" "+mystu.age);

	//扩展: JSON.stringify(json对象) 将json对象转为json字符串
	var dog = {"kind":"牧羊犬","hobby":"骨头"};
	//alert(typeof(dog));
	//alert(dog); //对象数据，弹窗显示的时候，不会显示属性信息
	//console.log(dog);
	var dogStr = JSON.stringify(dog);
	alert(typeof(dogStr));
	alert(dogStr);
	

  </script>

4.2 案例: 定义json对象数组生成表格数据，扩展购物车功能

<!DOCTYPE html >
<html>
 <head>
  <title> New Document </title>
  <meta charset="utf-8">
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <style type="text/css">
	fieldset{
		width:500px;
		margin:0px auto;
	}
  </style>

 </head>

 <body>
  <fieldset>
	<legend>水果商品列表</legend>
	<table border="1" width="100%">
		<thead>
			<tr>
				<th>编号</th>
				<th>名字</th>
				<th>价格</th>
				<th>操作</th>
			</tr>
		</thead>
		<tbody id="fbody">
			<!--
			<tr>
				<td>1001</td>
				<td>苹果</td>
				<td>3.5</td>
				<td>
					<input type="button" value="添加"/>
				</td>
			</tr>
			-->
		</tbody>
	</table>
  </fieldset>


  <fieldset>
	<legend>购物车</legend>
	<table border="1" width="100%">
		<thead>
			<tr>
				<th>编号</th>
				<th>名字</th>
				<th>价格</th>
				<th>数量</th>
				<th>小计</th>
				<th>操作</th>
			</tr>
		</thead>
		<tbody id="mybody">
			<!--
			<tr>
				<td>1001</td>
				<td>苹果</td>
				<td>3.5</td>
				<td>
					<input type="button" value="+"/>
					<input type="text" value="3"/>
					<input type="button" value="-"/>
				</td>
				<td>10.5</td>
				<td>
					<input type="button" value="删除"/>
				</td>
			</tr>
			-->
		</tbody>
	</table>
  </fieldset>

  <script type="text/javascript">
    //水果数组
	var fruitAry = [
		{"id":1001,"name":"苹果","price":3.5},
		{"id":1002,"name":"香蕉","price":6.5},
		{"id":1003,"name":"榴莲","price":9},
		{"id":1004,"name":"橘子","price":2}
	];

	//遍历水果数组，将数据添加到表格中
	for(var i=0;i<fruitAry.length;i++){
		//获取当前遍历的水果对象
		var f = fruitAry[i];
		//console.log(f);
		//将数据填充到表格行中
		var tds = "";
		tds +="<td>"+f.id+"</td>";
		tds +="<td>"+f.name+"</td>";
		tds +="<td>"+f.price+"</td>";
		tds +="<td><input type='button' value='添加' onclick='addGoods(this)'/></td>";

		//创建tr对象
		var tr = document.createElement("tr");
		tr.innerHTML=tds;
		
		//将tr添加到tbody中
		fbody.appendChild(tr);

	}

	//点击添加按钮，将按钮对应行的水果信息，添加购物车表格的行中
	function addGoods(btnObj){
		//通过点击的按钮找到tr行对象
		var tr = btnObj.parentElement.parentElement;
		//通过tr行对象，分别获取各个单元格的数据
		//编号
		var fid = tr.children[0].innerText;
		//水果名字
		var fname = tr.children[1].innerText; 
		//水果价格
		var fprice = Number(tr.children[2].innerText);

		//判断重复
		if(mybody.children.length>0){
			for(var i=0;i<mybody.children.length;i++){
				var tr = mybody.children[i];
				//tr.children[0].innerText:找到本行第一个单元格的id数据是否重复
				if(tr.children[0].innerText==fid){
					//让文本框数量++
					tr.children[3].children[1].value++
					//计算小计
					tr.children[4].innerText = 
						Number(tr.children[3].children[1].value)*Number(fprice);
					//返回函数，不执行后面的代码
					return;
				}		
			}
		}

		//alert(fname+" "+fprice+" "+fqty);

		//拼接td单元格
		var tds = "";
		tds +="<td>"+fid+"</td>";
		tds +="<td>"+fname+"</td>";
		tds +="<td>"+fprice+"</td>";
		tds +="<td>"+
				"<input type='button' value='+'/>"+
				"<input type='text' value='1'/>"+
				"<input type='button' value='-'/>"+
			  "</td>";
		tds +="<td>"+fprice*1+"</td>";
		tds +="<td><input type='button' value='删除'/></td>";
		//创建tr对象
		var tr = document.createElement("tr");
		tr.innerHTML=tds;
		//将tr添加到tbody中
		mybody.appendChild(tr);
	
	}
  </script>
	

 </body>
</html>

5.模板字符串

<script type="text/javascript">
	//请假条模板字符串
	var qjtTemp = "本人XM,因为SQ,特请假TS天,从KSRQ开始到JSRQ结束。望批准!";
	var lsqjt = qjtTemp.replace("XM","李四")
	                   .replace("SQ","要去见女朋友")
					   .replace("TS","3")
					   .replace("KSRQ","2022-3-16")
					   .replace("JSRQ","2022-3-19");
	document.write(lsqjt+"<br/>");

	var wwqjt = qjtTemp.replace("XM","王五")
	                   .replace("SQ","要去相亲")
					   .replace("TS","1")
					   .replace("KSRQ","2022-3-16")
					   .replace("JSRQ","2022-3-17");
	document.write(wwqjt+"<br/>");
  </script>

 

<!--使用script标签来定义模板字符串-->
  <script type="text/html" id="temp">
	<td>ID</td>
	<td>NAME</td>
	<td>PRICE</td>
	<td>
		<input type="button" value="+"/>
		<input type="text" value="1"/>
		<input type="button" value="-"/>
	</td>
	<td>XJ</td>
	<td><input type="button" value="删除"/></td>
  </script>

  <!--定义js代码-->
  <script type="text/javascript">
	//alert(temp.innerHTML);
	var tds = temp.innerHTML.replace("ID","1001")
	                        .replace("NAME","苹果")
							.replace("PRICE",3.5)
							.replace("XJ",3.5)
  </script>

完成购物车的改进

<!DOCTYPE html >
<html>
 <head>
  <title> New Document </title>
  <meta charset="utf-8">
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <style type="text/css">
	fieldset{
		width:500px;
		margin:0px auto;
	}
  </style>

 </head>

 <body>
  <fieldset>
	<legend>水果商品列表</legend>
	<table border="1" width="100%">
		<thead>
			<tr>
				<th>编号</th>
				<th>名字</th>
				<th>价格</th>
				<th>操作</th>
			</tr>
		</thead>
		<tbody id="fbody">
			<!--
			<tr>
				<td>1001</td>
				<td>苹果</td>
				<td>3.5</td>
				<td>
					<input type="button" value="添加"/>
				</td>
			</tr>
			-->
		</tbody>
	</table>
  </fieldset>


  <fieldset>
	<legend>购物车</legend>
	<table border="1" width="100%">
		<thead>
			<tr>
				<th>编号</th>
				<th>名字</th>
				<th>价格</th>
				<th>数量</th>
				<th>小计</th>
				<th>操作</th>
			</tr>
		</thead>
		<tbody id="mybody">
			<!--
			<tr>
				<td>1001</td>
				<td>苹果</td>
				<td>3.5</td>
				<td>
					<input type="button" value="+"/>
					<input type="text" value="3"/>
					<input type="button" value="-"/>
				</td>
				<td>10.5</td>
				<td>
					<input type="button" value="删除"/>
				</td>
			</tr>
			-->
		</tbody>
	</table>
  </fieldset>

   <!--使用script标签来定义模板字符串-->
  <script type="text/html" id="temp">
	<td>ID</td>
	<td>NAME</td>
	<td>PRICE</td>
	<td>
		<input type="button" value="+"/>
		<input type="text" value="1"/>
		<input type="button" value="-"/>
	</td>
	<td>XJ</td>
	<td><input type="button" value="删除"/></td>
  </script>

  <script type="text/javascript">
    //水果数组
	var fruitAry = [
		{"id":1001,"name":"苹果","price":3.5},
		{"id":1002,"name":"香蕉","price":6.5},
		{"id":1003,"name":"榴莲","price":9},
		{"id":1004,"name":"橘子","price":2}
	];

	//遍历水果数组，将数据添加到表格中
	for(var i=0;i<fruitAry.length;i++){
		//获取当前遍历的水果对象
		var f = fruitAry[i];
		//console.log(f);
		//将数据填充到表格行中
		var tds = "";
		tds +="<td>"+f.id+"</td>";
		tds +="<td>"+f.name+"</td>";
		tds +="<td>"+f.price+"</td>";
		tds +="<td><input type='button' value='添加' onclick='addGoods(this)'/></td>";

		//创建tr对象
		var tr = document.createElement("tr");
		tr.innerHTML=tds;
		
		//将tr添加到tbody中
		fbody.appendChild(tr);

	}

	//点击添加按钮，将按钮对应行的水果信息，添加购物车表格的行中
	function addGoods(btnObj){
		//通过点击的按钮找到tr行对象
		var tr = btnObj.parentElement.parentElement;
		//通过tr行对象，分别获取各个单元格的数据
		//编号
		var fid = tr.children[0].innerText;
		//水果名字
		var fname = tr.children[1].innerText; 
		//水果价格
		var fprice = Number(tr.children[2].innerText);

		//判断重复
		if(mybody.children.length>0){
			for(var i=0;i<mybody.children.length;i++){
				var tr = mybody.children[i];
				//tr.children[0].innerText:找到本行第一个单元格的id数据是否重复
				if(tr.children[0].innerText==fid){
					//让文本框数量++
					tr.children[3].children[1].value++
					//计算小计
					tr.children[4].innerText = 
						Number(tr.children[3].children[1].value)*Number(fprice);
					//返回函数，不执行后面的代码
					return;
				}		
			}
		}

		//alert(fname+" "+fprice+" "+fqty);

		//拼接td单元格
		var tds = temp.innerHTML.replace("ID",fid)
								.replace("NAME",fname)
								.replace("PRICE",fprice)
								.replace("XJ",fprice*1);
		
		//创建tr对象
		var tr = document.createElement("tr");
		tr.innerHTML=tds;
		//将tr添加到tbody中
		mybody.appendChild(tr);
	
	}
  </script>
	

 </body>
</html>

总结

​ 节点的操作(增删改查)

​ 节点的属性掌握

​ 购物车的搭建（思路分析清楚）

​ 模板法学会

码农终将翻身
关注
  • 0
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript DOM编程
weixin_62270300的博客
03-02 635
目录 一、什么是DOM? 二、动态改变文档内容的原理 三、Element常用属性 四、常用方法 1.创建和增加节点的方法 2.删除和替换节点的方法： 3.其他方法 五、使用JS操作表格 总结： 一、什么是DOM? 文档对象模型（Document Object Model） 通过DOM可以动态改变文档内容 二、动态改变文档内容的原理 解析文档（如HTML）并生成DOM树 通过DOM标准接口+编程语言改变文档内容 解析文档生成DOM树的过程 .
JavaScript案例-js轮播图
02-16
7. **边界检查**：在轮播图切换到最后一张后返回第一张，或者从第一张切换到最后一张时，需要进行边界检查，确保切换的正确性。 8. **响应式设计**：考虑到不同设备的屏幕尺寸，轮播图应具有响应式设计，能够根据...
DOM编程
weixin_67235801的博客
03-03 1033
有趣的网页编码
JavaScript-DOM（下）
weixin_45355878的博客
03-03 111
节点操作 1、父节点 node.parentNode parentNode属性可返回某节点最近的一个的父节点 如果指定的节点没有父节点则返回null 2、子节点 1.子节点childNode 所有的子节点，包含元素节点 文本节点等等 2.children 获取所有的子元素节点（常用） 3、获取第一个元素和最后一个元素 1.firstChild第一个子节点 不管是文本节点还是元素节点 ol.firstChild ol.lastChild 2.firstElementChild 返回第一个子
javaScript 第七Dom编程
一个后端菜鸟的博客
07-24 289
Dom编程 理解文档对象模型 熟练掌握document对象访问页面元素 熟练掌握动态添加页面元素 通过DOM操作html页面中的标签，属性，样式等。 一、Dom编程概述 1.1、什么是dom编程 文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标记语言的标准编程接口。在网页上，组织页面（或文档）的对象被组织在一个树形结构中。 标签 = 元素= 标记= 节点 document.quer ySelector(“p”);------->NodeLi
JavaScript案例-JavaScript
02-16
JavaScript是一种广泛应用于网页和网络应用的编程语言，尤其在客户端编程中扮演着核心角色。它是一种解释型、弱类型、动态类型的脚本语言，由网景公司的Brendan Eich在1995年发明，最初命名为Mocha，后改名为...
Dom-Chapter12:Dom编程艺术 第十二章 实践
05-17
在本章《DOM编程艺术》的实践中，我们将深入探讨JavaScript中的DOM（Document Object Model）以及如何利用它来操控网页内容。DOM是HTML和XML文档的一种结构化表示，它允许我们通过编程方式访问和修改页面元素。...
Javascript-Projects:有趣JavaScript项目
03-19
JavaScript是一种广泛应用于网页和网络应用的编程语言，尤其在前端开发中扮演着核心角色。"JavaScript-Projects:有趣JavaScript项目" 提供了一系列适合初学者的练习，帮助他们掌握JavaScript的基础和实际应用。以下...
第三章：javascript-DOM对象模型-补充课件.ppt
最新发布
03-31
JavaScript DOM对象模型是Web开发中不可或缺的一部分，它允许开发者通过编程方式操纵网页的结构、内容和样式。在JavaScript中，DOM被用作一种接口，使我们能够读取、修改、添加或删除HTML、XML文档的各个部分。DOM将...
DOM 获取元素
YangWenYu_lala的博客
05-18 499
javascript DOM
DOM 编程
baidulixueqin的博客
01-03 520
DOM 编程 网页其实是颗树,JS如何操作这棵树? JS操作不了。让浏览器往window上加一个document。 JS用document操作网页 "用document对象操作整个网页"这种思想就叫做文档对象模型(Document Object Model) 记住一个事实：DOM很难用 下节课我们会想办法解决这个难题(封装)。 如果你觉得DOM很傻，不要怀疑自己，你觉得是对的。 DOM的接口设计的非常反人类，导致前端程序员不得不使用jQuery去操作DOM。后来jQuery又被Vue代替了，于是我们又用Vu
JavaScript核心-实战案例（一）
qq_46199553的博客
08-12 3119
2.1 API API（Application Programming Interface,应用程序编程接口）是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，或理解内部工作机制的细节。 简单理解： API 是给程序员提供的一种工具，以便能更轻松的实现想要完成的功能。 比如手机充电的接口： 2.2 Web API Web API 是浏览器提供的一套操作浏览器功能和页面元素的 API ( BOM 和 DOM )。 现阶段我们主要针对于浏览器讲解常用的
js第7章DOM案例：获取操作的元素、元素内容操作、元素属性操作、classList的使用、获取节点、节点追加、删除节点和节点属性
WHT869706733的博客
12-05 1542
1.获取操作的元素 <body> <div id="box">box</div> <div class="bar">bar</div> <div name="main">main</div> <script> console.log(document.getElementById('box')); // 获取id为box的元素 co
5-运算符
qq_44808878的博客
03-13 156
五.运算符 JS 符号 运算符（operator）也被称为操作符，是用于实现赋值、比较和执行算数运算等功能的符号 JavaScript中常用的运算符有： 算数运算符、递增和递减运算符、比较运算符、逻辑运算符、赋值运算符 算数运算符 算术运算使用的符号，用于执行两个变量或值的算术运算 浮点数的精度问题：浮点数值的最高精度是17位小数，但在进行算术计算时，其精确度远远不如整数 var result = 0.1 + 0.2; // 结果不是 0.3，而是：0.30000000000000004 co
javaScript DOM编程基础
niaonao
12-21 3547
javaScript Document Object Model; Document：文档，html文档与xml文档 Object：对象，javaScript document对象方法及属性 Model：模型 DOM是针对xml、html的基于树的API，DOM树定义了节点Node的接口以及许多节点类型来表示文档不同功能不同方面的节点
JavaScript中DOM编程
scbiaosdo的博客
06-27 232
DOM编程1.javascript dom    全称：javaScript Document Object Model;    Document：文档，html文档与xml文档    Object：对象，javaScript document对象方法及属性    Model：模型2.DOM    DOM是针对xml、html的基于树的API，DOM树定义了节点Node的接口以及许多节点类型来表示...
JS-BoM编程
m0_67195464的博客
04-05 943
目录1.Document对象的常用属性2.Document对象的常用方法3.三种访问页面元素的区别4.visibility5.display 1.Document对象的常用属性 referrer: 返回载入当前文档的文档的URL 语法 ：document.referrer URL : 返回当前文档的URL 语法 ：document.URL 2.Document对象的常用方法 getElementById() ：返回对拥有指定id的第一个对象的引用 getElementsByName() ：返回带有指定名称
第课-JavaScript-语法优秀文档.ppt
11-14
JavaScript语法基础是编程学习的重要部分，它允许开发者创建交互式的网页应用程序。 在HTML中嵌入JavaScript通常有两种方式：一是直接在HTML文件中使用`<script>`标签将JavaScript代码内联写入；二是通过`...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值