<!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)的更多相关文章

  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. EFCore中的导航属性

    使用了这么久的EntityFrameworkCore框架,今天想来就其中的一个部分来做一个知识的梳理,从而使自己对于整个知识有一个更加深入的理解,如果你对EFCore中的实体关系不熟悉你需要有一个知识 ...

  2. sqlserver 查看表死锁

    1.SELECT request_session_id spid,OBJECT_NAME(resource_associated_entity_id) tableName FROM sys.dm_tr ...

  3. jmeter中生成UUID作为唯一标识符

    在测试过程中,我们有时候需要一个唯一不重复的值(比如order_id).我之前一直用的时间戳+计数器/随机函数拼接,但是有时候效果不太好,今天知道了UUID这玩意,可以来操作下.jmeter也提供了U ...

  4. CSS3Ps -Photoshop图层特效转CSS3代码

    CSS3Ps 这个ps插件可以将ps图层特效直接转化成css3代码,对前端非常有益. 插件下载:http://css3ps.com/Download/

  5. DBShop后台RCE之曲线救国

    本文最早发布在朋友的公众号 黑客信徒 中,文章是自己写的 不存在抄袭  特此申明 --------------------- 前言 DBShop是一款基于ZendFramework2框架的电子商务系统 ...

  6. bootstrap 模态窗口 多重/多个弹窗滚动条补丁

    由于bootstrap的模态窗口默认不支持多次弹出, 在关闭的时候会有滚动条消失的问题. 经过观察和查看源码, 发现在开启和关闭的时候会在body上增加/减少一个"modal-open&qu ...

  7. Linux挂载Windows文件夹

    # sudo mount -t \ -o user=username \ //Windows用户名 -o uid=myname \ //Linux用户名 -o gid=users \ -o defau ...

  8. Xcode11.1 踩坑备忘录

    Xcode11.1 踩坑备忘录(mac系统10.15) 1 .环信ChatDemo2.0报错 这是环信ChatDemo2.0报错 NSInteger numberOfBeforeSection = [ ...

  9. ResourceManager学习之ApplicationMaster,NodeManager管理

    ApplicationMaster管理部分主要由三个服务构成,分别是ApplicationMasterLauncher.AMLivelinessMonitor和ApplicationMasterSer ...

  10. URLErro和HTTPError

    url error URLError 产生的原因主要有: 没有网络连接 服务器连接失败 找不到指定的服务器 我们可以用try except语句来捕获相应的异常 from urllib import r ...