javascript开发系列(DOM操作)

最新推荐文章于 2024-09-03 17:02:58 发布
最新推荐文章于 2024-09-03 17:02:58 发布
阅读量458 收藏
点赞数
分类专栏： javascript系列 文章标签： javascript input button function xhtml server
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/net511/article/details/5311674
版权

选择元素：document.getElementsByTagName，document.getElementsById,document.getElementsByName。

               firstChild,lastChild,nextSibling，previousSibling

创建元素：document.createElement(),appendChild();

删除元素：removeChild();

实例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>无标题页</title>
    <style>
      .txt{ color:Red; border:solid 1px #ff0000}
    </style>
     <script type="text/javascript">
    
       function chElement()
       {  
        var txtAry=document.getElementsByTagName("input");
        document.getElementsByTagName
        for(i=0;i<txtAry.length;i++)
        {
          alert(txtAry[i].id);
        }
       }

      
    function crtElement()
    {
     var obCrt=document.getElementById("dvCreate");
     var obTxt=document.createElement("input");
     obTxt.type="text";
     obTxt.id="crtTxt";
     dvCreate.appendChild(obTxt);
    }
   
    function setAtr()
    {
      //var strColor="#ff0000";
     // (document.body.bgColor=='#ffffff')?document.body.bgColor="#000000":document.body.bgColor=strColor;
       var txtAry=document.getElementsByTagName("input");
        for(i=0;i<txtAry.length;i++)
        {
         txtAry[i].className="txt";
        }
    }
     </script>
</head>
<body>
    <form id="form1" runat="server" name="cc">
    <div id="dv0">
        <input id="txt1" type="text" />
        <input id="txt2" type="text" />
        <input id="txt3" type="text" />
        <input id="Button1" type="button" value="选择" οnclick="chElement()"/>
       
        <input id="Button2" type="button" value="新建" οnclick="crtElement()"/>
         <input id="Button3" type="button" value="设置" οnclick="setAtr()"/>
        <div id="dvCreate">
         
        </div>
       
   </div>
    
    </form>
</body>
</html>

net511
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript DOM操作详解
brokyz
06-22 1149
本文将是我在学习DOM操作时的笔记
JavaScript-DOM操作
qq_56045326的博客
06-13 491
Javas_DOM操作
JavaScript操作DOM对象
shi15062772894的博客
12-23 552
操作DOM DOM：Document Object Model（文档对象模型） 访问节点： 使用getElement系列方法访问指定节点 getElementById()、getElementsByName()、getElementsByTagName() 根据层次关系访问节点 节点属性： element属性： 节点信息： nodeName：节点名称 nodeValue：节点值 nodeType：节点类型 操作节点 操作节点的属性：getAttri...
JavaScript DOM操作(超详细)
wu_ry的博客
03-14 2493
在JavaScript中，"-"表示减号，如果样式属性名称中带有"-"号，则要省去"-",并且"-"后的首字母要大写，因此font-size对应的style对象的属性名称应为fontSize.微软公司为每个元素提供了一个currentStyle对象，它包含了所有元素的style对象的特性和任何未被覆盖的CSS规则的style特性，currentStyle对象与style对象的使用方式一样，语法格式如下所示。使用style属性和className属性设置元素的样式，想要获取某个元素的属性值，应该如何实现呢？
JavaScript DOM 操作
weixin_74448257的博客
11-05 269
javascript DOM操作
oak-dom:Oak javascript 开发套件的 Dom 操作包
06-25
`oak-dom`是一个专门为Oak JavaScript开发套件设计的库，它提供了一系列方便、高效的DOM操作方法，使得开发者能够更加轻松地处理页面元素。 **Oak JavaScript开发套件** Oak JavaScript开发套件是一个用于构建Web...
JavaScript学习笔记之DOM操作实例分析
10-17
了解并熟练掌握DOM操作是JavaScript开发的基础，通过DOM，我们可以实现丰富的交互效果和动态更新页面。常用的DOM方法如`getElementById`、`getElementsByTagName`、`getElementsByClassName`、`getAttribute`和`...
JavaScript操作HTML DOM节点的基础教程
11-24
以下是一些基础的DOM操作方法： 1. **获取节点关系**： - `element.parentNode`：返回当前元素的父节点。 - `element.firstChild` 和 `element.lastChild`：分别返回元素的第一个子节点和最后一个子节点。 - `...
JavaScript：DOM操作与事件处理
07-14
### JavaScript：DOM操作与事件处理 #### 一、DOM模型的基本概念 DOM，全称为**文档对象模型**（Document Object Model），是HTML和XML文档的标准API。它将文档表示为节点和对象的树形结构，使得开发人员可以通过...
Javascript系列-DOM操作(理论)
08-22
在本篇“JavaScript系列-DOM操作(理论)”中，我们将深入探讨DOM的相关概念和常见操作。 首先，我们需要了解JavaScript的数据类型，它们分为原始类型（如undefined、null、boolean、number、string、symbol和BigInt...
跨页面进行数据通讯
榴莲不好吃的专栏
09-02 369
Broadcast Channel API 允许在一个源的不同窗口、标签页或 iframe 之间进行通信。这是一种实时的通信机制，非常适合需要实时同步数据的场景。3.iframe 数据通讯 postMessage/message（可设置不同源数据通讯）1.使用 LocalStorage 或 SessionStorage（同源）// 检查消息来源，确保来自正确的源。// 检查消息来源，确保来自正确的源。'Hello 来自父亲的消息!'Hello 来自儿子的消息!// 忽略来自自身的消息。
vue3+vite 通过js引入的src，在打包后为什么不能显示
肖肖肖丽珠的博客
09-02 229
页面有个图片我是动态设置的。但是打包之后一直没有找到。我本来使用的绝对定位发现不行，改成了相对的也不行，最后改成下面的这种就可以啦。
Vue的状态管理——Vuex3&4&Pinia
警警的博客
08-30 2431
Pinia是Vue.js 3.x的状态管理库，它可以看作是Vuex的升级版，旨在提供一种更简单、更直观的方式来管理Vue.js应用程序的状态。Vuex 4是Vue.js 3.x版本的状态管理库，它在Vuex 3的基础上进行了多项改进和优化，使其更加适用于大型应用和复杂场景。Vuex 3是Vue.js 2.x版本的状态管理库，它提供了一种集中式存储和管理组件状态的方式。：在 Vue 3 项目中，你通常会使用 Vuex 4 或 Pinia 而不是 Vuex 3。在 Vue 3 项目中，你可能会在。
从面向对象(OOP)到面向切面(AOP)：编程范式的演变
妍思码匠的博客
08-30 1333
本文深入探讨了面向切面编程（AOP）在前端开发中的应用，解释了AOP如何通过动态增强与代码复用、降低模块间耦合度，为前端项目带来更高效、更模块化的解决方案。通过具体案例分析，如日志记录切面和动态埋点的实现，展示了如何利用装饰器模式、高阶组件等技术在前端实现AOP。理解AOP的原理与实践，将有助于开发者构建更易于维护和扩展的前端应用。无论你是前端新手还是资深开发者，本文都将为你提供有价值的见解和实用技巧。
WHAT - React 函数与 useMemo vs useCallback
weixin_58540586的博客
09-03 403
目录介绍`useMemo` 与 `useCallback` 的区别示例代码`useMemo` 示例`useCallback` 示例总结 介绍 在 React 中，useMemo 和 useCallback 是两个用于性能优化的钩子，尽管它们有些相似，但各自有不同的用途和应用场景。理解它们的区别和适用情况可以帮助你更有效地管理组件的性能和状态。 useMemo 与 useCallback 的区别 useMemo: 目的: 用于记忆化（缓存）计算结果。它接受一个计算函数和依赖项数组，只有当依赖项发生变化时
在 Vue 中实现跨项目数据传递
最新发布
世轩的博客
09-03 855
需要注意的是，跨项目数据传递可能会带来一些安全和数据一致性的问题。在实际应用中，要根据具体情况选择合适的方法，并确保数据的安全性和可靠性。同时，对于敏感数据，应该采取加密等安全措施。
vue3+vant4父组件点击提交并校验子组件form表单
liuzaixi的博客
08-30 442
方法进行表单验证，如果验证通过则执行提交逻辑。获取子组件的引用，在父组件的点击事件中调用子组件的。这样父组件就可以通过。调用子组件的验证方法了。
vue part 5
E___V___E的博客
08-29 909
生命周期：1 .又名：生命周期回调函数、生命周期函数、生命周期钩广。2 .是什么：Vue在关键时刻用我们调用的一些特殊名称的函数。3•生命周期函数的名字不可史改，但函数的具体内容是程序员根据需求编写的.4 .生命周期函数中的this指向是vm或组件实例对象。
Nginx部署前端Vue项目
不会代码的小林
09-03 346
Nginx是一款轻量级的高性能Web服务器，可以用于静态文件的托管和反向代理等场景。现在，您可以在浏览器中访问http://example.com（请替换为您自己的域名），应该可以看到Vue应用程序正在运行。请将example.com替换为您自己的域名，将/var/www/my-project/dist替换为Vue项目的dist目录的实际路径。现在，我们需要配置Nginx来托管Vue项目的静态文件。接下来，我们可以使用Vue CLI创建一个新的Vue项目。在部署之前，我们需要先构建Vue项目。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值