[JS-DOM]核心DOM模型(Document,Element,Node)

核心DOM模型:

	* Document:文档对象1. 创建(获取):在html dom模型中可以使用window对象来获取1. window.document2. document2. 方法:1. 获取Element对象:1. getElementById()	: 根据id属性值获取元素对象。id属性值一般唯一2. getElementsByTagName():根据元素名称获取元素对象们。返回值是一个数组3. getElementsByClassName():根据Class属性值获取元素对象们。返回值是一个数组4. getElementsByName(): 根据name属性值获取元素对象们。返回值是一个数组2. 创建其他DOM对象:createAttribute(name)createComment()createElement()createTextNode()3. 属性* Element:元素对象1. 获取/创建:通过document来获取和创建2. 方法:1. removeAttribute():删除属性2. setAttribute():设置属性* Node:节点对象,其他5个的父对象* 特点:所有dom对象都可以被认为是一个节点* 方法:* CRUD dom树:* appendChild():向节点的子节点列表的结尾添加新的子节点。* removeChild()	:删除(并返回)当前节点的指定子节点。* replaceChild():用新节点替换一个子节点。* 属性:* parentNode 返回节点的父节点。

示例代码如下:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document对象</title></head>
<body><div id="div1">div1</div><div id="div2">div2</div><div id="div3">div3</div><div class="cls1">div4</div><div class="cls1">div5</div><input type="text" name="username"><script>/*Document:文档对象1. 创建(获取):在html dom模型中可以使用window对象来获取1. window.document2. document2. 方法:1. 获取Element对象:1. getElementById()	: 根据id属性值获取元素对象。id属性值一般唯一2. getElementsByTagName():根据元素名称获取元素对象们。返回值是一个数组3. getElementsByClassName():根据Class属性值获取元素对象们。返回值是一个数组4. getElementsByName(): 根据name属性值获取元素对象们。返回值是一个数组2. 创建其他DOM对象:createAttribute(name)createComment()createElement()createTextNode()3. 属性*///2.根据元素名称获取元素对象们。返回值是一个数组var divs = document.getElementsByTagName("div");//alert(divs.length);//3.根据Class属性值获取元素对象们。返回值是一个数组var div_cls = document.getElementsByClassName("cls1");// alert(div_cls.length);//4.根据name属性值获取元素对象们。返回值是一个数组var ele_username = document.getElementsByName("username");//alert(ele_username.length);var table = document.createElement("table");alert(table);</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Element对象</title>
</head>
<body><a>点我试一试</a><input type="button" id="btn_set" value="设置属性"><input type="button" id="btn_remove" value="删除属性"><script>//获取btnvar btn_set =document.getElementById("btn_set");btn_set.onclick = function(){//1.获取a标签var element_a = document.getElementsByTagName("a")[0];element_a.setAttribute("href","https://www.baidu.com");}//获取btnvar btn_remove =document.getElementById("btn_remove");btn_remove.onclick = function(){//1.获取a标签var element_a = document.getElementsByTagName("a")[0];element_a.removeAttribute("href");}</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Node对象</title><style>div{border: 1px solid red;}#div1{width: 200px;height: 200px;}#div2{width: 100px;height: 100px;}#div3{width: 100px;height: 100px;}</style></head>
<body><div id="div1"><div id="div2">div2</div>div1</div><a href="javascript:void(0);" id="del">删除子节点</a><a href="javascript:void(0);" id="add">添加子节点</a><!--<input type="button" id="del" value="删除子节点">-->
<script>//1.获取超链接var element_a = document.getElementById("del");//2.绑定单击事件element_a.onclick = function(){var div1 = document.getElementById("div1");var div2 = document.getElementById("div2");div1.removeChild(div2);}//1.获取超链接var element_add = document.getElementById("add");//2.绑定单击事件element_add.onclick = function(){var div1 = document.getElementById("div1");//给div1添加子节点//创建div节点var div3 = document.createElement("div");div3.setAttribute("id","div3");div1.appendChild(div3);}/*超链接功能:1.可以被点击:样式2.点击后跳转到href指定的url需求:保留1功能,去掉2功能实现:href="javascript:void(0);"*/var div2 = document.getElementById("div2");var div1 = div2.parentNode;alert(div1);</script>
</body>
</html>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/309355.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

使用请求头认证来测试需要授权的 API 接口

使用请求头认证来测试需要授权的 API 接口Intro有一些需要认证授权的接口在写测试用例的时候一般会先获取一个 token&#xff0c;然后再去调用接口&#xff0c;其实这样做的话很不灵活&#xff0c;一方面是存在着一定的安全性问题&#xff0c;获取 token 可能会有一些用户名密码…

双端队列 BFS + Chamber of Secrets CodeForces - 173B

题意&#xff1a; 一个 nmn\times mnm 的图&#xff0c;现在有一束激光从左上角往右边射出&#xff0c;每遇到 ‘#’&#xff0c;你可以选择光线往四个方向射出&#xff0c;或者什么都不做&#xff0c;问最少需要多少个 ‘#’ 往四个方向射出才能使光线在第 n 行往右边射出。 …

[JavaWeb-Bootstrap]Bootstrap概述

Bootstrap&#xff1a; 1. 概念&#xff1a; 一个前端开发的框架&#xff0c;Bootstrap&#xff0c;来自 Twitter&#xff0c;是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript 的&#xff0c;它简洁灵活&#xff0c;使得 Web 开发更加快捷。* 框架:一个半成…

程序员过关斩将--作为一个架构师,我是不是应该有很多职责?

点击上方“蓝字”关注我们领取架构书籍每一个程序员都有一个架构梦。上面其实本质上是一句富有事实哲理的废话&#xff0c;要不然也不会有这么多人关注你的公众号。这些年随着“企业数字化”转型的口号&#xff0c;一大批企业奔跑在转型的路上&#xff0c;希望领先一步对手将企…

Excel使用技巧,补充中。。。

Excel表怎么把名字按字母排序 然后后面的数据也跟着变动 1、首先在excel表格的A列单元格中输入字母&#xff0c;选中需要排序的A列和B列单元格。 2、然后点击工具栏“数据”中的“排序”。 3、在弹出的对话框中的“次序”下拉框中选择“自定义序列”。 4、然后在弹出的对话…

[JavaWeb-Bootstrap]Bootstrap快速入门

快速入门 1. 下载Bootstrap2. 在项目中将这三个文件夹复制3. 创建html页面&#xff0c;引入必要的资源文件<!DOCTYPE html><html lang"zh-CN"><head><meta charset"utf-8"><meta http-equiv"X-UA-Compatible" conten…

递归函数中局部变量和全局变量

有时候会因为不注意递归函数中局部变量和全局变量&#xff0c;而导致结果和我们期望的不一致&#xff0c;递归中&#xff0c;在递归中的局部变量和全局变量&#xff0c;可以类似的看成函数调用时传递方式的按值传递&#xff08;局部变量&#xff09;和引用传递&#xff08;全局…

基于 abp vNext 和 .NET Core 开发博客项目 - Blazor 实战系列(二)

系列文章使用 abp cli 搭建项目给项目瘦身&#xff0c;让它跑起来完善与美化&#xff0c;Swagger登场数据访问和代码优先自定义仓储之增删改查统一规范API&#xff0c;包装返回模型再说Swagger&#xff0c;分组、描述、小绿锁接入GitHub&#xff0c;用JWT保护你的API异常处理和…

[JavaWeb-Bootstrap]Bootstrap响应式布局

响应式布局 * 同一套页面可以兼容不同分辨率的设备。 * 实现&#xff1a;依赖于栅格系统&#xff1a;将一行平均分成12个格子&#xff0c;可以指定元素占几个格子 * 步骤&#xff1a;1. 定义容器。相当于之前的table、* 容器分类&#xff1a;1. container&#xff1a;两边留白…

N的阶乘的长度 V2(斯特林近似) 51Nod - 1130

题目&#xff1a; 输入N求N的阶乘的10进制表示的长度。例如6! 720&#xff0c;长度为3。 Input 第1行&#xff1a;一个数T&#xff0c;表示后面用作输入测试的数的数量。&#xff08;1 < T < 1000) 第2 - T 1行&#xff1a;每行1个数N。&#xff08;1 < N < 1…

Azure App Service 如何在第一时间用上最新版 .NET Core

点击上方关注“汪宇杰博客” ^_^导语微软会经常对 .NET Core 发布更新&#xff0c;通常为安全补丁。这不&#xff0c;今天早上&#xff0c;.NET Core 3.1.5 更新发布了。然而 Azure App Service 自身的 .NET Core runtime 并不会在第一时间更新&#xff0c;每次都要等几周后微软…

[JS-DOM]事件监听机制

事件监听机制 概念:某些组件被执行了某些操作后&#xff0c;触发某些代码的指行。*事件: 某些操作。如:单击&#xff0c;双击&#xff0c;键盘按下了&#xff0c;鼠标移动了。*事件源:组件。如:按钮&#xff0c;文本输入框...*监听器:代码。*注册监听:将事件&#xff0c;事件源…

Last non-zero Digit in N! HDU - 1066

题意&#xff1a; 求n!的最后一位非零数。 题目&#xff1a; The expression N!, read as “N factorial,” denotes the product of the first N positive integers, where N is nonnegative. So, for example, N N! 0 1 1 1 2 2 3 6 4 24 5 120 10 3628800 For this prob…

我们是如何做DevOps的?

一、DevOps的理解DevOps的概念理解DevOps 的概念在软件开发行业中逐渐流行起来。越来越多的团队希望实现产品的敏捷开发&#xff0c;DevOps 使一切成为可能。有了 DevOps &#xff0c;团队可以定期发布代码、自动化部署、并将持续集成 / 持续交付作为发布过程的一部分。一句话概…

word文档相关使用

主要是为了记忆&#xff0c;有的时候&#xff0c;之前查阅过&#xff0c;后来使用又忘记了&#xff0c;以后碰了就陆续添加吧&#xff0c;先开一个博文 文章目录插入图片&#xff0c;显示不全的问题&#xff1a;方法一&#xff1a;方法二&#xff1a;方法三&#xff1a;在左侧显…

[JavaWeb-XML]XML概述

XML&#xff1a; 1. 概念&#xff1a;Extensible Markup Language 可扩展标记语言* 可扩展&#xff1a;标签都是自定义的。 <user> <student>* 功能* 存储数据1. 配置文件2. 在网络中传输* xml与html的区别1. xml标签都是自定义的&#xff0c;html标签是预定义。…

调试实战 —— dll 加载失败之 Debug Release争锋篇

缘起 最近&#xff0c;项目里遇到一个 dll 加载不上的问题。实际项目比较复杂&#xff0c;但是解决后&#xff0c;又是这么的简单&#xff0c;合情合理。本文是我使用示例工程模拟的&#xff0c;实际项目中另有玄机&#xff0c;但问题的本质是一样的。本文从行文上与 《调试实战…

汉诺塔 X HDU - 2511

题目&#xff1a; 1,2,…,n表示n个盘子&#xff0e;数字大盘子就大&#xff0e;n个盘子放在第&#xff11;根柱子上&#xff0e;大盘不能放在小盘上&#xff0e;在第&#xff11;根柱子上的盘子是a[1],a[2],…,a[n]. a[1]n,a[2]n-1,…,a[n]1.即a[1]是最下面的盘子&#xff0e;…

[JavaWeb-XML]XML基本语法与快速入门

语法&#xff1a; * 基本语法&#xff1a;1. xml文档的后缀名 .xml2. xml第一行必须定义为文档声明3. xml文档中有且仅有一个根标签4. 属性值必须使用引号(单双都可)引起来5. 标签必须正确关闭6. xml标签名称区分大小写示例代码如下: <?xml version1.0 ?><users>…

Beetlex.Redis之Stream功能详解

有一段时间没有写文章&#xff0c;techempower的测试规则评分竟然发生了变化&#xff0c;只能忘着补充一下占比权重最多的数据更新示例了和深入设计一下组件模块化加载的设计。但在不久前有用户问了一下组件是否支持redis的Stream功能&#xff0c;看了一样相关资料后把功能实现…