03.JavaScript对DOM操作

JavaScript引入方式

外部引入

在head或者body中,添加以下代码

<script  type="text/javascript" src="js/demo.js"></script>

内部引入

在head或body中,定义script标签,然后在script标签里面写js代码

 <script>alert("这是js的内部引入");</script>

DOM

DOM是什么

DOM(Document Object Model)是一套对文档的内容进行抽象和概念化的方法。 

当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model)。

HTML DOM 模型被构造为对象的树

HTML DOM 树

JS操作DOM类似对xml文件操作。

DOM标准规定HTML文档中的每个成分都是一个节点(node):

  • 文档节点(document对象):代表整个文档
  • 元素节点(element 对象):代表一个元素(标签)
  • 文本节点(text对象):代表元素(标签)中的文本
  • 属性节点(attribute对象):代表一个属性,元素(标签)才有属性
  • 注释是注释节点(comment对象) 

JavaScript 可以通过DOM创建动态的 HTML:

  • JavaScript 能够改变页面中的所有 HTML 元素
  • JavaScript 能够改变页面中的所有 HTML 属性
  • JavaScript 能够改变页面中的所有 CSS 样式
  • JavaScript 能够对页面中的所有事件做出反应

 

查找标签

直接查找

document.getElementById           根据ID获取一个标签
document.getElementsByClassName   根据class属性获取
document.getElementsByTagName     根据标签名获取标签合集

注意:

涉及到DOM操作的JS代码应该放在文档的哪个位置。

间接查找

parentElement            父节点标签元素
children                 所有子标签
firstElementChild        第一个子标签元素
lastElementChild         最后一个子标签元素
nextElementSibling       下一个兄弟标签元素
previousElementSibling   上一个兄弟标签元素

节点操作

创建节点

var divEle = document.createElement("div");

添加节点

语法:

追加一个子节点(作为最后的子节点)

somenode.appendChild(newnode);

把增加的节点放到某个节点的前边。

somenode.insertBefore(newnode,某个节点);

示例:

var imgEle=document.createElement("img");
imgEle.setAttribute("src", "http://image11.m1905.cn/uploadfile/s2010/0205/20100205083613178.jpg");
var d1Ele = document.getElementById("d1");
d1Ele.appendChild(imgEle);

删除节点:

语法:

获得要删除的元素,通过父元素调用该方法删除。

somenode.removeChild(要删除的节点)

替换节点:

语法:

somenode.replaceChild(newnode, 某个节点);

属性节点

获取文本节点的值:

var divEle = document.getElementById("d1")
divEle.innerText
divEle.innerHTML

设置文本节点的值:

var divEle = document.getElementById("d1")
divEle.innerText="1"
divEle.innerHTML="<p>2</p>"

attribute操作

var divEle = document.getElementById("d1");
divEle.setAttribute("age","18")
divEle.getAttribute("age")
divEle.removeAttribute("age")// 自带的属性还可以直接.属性名来获取和设置
imgEle.src
imgEle.src="..."

获取值操作

语法:

elementNode.value

适用于以下标签:

  • .input   
  • .select
  • .textarea 
var iEle = document.getElementById("i1");
console.log(iEle.value);
var sEle = document.getElementById("s1");
console.log(sEle.value);
var tEle = document.getElementById("t1");
console.log(tEle.value);

class的操作

className  获取所有样式类名(字符串)classList.remove(cls)  删除指定类
classList.add(cls)  添加类
classList.contains(cls)  存在返回true,否则返回false
classList.toggle(cls)  存在就删除,否则添加

指定CSS操作

obj.style.backgroundColor="red"

JS操作CSS属性的规律:

1.对于没有中横线的CSS属性一般直接使用style.属性名即可。如:

obj.style.margin
obj.style.width
obj.style.left
obj.style.position

2.对含有中横线的CSS属性,将中横线后面的第一个字母换成大写即可。如:

obj.style.marginTop
obj.style.borderLeftWidth
obj.style.zIndex

事件

HTML 4.0 的新特性之一是有能力使 HTML 事件触发浏览器中的动作(action),比如当用户点击某个 HTML 元素时启动一段 JavaScript。下面是一个属性列表,这些属性可插入 HTML 标签来定义事件动作。

常用事件

 

onclick        当用户点击某个对象时调用的事件句柄。
ondblclick     当用户双击某个对象时调用的事件句柄。onfocus        元素获得焦点。               // 练习:输入框
onblur         元素失去焦点。               应用场景:用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证.
onchange       域的内容被改变。             应用场景:通常用于表单元素,当元素内容被改变时触发.(select联动)onkeydown      某个键盘按键被按下。          应用场景: 当用户在最后一个输入框按下回车按键时,表单提交.
onkeypress     某个键盘按键被按下并松开。
onkeyup        某个键盘按键被松开。
onload         一张页面或一幅图像完成加载。
onmousedown    鼠标按钮被按下。
onmousemove    鼠标被移动。
onmouseout     鼠标从某元素移开。
onmouseover    鼠标移到某元素之上。onselect      在文本框中的文本被选中时发生。
onsubmit      确认按钮被点击,使用的对象是form。

 

 绑定方式:

方式一:

<div id="d1" onclick="changeColor(this);">点我</div>
<script>function changeColor(ths) {ths.style.backgroundColor="green";}
</script>

注意:

this是实参,表示触发事件的当前元素。

函数定义过程中的ths为形参。

方式二:

 

<div id="d2">点我</div>
<script>var divEle2 = document.getElementById("d2");divEle2.onclick=function () {this.innerText="呵呵";}
</script>

 

摘抄自:https://www.cnblogs.com/liwenzhou/p/8011504.html

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/280982.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

kotlin的suspend对比csharp的asyncawait

协程的出现大大降低了异步编程的复杂度&#xff0c;可以让我们像写同步代码一样去写异步代码&#xff0c;如果没有它&#xff0c;那么很多异步的代码都是需要靠回调函数来一层层嵌套&#xff0c;这个在我之前的一篇有介绍 rxjava回调地狱-kotlin协程来帮忙本篇文章主要介绍kotl…

file协议 控制面板_如何在Windows File Explorer导航窗格中显示控制面板和回收站

file协议 控制面板By default, the Windows File Explorer’s sidebar is divided into big categories like Quick Access, This PC, Network, and so on. But a quick setting change can make your navigation pane look a bit more like the traditional tree you’d see i…

过滤器(Filter)

1 什么是过滤器 过滤器JavaWeb三大组件之一&#xff0c;它与Servlet很相似&#xff01;不它过滤器是用来拦截请求的&#xff0c;而不是处理请求的。 当用户请求某个Servlet时&#xff0c;会先执行部署在这个请求上的Filter&#xff0c;如果Filter“放行”&#xff0c;那么会继…

发布适用于 .NET 7 的 .NET MAUI

点击上方蓝字关注我们&#xff08;本文阅读时间&#xff1a;6分钟)我们在六个月前向您介绍了 .NET 多平台应用程序 UI (MAUI)&#xff0c;现在我们很高兴地宣布 .NET MAUI 在我们的下一个主要版本 .NET 7 中普遍可用。在此短的时间范围内&#xff0c;我们在 .NET MAUI 中的主要…

03:数据结构 栈、队列、链表与数组

算法其他篇 目录&#xff1a; 1.1 数据结构中的一些概念1.2 栈&#xff08;stack&#xff09;1.3 队列1.4 链表1.5 python中字典对象实现原理1.6 数组1.1 数据结构中的一些概念 返回顶部 1、数据结构是什么 1、简单来说&#xff0c;数据结果就是设计数据以何种方式存储在计…

力登:以智能化管理提升数据中心服务能力成熟度

2017年2月28日&#xff0c;由全国信息技术标准化技术委员会信息技术服务分技术委员会指导的《信息技术服务数据中心服务能力成熟度模型》发布&#xff0c;在业界首次提出“数据中心服务能力成熟度”概念&#xff0c;使得数据中心的管理真正实现了数字化和持续优化&#xff0c;是…

基于.NET 7 的 WebTransport 实现双向通信

Web Transport 简介WebTransport 是一个新的 Web API&#xff0c;使用 HTTP/3 协议来支持双向传输。它用于 Web 客户端和 HTTP/3 服务器之间的双向通信。它支持通过 不可靠的 Datagrams API 发送数据&#xff0c;也支持可靠的 Stream API 发送数据。因为 HTTP/3 使用了基于 UDP…

Django01: 安装/基础命令/设置笔记

安装 按官网版本支持&#xff0c;现在比较适合使用1.11版本。 下载安装命令 pip3 install django1.11.9 新建项目 django-admin startproject mysite 运行项目 python manage.py runserver 127.0.0.1:8000 运行相关 目录介绍 mysite/ ├── manage.py # 管理文件 └…

线上问题随笔记录数据库连接池问题

修改方法 转载于:https://www.cnblogs.com/lvgg/p/8581506.html

数据底座_体验当今计算机的未来:通过智能底座将您的Galaxy S4变成PC

数据底座Have you ever thought that Smartphones these days are so advanced they could actually replace the PC in your everyday computing life? Today, we here at HTG will review using the Galaxy S4 with the “Smart Dock Multimedia Hub” as a PC replacement.…

如何实现 WPF 代码查看器控件

如何实现 WPF 代码查看器控件CodeViewer作者&#xff1a;WPFDevelopersOrg - 驚鏵原文链接[1]&#xff1a;https://github.com/WPFDevelopersOrg/WPFDevelopers框架使用.NET40&#xff1b;Visual Studio 2019;代码展示需要使用到AvalonEdit是基于WPF的代码显示控件&#xff0c;…

谈大数据也谈人工智能 郭为告诉你一个不一样的神州控股

毋庸置疑&#xff0c;我们深处一个数据无处不在的时代&#xff0c;也就是大数据时代。作为中国智慧城市领导者的神州数码控股有限公司&#xff08;以下简称“神州控股”&#xff09;近年来也在积极布局大数据&#xff0c;不过在神州控股董事局主席郭为看来&#xff0c;神州控股…

Django02: pycharm上配置django

1.setting导入 File-->Setting-->Project-->Project Interface 2.new project 新窗口 圖片畫錯 3.调试 点击右上角调试

dropbox_来自提示框:望远镜激光瞄准器,Dropbox桌面和Kindle剪辑转换

dropboxOnce a week we round up some great reader tips and share them with everyone; this week we’re looking at telescope laser sights, syncing your desktop with Dropbox, and converting your Kindle Clippings file. 每周一次&#xff0c;我们收集一些很棒的读者…

在 EF Core 7 中实现强类型 ID

本文主要介绍 DDD 中的强类型 ID 的概念&#xff0c;及其在 EF 7 中的实现&#xff0c;以及使用 LessCode.EFCore.StronglyTypedId 这种更简易的上手方式。背景在杨中科老师 B 站的.Net Core 视频教程[1]其中 DDD 部分讲到了强类型 ID&#xff08;Strongly-typed-id&#xff09…

如何快速打造一款高清又极速的短视频APP?

2019独角兽企业重金招聘Python工程师标准>>> 整个短视频的市场规模一直在增长&#xff0c;网络数据显示2018年已经突破100亿大关&#xff0c;在2019年预测将超过200亿。纵观行业&#xff0c;在生活资讯、美食、搞笑、游戏、美妆等领域&#xff0c;短视频流量巨大但竞…

Django03: django加入APP

使用命令在已有project创建 1.创建 在manage.py同级运行命令 python manage.py startapp app01 2.django中加入app 在settings.py里的INSTALLED_APPS加入app01.apps.App01Config, INSTALLED_APPS [django.contrib.admin,django.contrib.auth,django.contrib.contenttype…

如何将Windows 10帐户还原为本地帐户(在Windows Store劫持它之后)

If your Windows 10 user account is currently a Microsoft account (by your choice or because you got, one way or another, roped into it) it’s easy to revert it back to a local account if you know where to look. Read on as we show you how. 如果您的Windows 1…

【译】Dapr 是一个“10倍好”平台 !?

译者注在正式阅读本文之前&#xff0c;我们有必要先了解下什么是“10 倍好”。10 倍好理论最早出自彼得蒂尔的《从 0 到 1》&#xff0c;他说一个新创企业&#xff0c;要想获得快速成长&#xff0c;其提供的解决方案要比现有方案好 10 倍以上&#xff0c;这个好 10 倍&#xff…

1. ReactJS基础(开发环境搭建)

本文主要介绍通过React官方提供的create-react-app脚手架进行开发环境的搭建。 1.安装node环境(安装过程这里不做介绍&#xff0c;可参考其他博文) 在cmd中输入node -v 如果可以看到相应版本号&#xff0c;说明node环境安装成功 2.npm全局安装create-react-app脚手架 3.cmd命令…