JavaScript学习笔记之DOM操作实例分析

最新推荐文章于 2024-05-21 21:30:26 发布
最新推荐文章于 2024-05-21 21:30:26 发布
阅读量208 收藏
点赞数
分类专栏： JavaScript

本文转载自 脚本之家 www.jb51.net

一、DOM概念

1. "D":Docment,指的是文档
2. “O”：Object，指的是对象，在javascript有三种对象：用户定义对象、内建对象（JavaScript语言对象。如Math，Array）、宿主对象（浏览器对象）
3. "M":Model,值得是Model，某种事物的表现形式

二、节点

1. 元素节点 ：<body> <p> <ul>等
2. 文本节点：<p>文本节点</p>、<li>文本节点</li>等
3. 属性节点：title id class 等

三、获取元素

三种方法：通过元素ID、通过标签名字、通过类名字来获取

请看下面实例：

1

2

3

4

5

6

7

<h1>What do you want to buy</h1>

  <p title="a gentle reminder">Donnot Forget TO Buy This Stuff</p>

  <ul id="purchases">

    <li>A tin of beans</li>

    <li class="sale">Cheese</li>

    <li class="sale important">Milk</li>

  </ul>

1、getElementsById(id) 返回一个对象

1

var obj=document.getElementById("purchases");

2、getElementsByTagName() 返回一个对象数组

1

2

3

4

5

6

var obj=document.getElementsByTagName('li')

alert(typeof obj);

alert(obj.length);

for(var i=0;i<obj.length;i++){

  alert(typeof obj[i]);

}

3、getElementsByClassName() 返回一个对象数组

1

2

3

4

5

var obj=document.getElementsByClassName('sale');

alert("具有sale类的元素个数："+obj.length);

//important sale顺序颠倒不影响 ----getElementsByClassName('sale important')

var obj_1=document.getElementsByClassName(' important sale');

alert("同时具有important 和sale类的元素个数："+obj_1.length);

四、获取和设置属性

1、getAttribue(attribute)?

1

2

3

4

5

var pa=document.getElementsByTagName('p');

for(var i=0;i<pa.length;i++){

  var text=pa[i].getAttribute('title');

  if(text) alert(text);

}

2、setAttribute(attribue,value)

1

2

3

var shoppping=document.getElementById('purchases');

shoppping.setAttribute('title','A list of goods');

alert(shoppping.getAttribute('title'));

五、小结

  • getElementById
  • getElementsByTagName
  • getElementsByClassName
  • getAttribute
  • setAttribute

上面5个常见方法是编写DOM脚本的基石

ClearLoveQ
关注
专栏目录
js之DOM深入学习总结
越努力，越幸运！
07-05 4942
DOM编程深入学习
JavaScript<二>
zhy0509的博客
12-20 139
1.parseInt() 强制转换为整型parseFloat() 强制转换为浮点型Number() 转换为数字String() 转换为字符串Boolean() 转换为布尔型2.找对象： (通过ID，通过class，通过标签名) var obj=document.getElementById()干什么？<1>、获取值： innerHTML,innerText,valueobj.innerHTML
php如何获取单选下拉框,JS获取文本框,下拉框,单选框的值的简单实例_javascript技巧...
weixin_30711223的博客
03-19 178
1.文本框1.1通过var t=document.getElementById("test").value把值赋给变量t,1.2 当然也可以反过来把已知的变量值赋给文本框，例如：var m = "5";document.getElementById("test").value= m;2.下拉列表框2.1112233通过var s=document.getElementById("sel").val...
[Web前端应用]--Javascript最有用的方法之一：document.getElementById() 【难度 ★★★】...
Web_in的博客
06-11 511
document.getElementById("元素的id")是前端开发中最有用的方法之一，是面向对象的体现。其能获取指定id的HTML元素，是Javascript的重要方法。 例如，它能实现对某HTML元素中的值进行修改，或者实现讲Javascript中的变量值传递到HTML表单中，再提交到服务器端的Java或PHP当中，实现前端Javascript变量与后台的Java或PHP变量间的间...
js 动态添加选项
m0_51402016的博客
11-07 303
首先我们应该了解相关知识点 Select 对象 Select 对象代表 HTML 表单中的一个下拉列表。 在 HTML 表单中，<select> 标签每出现一次，一个 Select 对象就会被创建。 您可通过遍历表单的 elements[] 数组来访问某个 Select 对象，或者使用 document.getElementById()。 <!doctype html> <html> <head> <meta cha..
JavaScript学习笔记
知识在于理解,运用在于总结,高阶在于巩固!
10-08 1096
目录1.简介2.使用方式1.标签引用2.文件引入3.输出1.向页面输出2.向控制台输出3.弹出窗口输出4.使用var关键字声明一个变量5.数据类型1.类型分类2.typeof运算符6.对象基础1.创建对象2.访问属性3.删除属性4.遍历对象7.函数1.函数创建2.函数调用3.匿名函数8.垃圾回收9.数组对象1.创建数组2.遍历数组3.数组方法10.Date对象11.Math对象12.RegExp对象13.JavaScript DOM1.DOM简介2.DOM文档操作1.查找HTML元素1.方法介绍2.方法演示
JS学习笔记（JavaScript基础学习必备）
2401_84434086的博客
04-28 768
三套“算法宝典”开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】算法刷题LeetCode中文版（为例）人与人存在很大的不同，我们都拥有各自的目标，在一线城市漂泊的我偶尔也会羡慕在老家踏踏实实开开心心养老的人，但是我深刻知道自己想要的是一年比一年有进步。最后，我想说的是，无论你现在什么年龄，位于什么城市，拥有什么背景或学历，跟你比较的人永远都是你自己，所以明年的你看看与今年的你是否有差距，不想做咸鱼的人，只能用尽全力去跳跃。祝愿，明年的你会更好！
《你不知道的JavaScript》学习笔记
Leon_Chenl的博客
05-21 776
简单类型本身并不是对象，null有时会被当做一种对象类型，但是这其实只是语言本身的一个bug，即对null执行typeof null是会返回字符串’object‘。变量的赋值操作会执行两个动作，首先编译器会在当前作用域中声明一个变量（如果之前没有声明过），然后在运行时引擎会在作用域中查找该变量，如果能够找到就对它赋值。在当前作用域中无法找到某个变量时，引擎就会在外层嵌套的作用域中继续查找，直到找到该变量，或抵达最外层的作用域（全局作用域）为止。当一个函数被调用时，会创建一个执行上下文。所以要尽量避免使用。
JavaScript学习笔记三
Python_Ghost的博客
05-02 663
移动端浏览器兼容性较好，我们不需要考虑js的兼容性问题，可以放心使用原生js书写效果，移动端有自己独特的地方。比如触屏touch(触摸事件)，Android和ios都有。touch对象代表一个触摸点。触摸点可能是一根手指，也可能是一根触摸笔。触屏事件可响应用户手指对屏幕或者触控板的操作通过class关键字创建类，类名的首字母要大写类里面有个constructor函数，可以接收传递过来的参数，返回实例对象。
JavaScript 学习笔记（十三）Dom创建表格
10-29
本文将以“JavaScript 学习笔记（十三）Dom创建表格”为基础，详细介绍如何使用JavaScript来动态创建和操作HTML表格。 #### 二、关键概念和技术点 1. **DOM基础**: DOM是一种标准，用于表示和操作HTML或XML文档的...
javascript学习笔记（二） 鼠标经过时，改变div块的背景色的代码
12-10
总结起来，这篇学习笔记通过一个简单的实例展示了如何用JavaScript响应鼠标事件来动态改变元素的样式，同时也提到了纯CSS实现的方案。这样的练习有助于提升开发者对DOM操作和事件处理的理解，是JavaScript初学者的...
卷积神经网络程序-matlab
10-03
卷积神经网络程序-matlab-设置基本参数规格，卷积，降采样层，卷积核的大小
利用神经网络实现DNN信号均衡.zip
最新发布
10-03
利用神经网络实现DNN信号均衡
基于文本增强与争议融合的虚假信息检测模型设计源码
10-03
该项目为吉大毕业论文设计源码，主题为基于文本增强与争议融合的虚假信息检测模型。项目包含20个文件，主要包括14个Python源代码文件、2个文本文件、1个Git忽略文件、1个许可证文件、1个Markdown文件、1个JSON文件。该模型旨在提高虚假信息检测的准确性，适用于相关研究与应用场景。
MATLAB 实现的蜜蜂算法优化卷积神经网络（Bee-CNN）进行图像分类预测的详细实例（包含详细的完整的程序和数据）
10-03
内容概要：本文提供了一个基于MATLAB的应用案例来演示蜜蜂算法优化卷积神经网络进行图像识别的具体流程，具体步骤从数据准备、CNN模型构建开始，到用蜜蜂算法优化权值参数、最后是模型训练以及效果评测。附带详尽完整且可以立即使用的源码与实验数据。 适用人群：熟悉 MATLAB 开发环境的基础用户，对图像分类、卷积神经网络及其改进方法有一定理论了解的工程技术人员。 使用场景及目标：该示例适用于初学者掌握MATLAB环境中结合蜜蜂算法改进的卷积神经网路设计技巧、用于解决复杂的图像识别任务。 阅读建议：学习前先确保自己的MATLAB安装完毕并且对基本操作有了解。建议边学习理论边实践尝试修改部分实验参数以便深入了解各个阶段的效果变化。
夏季研究：求解微分方程的神经网络.zip
10-03
夏季研究：求解微分方程的神经网络
JavaScript学习笔记：从基础到DOM编程
这份JavaScript学习笔记全面覆盖了初学者需要掌握的基本知识，从CSS到JavaScript语法，再到DOM操作，为读者提供了扎实的学习基础。通过深入学习和实践，读者可以逐步掌握Web前端开发的关键技术。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值