DOM属性的增删改、属性的其他操作及DOM事件

最新推荐文章于 2024-09-11 09:32:29 发布
最新推荐文章于 2024-09-11 09:32:29 发布
阅读量212 收藏
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43375983/article/details/121779702
版权

前端

一、BOM属性的增删改

Ⅰ、获取标签document.getElementById()

Ⅱ、获取属性值

方法一：document.write(inObj.value);

方法二：document.write(inObj.getAttribute(“value”));

Ⅲ、设置 属性值

方法一：inObj.value=”hello”;

方法二：inObj.setAttribute(“value”, “Django”);

Ⅳ、添加属性document.createAttribute(“class”);

Ⅴ、删除属性inObj.removeAttribute(“name”);

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>DOM 属性相关操作</title>

</head>

<body>

<input type="text" name="aaa" id="inputid" value="请输入：">

<script>

    // 1、获取标签

    var inObj = document.getElementById("inputid");

    document.write("<br/>");

    // 2、获取属性值 方法一

    document.write(inObj.value);

    document.write("<br/>");

    // 获取属性值 方法二

    document.write(inObj.getAttribute("value"));

    document.write("<br/>");

    // 3、设置属性值

    // 方法一

    // inObj.value="hello";

    // document.write(inObj.value);

    // document.write("<br/>");

    // 方法二

    // inObj.setAttribute("value", "Django");

    // document.write(inObj.value);

    //document.write("<br/>");

    // 4、添加属性

    // 创建属性节点

    var attrObj = document.createAttribute("class");

    // 与input标签建立联系

    //inObj.appendChild(attrObj);

    document.write("<br/>");

    // 5、删除属性

    document.write(inObj.getAttribute("name"));

    inObj.removeAttribute("name");

    document.write("<br/>");

    document.write(inObj.getAttribute("name"));

</script>

</body>

</html>

二、DOM属性的其他常用操作

Ⅰ、标签节点

nodeName返回标签名，nodeType返回整型1，nodeValue返回null

Ⅱ、属性节点

nodeName返回属性名，nodeType返回整型2，nodeValue返回属性值

Ⅲ、文本节点

nodeName返回#text，nodeType返回整型3，nodeValue返回文本本身

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>DMO 属性操作</title>

</head>

<body>

<span id="span_id"> Hello Django </span>

<br/>

<script>

/*

元素节点 /属性节点 /文本节点

    nodeName: 返回标签名 /属性名 /#text

    nodeType: 1 /2 /3

    nodeValue: null /属性值 /文本本身

     */

    // 1、标签节点

    var eleObj = document.getElementById("span_id");

    document.write(eleObj.nodeName);

    document.write("<br/>");

    document.write(eleObj.nodeType);

    document.write("<br/>");

    document.write(eleObj.nodeValue);

    document.write("<hr/>");

    // 2、属性节点

    var attrObj = eleObj.getAttributeNode("id");

    document.write(attrObj.nodeName);

    document.write("<br/>");

    document.write(attrObj.nodeType);

    document.write("<br/>");

    document.write(attrObj.nodeValue);

    document.write("<hr/>");

    // 3、文本节点

    var textObj = eleObj.firstChild;

    document.write(textObj.nodeName);

    document.write("<br/>");

    document.write(textObj.nodeType);

    document.write("<br/>");

    document.write(textObj.nodeValue);

</script>

</body>

</html>

三、DOM父节点与子节点

Ⅰ、已知子节点获取父节点

Ⅱ、已知父节点获取子节点

Ⅲ、获取全部子节点

Ⅳ、获取子节点的长度

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>父子节点</title>

</head>

<body>

<span>Hello</span>

<ul>

    <li id="li1">111</li>

    <li id="li2">222</li>

    <li id="li3">333</li>

    <li id="li4">444</li>

</ul>

<span>World</span>

<script>

    // 1、已知子节点获取父节点

    var liEle = document.getElementById("li1");

    var ulEle = liEle.parentNode;

    // 2、已知子节点获取父节点

    var ulObj = document.getElementsByTagName("ul")[0];

    document.write(ulObj.firstChild);

    document.write(ulObj.lastChild);

    // 获取全部子节点

    var childObj = ulObj.childNodes;

    document.write(childObj);

    // 获取长度，5个换行加4个子节点

    document.write(childObj.length);

</script>

</body>

</html>

四、InnerHTML属性

Ⅰ、获取文本内容

Ⅱ、设置HTML标签

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>innerHTML属性</title>

    <style>

        #box {

            width:200px;

            height:200px;

            background-color: #3875d7;

        }

    </style>

</head>

<body>

<span id="span_id"> 123 </span>

<div id="box"> 456 </div>

<!--<table border="1" cellspacing="1" bgcolor="red" width="100px" height="100px"><tr><td>1</td></tr><tr><td>2</td></tr><tr><td>3</td></tr></table>-->

<script>

    // 获取span标签对象

    var spanObj = document.getElementById("span_id");

    // 获取span的文本内容

    document.write(spanObj.innerHTML);

    // 设置 HTML 标签

    var divObj = document.getElementById("box");

    divObj.innerHTML = '<table border="1" cellspacing="1" bgcolor="red" width="100px" height="100px"><tr><td>1</td></tr><tr><td>2</td></tr><tr><td>3</td></tr></table>\n'

</script>

</body>

</html>

五、DOM事件

  1. 内联模式

将事件作为标签使用，可以识别JS中的代码和函数，不能做到JS和HTML标签分离

  1. 脚本模式

将事件作为属性使用，匿名函数，HTML标签与JS分离

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>DOM 事件</title>

</head>

<body>

<input type="button" οnclick="func()" value="内联模式函数按钮">

<input type="button" οnclick="alert('123')" value="内联模式alert按钮">

<input type="button" id="input_1" value="脚本模式按钮1">

<input type="button" id="input_2" value="脚本模式按钮2">

<script>

    // 1、内联模式

    // 将事件作为标签的属性使用

    // 可识别JS中的代码和函数，不能做到JS和HTML标签分离

    function func(){

        document.write("hello");

    }

    // 2、 脚本模式

    // 将事件作为属性来使用，匿名函数

    // 获取input标签

    // HTML标签和JS分离

    var input1 = document.getElementById("input_1");

    // 给input标签添加单击事件

    input1.onclick = function (){

        document.write("input_1");

    }

    

</script>

</body>

</html>

六、鼠标事件

①单击事件 onclick

②双击事件ondblclick

③悬浮事件 onmouseover

④失去焦点，移除鼠标 onmouseout

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>鼠标事件</title>

    <style>

        #box{

            width:100px;

            height:100px;

            background-color: rebeccapurple;

        }

    </style>

</head>

<body>

<div id="box">  </div>

<script>

    // 获取元素

    var divObj = document.getElementById("box");

    // 添加事件

    // 单击事件

    divObj.onclick = function (){

        alert("单机事件");

    }

    // 双击事件

    divObj.ondblclick = function (){

        alert("双击事件");

    }

    // 悬浮事件

    divObj.onmouseover = function (){

        alert("悬浮事件");

    }

    // 失去焦点，把鼠标移除

    divObj.onmouseout = function (){

        alert("失去焦点");

    }

</script>

</body>

</html>

霡霂小雨
关注
Django-Dom
weixin_44930101的博客
06-25 385
1.1 获取标签：直接选择器和间接选择器 1、Dom作用 1. 通过 tag, name, id 等方式来查找html标签中的内容 2. 文档对象模型（Document Object Model，DOM）是一种用于HTML和XML文档的编程接口 3. 它给文档提供了一种结构化的表示方法，可以改变文档的内容和呈现方式 4. DOM属于浏览器，而不是JavaScript语言规范里的规定的核心内容。 ...
JavaScript的DOM之鼠标悬浮事件
m0_50481455的博客
04-21 1万+
JS的DOM之鼠标悬浮事件 鼠标悬浮事件之onmouseover()和onmouseout()事件 这里用大白话介绍一下最简单的原理： 就是当鼠标在这块区域时候会触发相应事件，将鼠标挪开则恢复原先事件 附上代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>鼠标悬浮事件onmouseover()和onmouseout()事件</tit
django使用datatable html(dom)resourced data
qq_38963393的博客
05-26 208
先使用模板语言渲染html页面，然后使用datatable。 <table id="example" class="display" style="width:100%"> <thead> <!-- (['_state', 'id', 'group_name', 'group_description', 'device_type', 'manufator', 'software_version', 'connect--> <!--ion_type',
DOM中查找、添加、删除元素的常用方法
m0_50553633的博客
10-07 1410
JavaScript 能改变页面中的所有 HTML 元素JavaScript 能改变页面中的所有 HTML 属性JavaScript 能改变页面中的所有 CSS 样式 JavaScript 能删除已有的 HTML 元素和属性JavaScript 能添加新的 HTML 元素和属性JavaScript 能对页面中所有已有的 HTML 事件作出反应JavaScript 能在页面中创建新的 HTML 事件
JS中DOM元素的操作
热门推荐
不想写代码的一天
05-23 4万+
一、DOM元素的获取 1）document.getElementsByClassName ( “class”) 返回集 htmlcollection ,用法和数组一致 说明: class为DOM元素上class属性的值 2）document.getElementById( “id” ) 功能:返回对拥有指定ID的第一个对象的引用 返回值: DOM对象 说明: id为DOM元素上id属性的值 3)...
js中script的上下放置区别，Dom的增删改创建操作实例分析
10-15
主要介绍了js中script的上下放置区别，Dom的增删改创建操作,结合实例形式分析了JavaScript基本dom事件、script在head和body中放置的区别、以及Dom的增删改创建等相关操作技巧,需要的朋友可以参考下
js之 DoM操作、节点、节点之间关系的属性
08-13
js之 DoM操作、节点、节点之间关系的属性
使用js dom和jquery分别实现简单增删改
10-25
在本文中，我们将探讨如何使用JavaScript的原生DOM操作和jQuery库来实现Web页面上的基本增删改功能。这些功能对于前端开发至关重要，因为前端交互往往涉及动态地修改网页内容。 首先，我们来了解一下什么是DOM...
js表格操作，DOM实现数据动态增删查改
12-02
本话题主要探讨如何利用原生JavaScript和DOM来实现数据表格中的动态增删查改功能，这对于前端开发来说是一项基本且重要的技能。 1. **创建数据表格** - 使用`<table>`元素创建表格结构，包括`<thead>`定义表头，`...
javascript GetElementById的属性和对元素属性的设置
zhou363667565的专栏
08-18 1万+
 顾明思义，get-Element-By-Id，就是通过ID来设置/返回HTML标签的属性及调用其事件与方法。用这个方法基本上可以控制页面所有标签，条件很简单就是给每个标签分配一个ID号   一getElementById的使用:   document.getElementById("link").href; document.getElementById("link").target...
深入理解DOM事件类型系列第五篇——文本事件
weixin_33801856的博客
09-19 120
前面的话 　　如果DOM结构发生变化，触发的是变动事件；如果文本框中的文本发生变化，触发的是文本事件 　　HTML5为input控件新增了很多type属性，大大增加了input控件的应用场景。其中一个是type="range"的input控件，可以通过拖动游标改变value值，但并不是所有浏览器都可以实时显示，除了IE10+浏览器 &lt;input type="range" min="...
DOM中监听节点变化的事件(变动事件)的用法 — 第13.4.6节
flyingpig2016的博客
12-16 3万+
DOM变动事件用法
12_JQuery DOM操作之获取、设置和删除元素标签属性
l0510402015的博客
04-14 449
1.attr(): 获取/设置元素的属性 2.removeAttr():删除属性 3.prop():获取/设置元素的属性 4.removeProp():删除属性 *attr和prop区别？ 1.如果操作的是元素的固有属性(就是在h5官方文档中列出的属性)，则建议使用prop 2.如果操作的是元素自定义的属性，则建议使用attr 注意：有些固有 举例： ...
深入理解DOM事件类型系列第三篇——变动事件
weixin_34296641的博客
09-14 268
前面的话 　　变动(mutation)事件能在DOM中的某一部分发生变化时给出提示，这类事件非常有用，但都只能使用DOM2级事件处理程序，且由于浏览器兼容性不好，所以用的不广泛   删除节点 　　删除节点时，涉及到DOMNodeRemoved、DOMNodeRemovedFromDocument和DOMSubtreeModified这三个事件，下面将详细介绍 DOMNodeRemoved...
JS中的DOM操作属性、DOM创建、DOM增加、DOM修改、DOM删除以及DOM获取非行间样式
王春燕的博客
04-26 5590
当网页被加载时，浏览器会创建页面的文档对象模型DOM（Document Object Model），在DOM中，每个东西都是节点。 DOM四大操作：查找、更新、添加、删除 通过DOM，JavaScript 可创建动态的 HTML： 能够改变页面中的所有 HTML 元素 能够改变页面中的所有 HTML 属性 能够改变页面中的所有 CSS 样式 能够对页面中的所有事件做出反应 前提：首先找到相关元素，前面一篇博客，详细的说明了，如何查找相关的元...
数据结构--知识点16--搜索算法(二叉树)
ANingL的博客
09-06 3106
文章目录一、树的概念1、特点2、树的术语3、树的种类4、树的存储与表示5、常见的树的应用场景二、二叉树1、概念2、性质 一、树的概念 树是一种抽象数据类型(ADT)或是视作这种抽象数据类型的数据结构 1、特点 每个节点有零个或多个子节点 没有父节点的节点称为根节点 每一个非根节点有且只有一个父节点 除了根节点外，每个子节点可以分为**多个不相交(因为都只有一个父节点)**的子树 2、树的术语 节点的度：一个节点含有的子树的个数称为该节点的度 树的度：一棵树中，最大的节点的度称为树的度 叶节点或终端节点
操作DOM树之删除指定的标签
ll123c的博客
04-02 1208
问题描述： 删除某一个指定的标签 问题分析： 1.标签不能自己删除自己，所以第一步就要获取到要获取要删除的标签 2.获取被删除标签的父标签 3.父标签调用removeChild()方法 <html> <head> <title>html示例</title> </head> <body>...
Django-ORM中的关系映射
MarconiYe的博客
02-13 307
在DOM中，如果有两个表是需要关联的，但是关联方式有许多种： 比如一个丈夫表和一个妻子表，这两个表是一一对应的，每一个丈夫数据对象只能对应一个妻子数据，此时就可以在丈夫或者妻子的类中设置一个对方的类属性举例如下： class Hunsband(models.Model): name = models.CharField('丈夫', max_length = 50) class Wife(models.Model): name = models.CharField('妻子', max_length =
构建高效 Python Web API：RESTful 设计与 GraphQL 实践
最新发布
weixin_52392194的博客
09-11 1292
在现代 Web 开发中，API 是前后端通信的核心枢纽，设计一个高效且易于扩展的 API 是保证系统良好运行的基础。本文详细探讨 RESTful API 的设计准则，如何生成 API 文档，GraphQL 的应用，以及如何在 FastAPI 和 Django REST Framework 中实现分页、过滤、认证等功能。
XML实战：DOM操作与DOM4J删改查示例
"这篇文档主要介绍了DOM操作XML的实战技巧，包括了添加、删除、更新和查询等基本操作。" 在Java中，DOM（Document Object Model）是一种用于处理XML和HTML文档的标准接口，它将整个文档表示为一个树形结构，每个...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值