JavaScript学习（第六章）

Smrsar

已于 2023-02-11 13:48:06 修改

阅读量131

点赞数

分类专栏： # JavaScript Java 文章标签：学习前端

于 2022-09-24 22:37:41 首次发布

本文链接：https://blog.csdn.net/weixin_59973239/article/details/127031890

版权

Java 同时被 2 个专栏收录

30 篇文章 1 订阅

订阅专栏

JavaScript

10 篇文章 0 订阅

订阅专栏

文本对象模型

概述：文本对象模型（DOM）是针对HTML和xml文档的一个API（应用程序编程借口）。

一，使用DOM访问文档对象的元素

1，通过ID获取

HTML部分：

<input type="button" name="btn" id="btn" value="点击" />
       <div id="div1">
           这是div1
       </div>
       <div id="div2">
           这是div2
       </div>

javascript部分：

           document.getElementById("btn").οnclick=function(){
               //通过标签的ID属性获取元素
               var div1=document.getElementById("div1")
                 div1.innerHTML="更改后的div"
                 var div2=document.getElementById("div2")
                 div2.innerHTML="更改后的div"

二，通过标签名获取

HTML：

<input type="button" name="btn" id="btn" value="点击" />
       <div id="div1">
           这是div1
       </div>
       <div id="div2">
           这是div2
       </div>

JavaScript：

var divs=document.getElementsByTagName("div")
               console.log(divs)
               for(var i=0;i<divs.length;i++){
                   console.log(divs[i])
                   divs[i].innerHTML="更改后的div"
               }

html：

<ul>
           <li>列表1</li>
           <li>列表1</li>
           <li>列表1</li>
           <li>列表1</li>
       </ul>

javascript：

var ul=document.getElementsByTagName("ul")[0]
console.log(ul)

三，获取到所有属性class的值使sp的标签

HTML：

<p class="sp"></p>

javascript：

//获取到所有属性class的值使sp的标签
var els=document.getElementsByClassName("sp")
console.log(els)

四，通name属性获取

HTML：

<input type="text" name="uname" id="" value="" />

javascript：

//通过name属性来获取标签
var uname=document.getElementsByName("uname")
console.log(uname[0])

五，通过选择器名称获取

HTML：

<style type="text/css">
           .sp{
               color: red;
           }
       </style>

javascript：

//通过选择器名称来获取，只能获取一个
               var queryS=document.querySelector(".sp")
               console.log(queryS)

               //通过对应的选择器获取所有满足条件的标签
               var queryAll=document.querySelectorAll(".sp")
               console.log(queryAll)

二，通过访问相对元素进行数据增加，修改，删除

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<input type="button" value="add" onclick="add()" />
		<input type="button" value="del" onclick="del()" />
		<input type="button" value="update" onclick="update()" />
		<ul>
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
		</ul>
		<script type="text/javascript">
			var ul = document.querySelector("ul")
			//添加一个新的li标签
			function add() {
				//创建一个节点
				var li = document.createElement("li")
				li.innerHTML = "新添加的节点"
				//appendChild():向一个标签中添加子标签
				ul.appendChild(li)

			}

			//删除
			function del() {
				//要删除第一个子元素
				//document.firstElementChild
				var li = document.querySelectorAll("li")[0]
				ul.removeChild(li) //删除使标签中的指定子元素
				ul.remove() //会将所有的子元素清空，包括元素本身
			}

			//修改
			function update() {
			var li=document.querySelectorAll("li")[1]
			li.innerHTML="更新后的"
			}
		</script>
	</body>
</html>