1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>DOM(innerHTML和className)</title>
  8.     <style>
  9.         .h{color: red};
  10.         .h3{color: blue};
  11.     </style>
  12.     <!--
  13.         n.innerHTML;获取元素n开始标签-结束标签之间的所有内容
  14.                     n.innerHTML="a";将元素n开始标签-结束标签之间的所有内容变成"a"
  15.         n.className;获取元素n的类名
  16.                     n.className="b";将元素n的类名改成"b"
  17.      -->
  18. </head>
  19. <body>
  20.     <h3 class="h">前端书籍</h3>
  21.     <ul id="listWeb">
  22.         <li><b>html基础</b></li>
  23.         <li>CSS基础</li>
  24.         <li>JavaScript基础</li>
  25.         <li>Jquery框架</li>
  26.         <li>bootStrap框架</li>
  27.     </ul>
  28.     <h3>JAVA书籍</h3>
  29.     <ul id="listJava">
  30.         <li>JAVA语言基础</li>
  31.         <li>三大框架</li>
  32.         <li>JAVA深入浅出</li>
  33.     </ul>
  34. <script>
  35.     var a=document.getElementById("listWeb").getElementsByTagName("li");
  36.     console.log(a[0].innerHTML);//<b>html基础</b>
  37.     console.log(a[0].innerHTML="我重新给这个元素的内容赋值了.");//我重新给这个元素的内容赋值了;即改变了原有内容
  38.     console.log(a[0].innerHTML+="我又在原来的内容理增加了这些");//我重新给这个元素的内容赋值了.我又在原来的内容理增加了这些
  39.     var b=document.getElementsByClassName("h");
  40.     console.log(b[0].className);//h;字体颜色为红色
  41.     console.log(b[0].className="h3");//h3;重新给该元素类名赋值，即改变原有的类名//字体颜色变成了蓝色
  42. </script>
  43. </body>
  44. </html>

DOM(innerHTML和className)的更多相关文章

  1. HTML DOM innerHTML 属性及实现图片连续播放

    定义和用法 innerHTML 属性设置或返回表格行的开始和结束标签之间的 HTML. 语法 tablerowObject.innerHTML=HTML 实例 下面的例子返回了表格行的 inner H ...

  2. DOJO DOM 功能

    In this tutorial, you'll learn about how to use Dojo to manipulate the DOM in a simple, cross-browse ...

  3. JavaScript Dom基础

    一.DOM查找 1.document.getElementById("id") -功能:返回对拥有指定ID的第一个对象的引用 -返回值:DOM对象 -说明:id为DOM元素上id属 ...

  4. 上层建筑——DOM元素的特性与属性（dojo/dom-prop）

    上一篇讲解dojo/dom-attr的文章中我们知道在某些情况下,attr模块中会交给prop模块来处理.比如: textContent.innerHTML.className.htmlFor.val ...

  5. 上层建筑——DOM元素的特性与属性（dojo/dom-attr）

    上一篇返本求源中,我们从DOM基础的角度出发,总结了特性与属性的关系.本文中,我们来看看dojo框架是如何处理特性与属性的.dojo框架中特性的处理位于dojo/dom-attr模块属性的处理为与do ...

  6. dojo/dom dojo/domConstruct dojo/query

    dom.byId require(["dojo/dom", "dojo/domReady!"], function(dom) { var one = dom.b ...

  7. dojo 七 DOM dojo/dom

    官方教程:Dojo DOM Functions对dom的使用,需要引用包dojo/dom.1.获取节点,dom.byIdbyId中既可以传递一个字符串,也可以传递一个节点对象 require([&qu ...

  8. dom元素和方法总结

    主要是参考<精通javascript>. 全局变量有: document.这个变量包含浏览器的html dom文档的引用. HTMElement 这个变量是所要html dom 元素的超类 ...

  9. DOM树节点和事件

    一.前言:DOM树节点是JS的基础语句.通过节点,能够取到HTML代码中的任意标签,从而对其进行修改和添加各种视觉效果. 二.DOM树节点    DOM节点分为三大类: 元素节点,属性节点,文本节点  ...

随机推荐

  1. P5200 [USACO19JAN]Sleepy Cow Sorting

    P5200 [USACO19JAN]Sleepy Cow Sorting 题目描述 Farmer John正在尝试将他的N头奶牛(1≤N≤10^5),方便起见编号为1…N,在她们前往牧草地吃早餐之前排 ...

  2. 计算机网络自顶向下方法第4章 网络层:数据平面 (Network layer)

    4.1 网络层概述  网络层主要功能为转发(将数据从路由器输入接口转移到合适的输出接口)和路由选择(端到端的路径选择),每台路由器都有一张转发表,用最长前缀匹配规则来转发. 4.1.1 转发和路由选择 ...

  3. websocket 协议简述

    WebSocket 是一种网络通信协议,RFC 6455 定义了它的通信标准,属于服务器推送技术的一种 由于 HTTP 无状态.无连接.单向通信的特性,导致 HTTP 协议无法实现服务器主动向客户端发 ...

  4. shell 学习笔记8-case条件语句

    一.case语句简介 1.什么是case条件语句 case条件语句就相当于多分支的if/elif/else条件语句,但是比这样的语句更规范更好看,经常被用在失效系统服务启动脚本等企业应用中 程序将ca ...

  5. javascript 之 扩展对象 Object.assing

    语法:Object.assign(target,...source) 说明:Object.assign方法的第一个参数是目标对象,后面的参数都是源对象 一.以对象为参数的合并 1.第一个参数都是对象, ...

  6. javascript -- 把按钮变成读秒倒计时

    $('#btn').click(function(){ //设置按钮倒计时 $(this).addClass('disabled'); //把按钮变灰 $(this).attr('disabled', ...

  7. robot framework 的关键字Continue For Loop 用法

    Continue For Loop关键字就是python的continue的意思,跳出本层循环,继续执行下一个循环. 我先举个栗子: :FOR    ${index}    IN RANGE    5 ...

  8. mac os安装mtr

    MTR是Linux平台上一款非常好用的网络诊断工具,集成了traceroute.ping.nslookup的功能,用于诊断网络状态非常有用 现使用的方法是下载pkg包手动安装 mtr的pkg下载地址 ...

  9. 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 ...

  10. Pycharm和Android工具之github使用

    请查看以下链接https://blog.csdn.net/m0_37306360/article/details/79322947 基本操作步骤 打开setting->version contr ...