<!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. QT release版QAudioDeviceInfo获取不到音频设备，而debug版可以获取到

    新添加了两个模块:QCharts和Multimedia 但自己没有重新打包更新里面的库文件什么的... 坑爹... 害我找了这么久... 解决办法: 方法一: 将Qt安装目录下的plugins文件夹中 ...

  2. PAT甲级题分类汇编——图

    本文为PAT甲级分类汇编系列文章. 图,就是层序遍历和Dijkstra这一套,#include<queue> 是必须的. 题号 标题 分数 大意 时间 1072 Gas Station 3 ...

  3. SQLSERVER查询存储过程内容

    --使用语句查看一个存储过程的定义 EXEC sp_helptext 'Auth_BankCardAuthorize' --查询所有存储过程的名称以及定义 SELECT name, definitio ...

  4. Golang高阶：Golang1.5到Golang1.12包管理

    Golang1.5到Golang1.12包管理 1. 前言 Golang 是一门到如今有十年的静态高级语言了,2009年的时候算是正式推出了,然后到最近的一两年,2017-2018年的时候,突然直线上 ...

  5. docker安装及基本使用

    docker分为docker CE 和docker EE,CE即免费社区版,EE即企业付费版.下面基于centos7安装docker CE,其它linux版本可以参考官方文档https://docs. ...

  6. 在论坛中出现的比较难的sql问题：13(循环替换问题 过滤各种标点符号)

    原文:在论坛中出现的比较难的sql问题:13(循环替换问题 过滤各种标点符号) 所以,觉得有必要记录下来,这样以后再次碰到这类问题,也能从中获取解答的思路. 去掉一个字段中的标点符号的SQL语句怎么写 ...

  7. 【css】文本效果

    一.字体属性 在css字体样式中常见的字体属性有以下几种 p{ font-size: 50px; /*字体大小*/ line-height: 30px; /*行高*/ font-family: 幼圆, ...

  8. 骨骼蒙皮动画(SkinnedMesh)

    骨骼蒙皮动画也就是SkinnedMesh,应该是目前用的最多的3D模型动画了.因为他可以解决关节动画的裂缝问题,而且原理简单,效果出色,所以今天详细的谈一下骨骼蒙皮动画的相关知识. 关节动画中使用的是 ...

  9. Ajax调用WebService接口样例

    在做手机端h5的应用时,通过Ajax调用http接口时没啥问题的:但有些老的接口是用WebService实现的,也来不及改成http的方式,这时通过Ajax调用会有些麻烦,在此记录具体实现过程.本文使 ...

  10. 什么是Familywise Error Rate

    1.什么是Familywise Error Rate(FWE or FWER) 定义:在一系列假设检验中,至少得出一次错误结论的概率. 换句话说,是造成至少一次Type I Error的概率.术语FW ...