DOM(innerHTML和className)
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <meta http-equiv="X-UA-Compatible" content="ie=edge">
- <title>DOM(innerHTML和className)</title>
- <style>
- .h{color: red};
- .h3{color: blue};
- </style>
- <!--
- n.innerHTML;获取元素n开始标签-结束标签之间的所有内容
- n.innerHTML="a";将元素n开始标签-结束标签之间的所有内容变成"a"
- n.className;获取元素n的类名
- n.className="b";将元素n的类名改成"b"
- -->
- </head>
- <body>
- <h3 class="h">前端书籍</h3>
- <ul id="listWeb">
- <li><b>html基础</b></li>
- <li>CSS基础</li>
- <li>JavaScript基础</li>
- <li>Jquery框架</li>
- <li>bootStrap框架</li>
- </ul>
- <h3>JAVA书籍</h3>
- <ul id="listJava">
- <li>JAVA语言基础</li>
- <li>三大框架</li>
- <li>JAVA深入浅出</li>
- </ul>
- <script>
- var a=document.getElementById("listWeb").getElementsByTagName("li");
- console.log(a[0].innerHTML);//<b>html基础</b>
- console.log(a[0].innerHTML="我重新给这个元素的内容赋值了.");//我重新给这个元素的内容赋值了;即改变了原有内容
- console.log(a[0].innerHTML+="我又在原来的内容理增加了这些");//我重新给这个元素的内容赋值了.我又在原来的内容理增加了这些
- var b=document.getElementsByClassName("h");
- console.log(b[0].className);//h;字体颜色为红色
- console.log(b[0].className="h3");//h3;重新给该元素类名赋值,即改变原有的类名//字体颜色变成了蓝色
- </script>
- </body>
- </html>
DOM(innerHTML和className)的更多相关文章
- HTML DOM innerHTML 属性及实现图片连续播放
定义和用法 innerHTML 属性设置或返回表格行的开始和结束标签之间的 HTML. 语法 tablerowObject.innerHTML=HTML 实例 下面的例子返回了表格行的 inner H ...
- DOJO DOM 功能
In this tutorial, you'll learn about how to use Dojo to manipulate the DOM in a simple, cross-browse ...
- JavaScript Dom基础
一.DOM查找 1.document.getElementById("id") -功能:返回对拥有指定ID的第一个对象的引用 -返回值:DOM对象 -说明:id为DOM元素上id属 ...
- 上层建筑——DOM元素的特性与属性(dojo/dom-prop)
上一篇讲解dojo/dom-attr的文章中我们知道在某些情况下,attr模块中会交给prop模块来处理.比如: textContent.innerHTML.className.htmlFor.val ...
- 上层建筑——DOM元素的特性与属性(dojo/dom-attr)
上一篇返本求源中,我们从DOM基础的角度出发,总结了特性与属性的关系.本文中,我们来看看dojo框架是如何处理特性与属性的.dojo框架中特性的处理位于dojo/dom-attr模块属性的处理为与do ...
- dojo/dom dojo/domConstruct dojo/query
dom.byId require(["dojo/dom", "dojo/domReady!"], function(dom) { var one = dom.b ...
- dojo 七 DOM dojo/dom
官方教程:Dojo DOM Functions对dom的使用,需要引用包dojo/dom.1.获取节点,dom.byIdbyId中既可以传递一个字符串,也可以传递一个节点对象 require([&qu ...
- dom元素和方法总结
主要是参考<精通javascript>. 全局变量有: document.这个变量包含浏览器的html dom文档的引用. HTMElement 这个变量是所要html dom 元素的超类 ...
- DOM树节点和事件
一.前言:DOM树节点是JS的基础语句.通过节点,能够取到HTML代码中的任意标签,从而对其进行修改和添加各种视觉效果. 二.DOM树节点 DOM节点分为三大类: 元素节点,属性节点,文本节点 ...
随机推荐
- P5200 [USACO19JAN]Sleepy Cow Sorting
P5200 [USACO19JAN]Sleepy Cow Sorting 题目描述 Farmer John正在尝试将他的N头奶牛(1≤N≤10^5),方便起见编号为1…N,在她们前往牧草地吃早餐之前排 ...
- 计算机网络自顶向下方法第4章 网络层:数据平面 (Network layer)
4.1 网络层概述 网络层主要功能为转发(将数据从路由器输入接口转移到合适的输出接口)和路由选择(端到端的路径选择),每台路由器都有一张转发表,用最长前缀匹配规则来转发. 4.1.1 转发和路由选择 ...
- websocket 协议简述
WebSocket 是一种网络通信协议,RFC 6455 定义了它的通信标准,属于服务器推送技术的一种 由于 HTTP 无状态.无连接.单向通信的特性,导致 HTTP 协议无法实现服务器主动向客户端发 ...
- shell 学习笔记8-case条件语句
一.case语句简介 1.什么是case条件语句 case条件语句就相当于多分支的if/elif/else条件语句,但是比这样的语句更规范更好看,经常被用在失效系统服务启动脚本等企业应用中 程序将ca ...
- javascript 之 扩展对象 Object.assing
语法:Object.assign(target,...source) 说明:Object.assign方法的第一个参数是目标对象,后面的参数都是源对象 一.以对象为参数的合并 1.第一个参数都是对象, ...
- javascript -- 把按钮变成读秒倒计时
$('#btn').click(function(){ //设置按钮倒计时 $(this).addClass('disabled'); //把按钮变灰 $(this).attr('disabled', ...
- robot framework 的关键字Continue For Loop 用法
Continue For Loop关键字就是python的continue的意思,跳出本层循环,继续执行下一个循环. 我先举个栗子: :FOR ${index} IN RANGE 5 ...
- mac os安装mtr
MTR是Linux平台上一款非常好用的网络诊断工具,集成了traceroute.ping.nslookup的功能,用于诊断网络状态非常有用 现使用的方法是下载pkg包手动安装 mtr的pkg下载地址 ...
- How to change SAPABAP1 schema password In HANA
Symptom How to change SAPABAP1 schema password Environment HANA 1.x HANA 2.x Resolution Shutdown the ...
- Pycharm和Android工具之github使用
请查看以下链接https://blog.csdn.net/m0_37306360/article/details/79322947 基本操作步骤 打开setting->version contr ...