JavaScript操作DOM元素

一、DOM:
Document Object Model(文档对象模型)
二、DOM的分类:
1.DOM Core(核心)
2.HTML-DOM
3.CSS-DOM
三、节点属性:
1.lastElementChild:最后一个节点
2.firstElementChild:第一个节点
3.nextElementSibling:下一个节点
4.previousElementSibling:上一个节点
四、节点信息:
1.nodeName:节点名称
2.nodeType:节点类型
3.nodeValue:节点值
五、注意事项:nodeName属性包含某个节点的名称,元素节点的nodeName是标签名称,属性节点的nodeName是属性名称,文本节点的nodeName永远是#text,文档节点的nodeName永远是#document
六、nodeValue是节点值,文本,包含文本。属性,包含属性值。
七、nodeType对应的值:
元素:1
属性:2
文本:3
注释:8
文档:9
八、操作节点的属性:
1.获取节点的属性:
getAttribute(“属性名”)
eg:获取img的图片路径:
doucument.getElementsByTagName(“img”)[0].getAttribute(“src”);
2.设置节点值:
setAttribute(“属性名”,“值”);
eg:改变图片:
doucument.getElementsByTagName(“img”)[0].setAttribute(“src”,“img/1.jpg”);
九、创建和插入节点:
1.createElement():创建节点
2.appendChild():在某个节点的后面追加新的节点。
eg:创建一个按钮追加到main里面
var main = document.getElementById(“main”);
var inp = document.createElement(“input”);
inp.setAttribute(“type”,“button”);
main.appendChild(inp);
十、删除节点:
removeChild():删除指定节点,eg:删除main里面的最后一个节点。
var main = document.getElementById(“main”).lastElementChild;
document.getElementById(“main”).removeChild(main);
十一、style属性:
语法:HTML元素.style.样式属性 = 值。
eg:设置main里面的字体颜色
document.getElementById(“main”).style.color = “red”;
十二、className:
给元素添加class样式
语法:元素.className = “样式名”;

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

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

相关文章

hibernate的lazy的使用

引用:https://blog.csdn.net/Vincent_yuan1991/article/details/53482487 一: lazy,延迟加载 Lazy的有效期:只有在session打开的时候才有效;session关闭后lazy就没效了。 lazy策略可以用在: 标签上&#x…

React中路由组件与一般组件

四、路由组件与一般组件 1.写法不同&#xff1a;一般组件&#xff1a;<Demo/>路由组件&#xff1a;<Route path"/demo" component{Demo}/>2.存放位置不同&#xff1a;一般组件&#xff1a;components路由组件&#xff1a;pages3.接收到的props不同&#…

第六期.Net开源社群联合分享--除了情结和价格,Azure最适合什么场景?等你来讲趟坑的实战经验!

嘿嘿&#xff0c;大家好啊&#xff01;好荣幸啊这一期&#xff0c;能够咱们.NET开源社区一块来做这次线上分享会。 我就是各位小伙伴可爱而且博学而且低调而且人见人爱花见花开而且谦虚但是经常口不择言的主持人老板娘Grace。 这次有新朋友&#xff0c;有老朋友&#xff0c;有…

jQuery选择器整理

第六章jQuery选择器一、jQuery选择器的分类&#xff1a; 1.基本选择器 2.层次选择器 3.属性选择器 4.基本过滤选择器 5.可见性过滤选择器 二、jQuery的基本选择器&#xff1a; ///基本选择器 //id选择器 //$("#div1").css(“background”,“red”); //class选择器 /…

遍历HashMap的四种方法

在Map集合中 values():方法是获取集合中的所有的值----没有键&#xff0c;没有对应关系&#xff0c; KeySet(): 将Map中所有的键存入到set集合中。因为set具备迭代器。所有可以迭代方式取出所有的键&#xff0c;再根据get方法。获取每一个键对应的值。 keySet():迭代后只能通…

支付系统的防重设计

转载自 支付系统的防重设计 导读 “目前在互联网应用的大部分支付场景中&#xff0c;对接支付宝、微信移动支付产品这样需要用户参与支付流程的支付方式已经变得非常普遍&#xff0c;类似的还有PC端银行网银支付&#xff1b;而通过绑定用户银行卡、对接银行卡快捷支付通道直接…

React中antd的按需引入+自定主题

antd的按需引入自定主题 1.安装依赖&#xff1a;yarn add react-app-rewired customize-cra babel-plugin-import less less-loader2.修改package.json...."scripts": {"start": "react-app-rewired start","build": "react-app-…

Windows Server Containers 支持 Windows 开发者使用 Docker

在过去几年里&#xff0c;Docker 和容器已成为全球开发界和企业最热门的话题之一。去年秋天发布的 Windows Server 2016 支持 Windows 开发者使用容器&#xff0c;使得这一热门话题再次升温。Windows 和 Docker 是如何走到一起的&#xff1f; 一切始于 2014 年隆重举办的普吉特…

漫画:什么是二叉堆?(修正版)

转载自 漫画&#xff1a;什么是二叉堆&#xff1f;&#xff08;修正版&#xff09; 什么是二叉堆&#xff1f; 二叉堆本质上是一种完全二叉树&#xff0c;它分为两个类型&#xff1a; 1.最大堆 2.最小堆 什么是最大堆呢&#xff1f;最大堆任何一个父节点的值&#xff0c;都…

React路由组件传递参数

向路由组件传递参数 1.params参数路由链接(携带参数)&#xff1a;<Link to/demo/test/tom/18}>详情</Link>注册路由(声明接收)&#xff1a;<Route path"/demo/test/:name/:age" component{Test}/>接收参数&#xff1a;this.props.match.params2.se…

jQuery选择器案例之——index.js

$(function(){//alert(a);///基本选择器//id选择器//$("#div1").css("background","red");//class选择器//$(".p1").css("color","red");//标签选择器//$("p").css("color","red")…

漫画:什么是堆排序

转载自 漫画&#xff1a;什么是堆排序 在上一篇漫画中&#xff0c;小灰介绍了 二叉堆 这样一种强大的数据结构&#xff1a; 漫画&#xff1a;什么是二叉堆&#xff1f;&#xff08;修正版&#xff09; 那么&#xff0c;这个二叉堆怎样来使用呢&#xff1f;我们这一期将会详…

监控——《微服务设计》读书笔记

在单块应用的世界里&#xff0c;当我们遇到问题时&#xff0c;我们至少清楚从哪里开始调查。网站访问速度&#xff1f;网站访问异常&#xff1f;CPU占用过高&#xff1f;这些都是单块应用程序的问题&#xff0c;单一的故障点会极大地简化对问题的排查。 而现在我们面对了多个微…

React中的模糊匹配与精准匹配

路由的严格匹配与模糊匹配 1.默认使用的是模糊匹配&#xff08;简单记&#xff1a;【输入的路径】必须包含要【匹配的路径】&#xff0c;且顺序要一致&#xff09;2.开启严格匹配&#xff1a;<Route exact{true} path"/about" component{About}/>3.严格匹配不要…

jQuery中的事件与动画

一、jQuery中的事件&#xff1a; 1.基础事件 &#xff08;1&#xff09;鼠标事件 &#xff08;2&#xff09;键盘事件 &#xff08;3&#xff09;window事件 2.复合事件 &#xff08;1&#xff09;鼠标光标悬停 &#xff08;2&#xff09;鼠标连续点击 二、鼠标事件&#xff1a…

什么是 TCC分布式事务

转载自 什么是 TCC分布式事务 近两年微服务变得越来越火热&#xff0c;各种框架与组件的出现&#xff0c;更是为微服务的开发提供了便利。 我们都知道&#xff0c;每个微服务都是一个对应的小服务&#xff0c;多个服务之间可以方便的进行功能的组合&#xff0c;来形成功能更…

.NET跨平台实践:再谈用C#开发Linux守护进程 — 完整篇

Linux守护进程是Linux的后台服务进程&#xff0c;相当于Windows服务&#xff0c;对于为Linux开发服务程序的朋友来说&#xff0c;Linux守护进程相关技术是必不可少的&#xff0c;因为这个技术不仅仅是为了开发守护进程&#xff0c;还可以拓展到多进程&#xff0c;父子进程文件描…

React中解决样式丢失问题

解决多级路径刷新页面样式丢失的问题 1.public/index.html 中 引入样式时不写 ./ 写 / &#xff08;常用&#xff09;2.public/index.html 中 引入样式时不写 ./ 写 %PUBLIC_URL% &#xff08;常用&#xff09;3.使用HashRouter

使用jQuery操作DOM元素

一、DOM分类&#xff1a; 1.DOM core 2.Html-DOM 3.CSS-DOM 二、css样式 $(this).css(“font-size”,“25px”); $(this).css({“font-size”:“30px”,“color”:“white”}); $("#div3").addClass(“div3_style”); //移除样式 $("#div3").removeClass(…

静态代理

1、接口 package AOP.proxy;/*** Created by Administrator on 2019/6/11.*/ public interface PersonDao {public void savePerson(); }2、目标实现类 package AOP.proxy;/*** Created by Administrator on 2019/6/11.*/ public class PersonDaoImpl implements PersonDao {…