[JS-DOM]核心DOM模型(Document，Element，Node)
2024-05-11 00:42:36
核心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>
[JS-DOM]核心DOM模型(Document，Element，Node)相关推荐
- document,element,node方法
document方法: getElementById(id) 返回指定结点的引用 getElementsByTagName_r(name) ...
- jsDOM模型详解一之DOM核心
jsDOM模型详解一之DOM核心 DOM简介 DOM(Document Object Model),文档对象模型,DOM可以以一种独立于平台和语言的方式访问和修改一个文档的内容和结构.换句话说,这是表 ...
- 前端基础入门之js什么是DOM Document Object Model
文章目录 DOM 1.DOM简介 文档 对象 模型 2.节点 节点类型 节点属性 文档节点(Document) 元素节点(Element) 文本节点(Text) 属性节点(Attr) 3.事件 4.文 ...
- 前端：JS/25/DOM官方定义，DOM分类，HTML节点树（节点关系，节点类型，），核心DOM中公共的属性和方法（节点访问，查找DOM节点，节点属性，节点的创建，追加和删除）
DOM官方定义 DOM,Document Object Model,文档对象模型,我们可以把网页中的所有"东西"看成是对象": DOM的官方定义:DOM可以使用脚本,动态 ...
- JS中DOM是什么、DOM的基本操作、DOM操作盒子模型的13个api——大总结（附源码）
文章目录 一,什么是DOM? 二,DOM的具体用途及发展史? 1,操作元素 2,操作属性 3,操作文本 三,JS操作盒子模型需要的13个api 一,什么是DOM? DOM:Document Objec ...
- JS中的DOM与BOM
一.Javascript组成 JavaScript的实现包括以下3个部分: ECMAScript(核心) 描述了JS的语法和基本对象. 文档对象模型 (DOM) 处理网页内容的方法和接口 浏览器对象模 ...
- 自学js第十二天:DOM概念和基础操作
Web API 总结1: dom文档树的作用,就是把网页全部内容转为一个个js节点对象去操作 , 因此dom的文档树的内部组成就是有许多叶子node节点对象.分别有七种类型的叶子包含网页全部内容都有对 ...
- JavaScript核心 DOM 和 BOM操作
JavaScript核心 DOM 和 BOM操作 Web APIs 简介 1. Web APIs 和 JS 基础关联性 1.1 JS 的组成 1.2 JS 基础阶段以及 Web APIs 阶段 JS ...
- Document，Node，Element，HTMLDocument ，HTMLCollection，HTMLElement，NodeList
这个问题如果不是基于原生js写组件,可能仍然不明不白,既然遇到了,就整理一下. 一.Document,Node,Element的关系 1,Document 对象 Document 对象是一棵文档树的根 ...
最新文章
- Oracle 10g配置RMAN RECOVERY CATALOG
- matlab在命令行注册,命令行运行matlab
- 2018年各大互联网前端面试题四（美团）
- aggr代码 cellranger_单细胞转录组测序数据分析流程-数据预处理
- python中def fun(a、b=200)_python中的函数的参数和可变参数
- HTML边框百分比,CSS：以百分比和边框表示的宽度
- android悬浮功能实现,Android实现系统级悬浮按钮
- leetcode 429 层序遍历n叉树（C语言）
- 在WebStorm环境中给nodejs项目中添加packages
- 如何接受上级指令_与上级沟通的技巧
- 【重点！记忆化递归+DP】LeetCode 72. Edit Distance
- Qi v1.2.4 -- WPC官方文档资源下载
- 解决VMware虚拟机安装Win10系统后无网络问题
- 五线谱音名和组别对照表_五线谱最全知识及符号！
- 有了AI智能绘画，我也可以成为绘画大师——全球最大规模中文跨模态生成模型ERNIE-ViLG
- 马克思主义哲学（哲学概论）
- ASP中Err.number返回的错误代码解释大全
- Python 实现给女朋友的每日微信消息提醒！做一个贴心的程序员！！！
- 计算机财务管理系统的目标,计算机财务管理之计算机财务管理系统的建立课件.ppt...
- 为何安装MySQL后每天会有cmd弹窗
热门文章
- [转]cmd 设置环境cmd环境变量命令set 设置永久环境变量命令setx
- [转]快速使用FileProvider解决Android7.0文件权限问题
- 解决夜神模拟器无法联机调试 adb server version (**） doesn't match this client (**); killing...
- Android OkHttp3简介和使用详解
- C语言试题五十一之已知学生的记录是由学号和学习成绩构成，n名学生的数据已存入s结构体数组中。请编写函数fun，该函数的功能是：找出成绩最高的学生记录，通过形参返回主函数(规定只有一个最高分)。
- linux网络编程之Listen函数参数介绍
- python正十三边形_一起学python-opencv十三（直方图反向投影和模板匹配）
- access函数_ACCESS中的DLookUp函数是如何运算的？
- 撩妹学会这一招，就没有人能拒绝你！
- Java常用的知识点就20_JAVA中一些需要记录的知识点