DOM 基础

最新推荐文章于 2024-07-27 17:06:15 发布
最新推荐文章于 2024-07-27 17:06:15 发布
阅读量81 收藏
点赞数
文章标签： 人工智能 javascript ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jiumoji1987/article/details/84515909
版权

 

1.DOM 的4个基本接口

　　Document　　Node　　NodeList　　NamedNodeMap

2.DOM 基本对象

　　（1）Document 对象

　　（2）Node 对象

　　　　nodeType 属性返回节点的类型：Element（1）、Attr（2）、Text（3）、Comment（8）、Document（9）、DocumentFragment（11）

　　（3）NodeList 对象

　　（4）Elment 对象

　　（5）Attr 对象

3.判断文本是否空格的方法：

　　　　if(node.nodeType == 3 && !/\s/.test(node.nodeValue)){...}

4.DOM操作综合实例。

　　本案例中，要实现添加和删除分类信息，主要用到创建节点、插入节点、删除节点、设置元素节点属性等操作。运行效果及代码如下。

    

<script language="javascript" type="text/javascript">

        var id = 0;

        function addSort(){

            var txtInput = document.getElementById("txt");

            if(txtInput.value == ""){

                alert("请输入分类名称！");

                txtInput.focus();

                return;

            }

            var row = document.createElement("tr");

            var rowId = id;

            row.setAttribute("id",rowId);

            row.bgColor="#99FF99";

            var cell = document.createElement("td");

            cell.bgColor="#6699CC";

            var txtNode = document.createTextNode(txtInput.value);

            cell.appendChild(txtNode);

            row.appendChild(cell);

            

            var deleteButton = document.createElement("input");

            deleteButton.setAttribute("type","button");

            deleteButton.setAttribute("value","删  除");

            deleteButton.onclick = function(){deleteSort(rowId)};

            cell = document.createElement("td");

            cell.appendChild(deleteButton);

            row.appendChild(cell);

            

            document.getElementById("sortList").appendChild(row);

            txtInput.value = "";

            

            id++;

        }

        

        function deleteSort(id){

            if(null != id){

                var rowToDelete = document.getElementById(id);

                var sortList = document.getElementById("sortList");

                sortList.removeChild(rowToDelete);

            }

        }

    </script>

  </head>

  

  <body>

      <table border="1" width="80%" align="center" bgColor="#99ccff">

          <tbody>

          <tr>

              <td colspan="3" align="center"><b>分类管理</b></td>

          </tr>

          <tr>

              <td>请输入分类名称：</td>

              <td><input id="txt" type="text" size="40"/></td>

              <td><input id="addBtn" type="button" value="添加" οnclick="addSort()"/></td>

          </tr>

          <tr>

              <td colspan="3" align="center"><b>已添加的分类</b></td>

          </tr>

          </tbody>

      </table>

      <table border="1" align="center" width="80%">

          <tr height="30">

              <td width="80%">分类名称</td>

              <td>操作</td>

          </tr>

          <tbody id="sortList"></tbody>

      </table>

  </body>

</html>

jiumoji1987
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
DOM基础
张恒华的博客
03-21 6139
DOM查找 JavaScript DOM基础 DOM是Document Object Model（文档对象模型）的缩写 文档对象模型（DOM）是HTML和XML文档的编程接口，它提供了对文档的结构化的表述，并定义了一种方法可以使从程序中对该机构进行访问，从而改变文档的结构、样式和内容 DOM查找方法 1 语法： document.getElementById("id") 功能： 返...
DOM基础操作
LKAK117的博客
08-01 564
DOM:document objectmodel文档对象模型
DOM基础知识
Mozarty的博客
04-22 1264
何为DOMDOM，即Document Object Model（文档对象模型），是一种Web API，它将HTML或XML文档表示为一个树形结构，每个节点都是一个对象，从而使开发者可以使用脚本语言（例如JavaScript）动态地访问和修改文档内容、结构和样式。何为Web APIWeb API是一种由Web浏览器提供的编程接口，它允许开发者通过JavaScript等脚本语言与浏览器进行交互，从而实现动态网页和丰富的Web应用程序。
JavaScript DOM基础
程序员柒的博客
07-18 1640
本文简单的讲解了JavaScript的DOM基础，适合初学的朋友们，如果本文对你有所帮助请三连支持博主，你的支持是我更新的动力。以下是本篇文章正文内容一个完整的JavaScript实现由以下3个不同部分组成核心（ECMAScript）语言核心部分，描述了该语言的语法和基本对象。文档对象模型（DocumentObjectModel，DOM）网页文档操作标准，描述处理网页内容的方法和接口。浏览器对象模型（BOM）客户端和浏览器窗口操作基础，描述与浏览器进行交互的方法和接口。编程接口。......
DOM 基础操作
程序员柒的博客
08-01 3956
本文是博主的一些笔记跟想法，如果觉得本文有点东西请个博主点个关注，你的支持是我更新的动力，先赞后看养成习惯。以下是本篇文章正文内容一个完整的JavaScript实现由以下3个不同部分组成核心（ECMAScript）语言核心部分，描述了该语言的语法和基本对象。文档对象模型（）网页文档操作标准，描述处理网页内容的方法和接口。浏览器对象模型（BOM）客户端和浏览器窗口操作基础，描述与浏览器进行交互的方法和接口。官方语言文档一个页面就是一个文档，DOM中使用document表示。...
DOM 基础详解
m0_52861684的博客
09-26 2912
DOM 基础事件从零开始详细总结。
DOM 基础语法
既然选择远方，便只顾风雨兼程！
02-12 2589
文章目录DOM基础语法1、 简介1.1 DOM树2、 获取元素2.1 根据 id 获取2.2 根据标签名获取2.3 根据标签名获取2.4 根据 类名来获取2.5 通过指定选择器获取2.6 获取 body 和 html 元素3、 事件基础3.1 概述3.2 事件执行步骤3.3 常见的鼠标事件4、 操作元素4.1 改变元素内容4.2 改变元素属性4.3 表单元素属性操作4.4 样式属性操作4.4.1 行内样式4.4.2 类名样式4.5 排他思想4.6 表单全选与取消全选4.7 自定义属性操作4.7.1 获取属性
DOM基础测试--不凡
Harley567
09-22 5687
DOM基础测试 1.如何获取 DOM 对象 document.getElementById(‘id’); document.getElementByClassName(‘className’); document.getElementByTagName(‘标签名’); document.querySelector(‘css选择器’); //返回的是css选择器的第一个值 document.querySelectorAll(‘css选择器’); //返回的是所有被查找的元素 是一个类数组; 2.常用属性 st
JavaScript学习二——DOM基础
qq_57985179的博客
10-03 656
一、什么是DOM DOM（全称 Document Object Model），即文档对象模型。通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。包括以下能力：改变页面中的所有 HTML 元素、改变页面中的所有 HTML 属性、改变页面中的所有 CSS 样式、对页面中的所有事件做出反应。 （1）查找 HTML 元素 通过 JavaScript，我们可以操作 HTML 元素。 1、通过 id 找到 HTML 元素 在 DOM 中查找 HTML 元素的最简....
DOM基础回顾
tzbwdr的博客
05-19 495
DOM基础回顾
html.rar_dom基础学习
09-21
DOM基础学习主要包括以下几个方面： 1. **DOM结构**：DOM将HTML文档解析为一棵由节点组成的树，其中每个元素、属性和文本都对应一个节点。根节点是`<html>`，下面包含`<head>`和`<body>`两个子节点。元素节点有子...
JavaScript学习笔记之DOM基础操作实例小结
10-17
主要介绍了JavaScript学习笔记之DOM基础操作,结合实例形式总结分析了javascript针对dom元素节点、属性的相关获取、设置等操作技巧,需要的朋友可以参考下
JvavScript之dom基础（源代码）
05-31
JvavScript之dom基础（源代码）JvavScript之dom基础（源代码）JvavScript之dom基础（源代码）JvavScript之dom基础（源代码）JvavScript之dom基础（源代码）JvavScript之dom基础（源代码）JvavScript之dom基础（源...
2024钉钉杯A题思路详解
全栈川川
07-26 1495
2024钉钉杯思路
常见的文心一言的指令
知码客
07-25 1049
文心一言，作为百度研发的预训练语言模型“ERNIE 3.0”的一项功能，能够与人对话互动，回答问题，协助创作，高效便捷地帮助人们获取信息、知识和灵感。
安装TensorRT各自小库版本问题
Ppandaer的博客
07-24 363
降版本：protobuf3.19，onnx 1.12。
推荐几款支持AI剪辑并可使用个人视频素材的软件！
wly476923083的博客
07-25 972
点击编辑按钮，可以进入一键成片后的编辑状态，在这里你可以更换每段的视频素材、文案等，也可以编辑草稿，进行更多视频内容编辑，编辑完成后，点击右上角的“导出”按钮，就可以将编辑好的视频导出到本地！另一种是“输入和提取文案”，切换到“输入和提取文案”，自己输入视频脚本，或是点击“提取视频文案”功能键，选择要提取文案的视频，一键提取视频脚本，支持多次提取！③确认文案后，点击底部的“生成视频”，它会进行视频分析、智能包装，然后为你生成5个营销视频，你可以选择查看任意视频导出使用！
视觉巡线小车（STM32+OpenMV）——总结
最新发布
qq_67319052的博客
07-27 953
基于前面的系列文章，已基本介绍完了基于STM32+OpenMV的视觉巡线小车，本文将以小编自己的小车对其进行一下总结。如果完成了前面视觉巡线小车——STM32+OpenMV系列文章的内容，那么已经实现了一辆基于STM32+OpenMV的视觉巡线小车了。到此你已经学到了：直流减速电机的控制；编码器测速；STM32——定时器（PWM、正交编码、中断）、串口等；OpenMV——图像二值化，线性回归处理等等。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值