DOM基本语法

最新推荐文章于 2021-12-22 13:33:01 发布
最新推荐文章于 2021-12-22 13:33:01 发布
阅读量435 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/XinYe666666/article/details/80802336
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin:0;
            padding: 0;
        }
        li{
            height: 20px;
            margin: 10px 0;
            border: 1px solid;
            text-align: center;
            list-style: none;
        }

    </style>
</head>
<body>
<input type="text">
<input type="button" value="输入">

<ul id="ul">
    <!--<li >1</li>-->
    <!--<li id="li">2</li>-->
    <!--<li>3</li>-->

</ul>

<script>
    var oVa=document.getElementsByTagName("input")[0];
    var oPt=document.getElementsByTagName("input")[1];
    var oUL=document.getElementById("ul");
//    var oLi2=document.getElementById("li");
//    var  oLi=document.createElement("li");创建节点li
//    oLi.innerHTML="<b>我是创建的li</b>";
//    oUL.appendChild(oLi)；在UL下添加li
//     oUL.insertBefore(oLi,oLi2);在id为li的节点前面添加个节点li;
//    oUL.removeChild(oLi2)；删除id为li的节点；
//      oUL.replaceChild(oLi,oLi2);li替换id为li的节点；
    oPt.onclick=function () {

          var oVale=oVa.value;
          var oLi=document.createElement("li");
          oLi.innerHTML=oVale;
        oUL.appendChild(oLi)

        oVa.value="";





    }




</script>

</body>
</html>
i鲸落
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
DOM 基础语法
既然选择远方，便只顾风雨兼程！
02-12 2575
文章目录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 获取属性
JavaScript 进阶班之DOM技术-pink老师
Arina_Ke的博客
01-20 735
JavaScript进阶班之DOM技术 1 DOM简介 1.1 什么是DOM 文档：一个页面就是一个文档，DOM中使用doucument来表示 元素：页面中的所有标签都是元素，DOM中使用 element 表示 节点：网页中的所有内容都是节点（标签，属性，文本，注释等），DOM中使用node表示 DOM 把以上内容都看做是对象 2 获取元素 2.1 如何获取页面元素 根据id来获取 使用 getElementByld() 方法可以获取带ID的元素对象 doucument.getElem
Dom基础语法
Primary_Insist的博客
11-14 1187
目录 一、获取元素 二、操作元素 改变元素的内容 获取、修改元素属性 修改表单元素 修改样式属性 三、节点 获取节点 创建节点 添加节点 删除节点 复制节点 三种动态创建元素的区别 四、事件 事件三要素 注册事件 删除事件（解绑事件） DOM事件流 事件对象 事件对象常见的属性和方法 事件委托 console.dir 打印我们返回的元素对象，更好查看里面的属性和方法 一、获取元素 document.getElementById(id)...
♥️Javascript之DOM♥️
欢迎
09-10 2065
目录 节点 Node类型 属性 方法 Document类型 属性 DOM编程界面 查找元素 添加元素 Element类型 属性 Text类型 属性和方法 文档对象模型（DOM）是网页的编程接口。它给文档（结构树）提供了一个结构化的表述并且定义了一种方式——程序可以对结构树进行访问，以改变文档的结构，样式和内容。 浏览器会根据DOM模型，将结构化文档（比如HTML和XML）解析成一系列的节点，再由这些节点组成一个树状结构（DOM T...
JavaScript基础语法、dom操作树及document对象
10-25
本文介绍了学习javascript重要的3个内容基础语法、dom操作树及document对象，小伙伴们一定要弄明白才行
vue基础语法练习源码
12-09
首先，让我们深入了解Vue的基础语法。Vue实例是整个应用的核心，它通过`new Vue()`创建。在HTML文件中，我们通常使用`<script>`标签引入Vue库，并创建实例，将DOM元素与Vue实例绑定。例如： ```html ...
DOM和BOM的使用
01-08
DOM（Document Object Model）和 BOM（Browser Object Model）是前端开发中两个基础概念。DOM 是一个文档对象模型，它将 HTML 文档抽象为一个树形结构，允许开发者通过 JavaScript 操作文档的内容和结构。BOM 则是...
JavaScript基础语法，内含ppt，详细源码案例，node软件
06-27
这个压缩包包含的资源可以帮助我们深入理解和学习JavaScript的基础语法。 首先，"第2章 基本语法 教学PPT.ppt"很可能是关于JavaScript语法讲解的幻灯片。这部分内容可能涵盖了变量声明（var、let、const）、数据...
【前端系列教程之JavaScript】09_DOM编程详解_基础篇
波哩个波的博客
12-22 1227
一、JavaScript DOM 概述 1.1、DOM概念 文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理超文本标记语言的标准编程接口。它是一种与平台和语言无关的应用程序接口(API),它可以动态地访问程序和脚本,更新其内容、结构和www文档的风格(目前,HTML和XML文档是通过说明部分定义的)。文档可以进一步被处理，处理的结果可以加入到当前的页面。DOM是一种基于树的API文档，它要求在处理过程中整个文档都表示在存储器中。 ...
JavaScript中DOM基础语法
木易一
02-08 1055
一、关于DOM    DOM全称为document object model（文本对象模型）， 当网页被加载时，浏览器会创建页面的文档对象模型，即dom元素。    document对象指的是所有的html对象，通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。   JavaScript 能够改变页面中的所有 HTML 元素 JavaScript 能够改变...
JS基础 DOM 语法大总结
xiaodingmao
08-05 420
1获取元素 获取非常规标签 html body head var html=document.documentElement var body=document.body var head=document.head 获取常规标签 1、根据ID获取元素 document.getElementById('ID名字') 如果没有对应的ID元素，就是null 2、根据类名获取元素 document.getElementsByClassName('类名') 返回伪数组，伪数组内第[n]个才是元素 3、
DOM操作语法（上）
u012118382的专栏
08-20 512
Dom操作 1.   dom（document object model） 1.   document文档  （html文件和xml文件）（标记语言（带有标签如）） 2.   object(对象)javascript是基于对象的（html元素转成的js对象） 注意：如果使用js操作或html文档，就需要先将html文档结构转成js对象 如     a）操作属性 B）       操作内
【js】Dom基本语法
weixin_43689100的博客
12-27 254
Dom (document object model)即文本对象模型，document对象指的是html中所有对象。 1.Dom元素的获取： （1）getElementsByClassName getElementsByClassName 获取出来的对象是集合类型（即数组类型） 因为class类名称可以绑定多个不同的元素，有长度属性 length代表其长度。 innerHTML 对元素的HTM...
原生js操作dom的笔记整理
热门推荐
isxixi的博客
12-06 1万+
javascript分为3部分 ECMAScript 基础语法 DOM d – document o object m –model 文档对象模型 BOM DOM DOM 给我们提供了一些方法，让我们可以使用js来控制页面中的标签等。页面元素 – 页面中的标签 常用的dom方法 document.getElementById(“box”);//通过id获取标签 document.g
DOM操作语法（中）
u012118382的专栏
08-20 380
Dom操作（中） 通过name值获取对象    通常这样获取 2、选项卡
107个常用Javascript语句1
最新发布
08-03
而在DOM（Document Object Model）层次中，浏览器窗口的顺序是`window`对象，其下有`navigator`、`screen`、`history`、`location`和`document`等子对象。 获取表单元素的信息，如名称和值，可以使用`...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值