浏览器内置对象

最新推荐文章于 2024-06-05 11:07:30 发布

搬砖敲代码

最新推荐文章于 2024-06-05 11:07:30 发布

阅读量848

点赞数 1

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/weixin_69254401/article/details/127076630

版权

本文介绍了文档对象模型（DOM）的基本概念及其在JavaScript中的应用。通过具体示例展示了如何使用DOM进行元素的添加、删除和修改等操作，并演示了如何通过JavaScript获取元素、添加样式等常见任务。

摘要由CSDN通过智能技术生成

浏览器对象是浏览器根据系统当前的配置和所装载的页面为JavaScript提供的一系列可供使用的对象。如Window对象、Documen对象、History对象等

浏览器分层结构

文档对象模型（DOM）

1）DOM-Document Object Model,它是W3C国际组织的一套Web标准，它以树形结构表示文档（HTML、XML等），定义了遍历、检查和修改各节点的属性和方法。

2）W3C组织将DOM分为以下几种不同版本：

Core DOM：定义任何结构文档的标准对象集合

XML DOM：定义了针对XML文件的标准对象集合

HTML DOM:定义了针对HTML文件的标准对象集合

DOM CSS：定义了在程序中操作CSS样式的接口

DOM Events:给DOM对象添加事件处理

DOM(Document Object Model):文档对象模型可以干什么？

（1）获取一个元素

（2）移除一个元素

（3）创建一个元素

（4）向页面里面添加一个元素

（5）给元素绑定一些事件

（6）获取元素的属性

（7）给元素添加一些css样式

DOM的核心对象就是document对象

document对象是浏览器内置对象的一个对象，里面储存着专门用来操作元素的各种方法

先定义按钮

<body>
		<input type="text" name="txt" id="txt" value="" />
		<input type="button"  value="添加节点" onclick="add()" />&nbsp;
		<input type="button"  value="删除节点" onclick="del()" />&nbsp;
		<input type="button"  value="修改节点" onclick="update()" />

给"添加节点"按钮添加事件

<script type="text/javascript">
			function add(){
				//先获取文本框的值
				var key = document.getElementById("txt").value
				//然后创建一个新的li标签
				var li = document.createElement("li")
				//讲文本框中输入的内容放到li标签内
				li.innerHTML=key
				//将新创建的li标签添加到ul中
				document.querySelector("ul").appendChild(li)
				
			}

给"删除节点"按钮添加事件

function del(){
				var ul_1=document.querySelector("ul")
				//先获取到要删除的元素
				var li=ul_1.firstElementChild//firstElementChild:某元素中的第一个元素
				var li=ul_1.lastElementChild//lastElementChild:某元素中的最后一个元素
				var li=document.querySelectorAll("li")[1]
				ul_1.removeChild(li)//removeChild:删除的是子元素
				ul_1.remove()//remov():清空某元素中的所有子元素，包括该元素本身
			}

给"修改节点"按钮添加事件

function update(){
				var ul_1=document.querySelector("ul")
				var li=ul_1.lastElementChild
				li.innerHTML="<a href='#'>百度</a>"
			}

给元素添加一些css样式,在body标签里面也可以添加边框

<script type="text/javascript">
			var date=[{
				stuid:1001,
				stuname:"张三"
				stusex:"男"		
			},{
				stuid:1002,
				stuname:"李四"
				stusex:"男"
			},{
				stuid:1003,
				stuname:"王五"
				stusex:"女"
			}]
		</script>