js学习：DOM操作（认识DOM、通过ID获取元素、innerHTML 属性、改变 HTML 样式、显示和隐藏（display属性）、控制类名（className 属性））

最新推荐文章于 2024-06-06 11:59:30 发布
最新推荐文章于 2024-06-06 11:59:30 发布
阅读量5.6k 收藏 5
点赞数 2
分类专栏： 前端

一、认识DOM

<a href="http://www.imooc.com">JavaScript DOM</a>

二、通过ID获取元素

语法:

 document.getElementById(“id”)

 实例：

<a id="con">JavaScript</a>
<script type="text/javascript">
  var mychar= document.getElementById("con");
  document.write("结果:"+mychar); //输出获取的P标签。 
</script>

输出结果：

 

三、innerHTML 属性

语法:

Object.innerHTML——获取文本

 实例：

<body>
<h2 id="con">javascript</H2>
<p> JavaScript是一种基于对象、事件驱动的简单脚本语言，嵌入在HTML文档中，由浏览器负责解释和执行，在网页上产生动态的显示效果并实现与用户交互功能。</p>
<script type="text/javascript">
  var mychar= document.getElementById("con");
  document.write("原标题:"+mychar.innerHTML+"<br>"); //输出原h2标签内容
  mychar.innerHTML="Hello world!";
  document.write("修改后的标题:"+mychar.innerHTML); //输出修改后h2标签内容
</script>
</body>

输出结果：

四、改变 HTML 样式

语法:

Object.style.property=new style;

 实例：

<body>
  <h2 id="con">I love JavaScript</H2>
  <p> JavaScript使网页显示动态效果并实现与用户交互功能。</p>
  <script type="text/javascript">
    var mychar= document.getElementById("con");
    mychar.style.color="red";
    mychar.style.backgroundColor="#CCC";
    mychar.style.width="300px;"
  </script>
</body>

输出结果：

五、显示和隐藏（display属性）

语法：

Object.style.display = value

value取值:

 实例：

<script type="text/javascript"> 
        function hidetext()  
        { var mychar = document.getElementById("con").style.display="none";}  
        function showtext()  
        {  var mychar = document.getElementById("con").style.display="block"; }
    </script> 
</head> 
<body>  
    <h1>JavaScript</h1>  
    <p id="con">做为一个Web开发师来说，如果你想提供漂亮的网页、令用户满意的上网体验，JavaScript是必不可少的工具。</p> 
    <form>
       <input type="button" οnclick="hidetext()" value="隐藏内容" /> 
       <input type="button" οnclick="showtext()" value="显示内容" /> 
    </form>
</body> 
</html>

输出结果：

 

六、控制类名（className 属性）

语法：

object.className = classname

实例：

<style>
    body{ font-size:16px;}
    .one{
        border:1px solid #eee;
        width:230px;
        height:50px;
        background:#ccc;
        color:red;
    }
    .two{
        border:1px solid #ccc;
        width:230px;
        height:50px;
        background:#9CF;
        color:blue;
    }
    </style>
</head>
<body>
    <p id="p1" > JavaScript使网页显示动态效果并实现与用户交互功能。</p>
    <input type="button" value="添加样式" οnclick="add()"/>
    <p id="p2" class="one">JavaScript使网页显示动态效果并实现与用户交互功能。</p>
    <input type="button" value="更改外观" οnclick="modify()"/>

    <script type="text/javascript">
       function add(){
          var p1 = document.getElementById("p1");
          p1.className="one";
       }
       function modify(){
          var p2 = document.getElementById("p2");
          p2.className="two";
       }
    </script>
</body>

 

 

sushuyan
关注
  • 2
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript--DOM--HTML 的 innerHTML 属性
norang的博客
06-06 480
7.1.2 innerHTML 属性 现如今的浏览器几乎都支持属性innerHTML ，这个属性并不是W3C DOM标准的组成部分，但现已经包含到HTML5规范中。它始见于微软 公司的IE 4浏览器，并从那时起逐渐被其他的浏览器接受。 innerHTML 属性可以用来读、写某给定元素里的HTML内容。要了解它 如何工作，请把下面这段代码插入test.html 文档的 部分： 用DOM 的眼睛看testdiv 内的标记，是如图7-2所示的结构。 div 元素的id 是testdiv 。它包含一个元素节点（
JS-通过ID获取元素/innerHTML 属性/改变 HTML 样式/显示和隐藏（display属性）/控制类名（className 属性）...
Jennyni1122的博客
06-14 1万+
通过ID获取元素 学过HTML/CSS样式，都知道，网页由标签将信息组织起来，而标签的id属性值是唯一的，就像是每人有一个身份证号一样，只要通过身份证号就可以找到相对应的人。那么在网页中，我们通过id先找到标签，然后进行操作。 语法： document.getElementById(“id”) 看看下面代码: image.png 结果:nu...
HTML class属性详解
最新发布
2302_79483741的博客
06-06 620
HTML的class属性是一个非常强大且常用的工具，它允许你为HTML元素分配一个或多个类名。这些类名随后可以在CSS（层叠样式表）中被用作选择器，以应用样式规则到具有指定类名的所有元素上。同时，class属性也常用于JavaScript中，以便通过类名来查找、操作或修改元素。
07 JS-DOM之-innerHTML、innerText、textContent
路遇惊喜
11-29 687
value属性 innerHTML(可以识别标签) innerText <body> <input type="text" value="我是input的内容"/> <div id="box1"> <ul> <li>我用于测试innerHTML</li> </ul> </div> <div id="box2"> <ul>
[js高手之路]HTML标签解释成DOM节点
weixin_33963189的博客
08-30 72
最近在封装一个开源框架，已经写了500行， 已经具备jquery的大多数常用功能，后面还会扩展大量的工具函数和MVVM双向驱动等功能。跟jquery的使用方法完全一样，jquery的选择器，几乎都能支持，为什么说这事，跟这篇文章的主题有毛关系呢？因为这篇文章要讲的就是我在写框架过程中碰到的一个问题，封装jquery的after方法，支持DOM和html标签两种用法，html标签传参，我要把html...
JavaScript中DOM-innerHTML详解
qq_42526440的博客
09-18 1572
innerHTML在JS是双向功能：获取对象的内容 或 向对象插入内容； 如：这是内容 我们可以通过 document.getElementById(“ABC”).innerHTML 来获取id为aa的对象的内嵌内容； 也可以对某对象插入内容，如 document.getElementById(“ABC”).innerHTML=’这是被插入的内容’; 这样就能向id为abc的对象插入内容。 实例：...
DOM操作一些常用的属性汇总
12-09
DOM还提供了其他一些关键属性，如`textContent`用于获取或设置元素的纯文本内容，`style`属性还可以用来获取和设置元素的所有CSS属性，而`appendChild()`、`removeChild()`、`insertBefore()`等方法则用于操作元素...
用JavaScript获取DOM元素位置和尺寸大小的方法
10-27
本文将深入探讨如何利用JavaScript获取DOM元素的位置和尺寸，并解释相关属性。 首先，我们要了解几个关键的属性： 1. `offsetWidth` 和 `offsetHeight`：这两个属性返回元素的完整外尺寸，包括内容、内边距和边框...
vue操作dom元素的3种方法示例
10-14
一旦获取到元素，就可以使用JavaScript的各种DOM API进行修改，如`element.style.property`来改变样式，或`element.innerHTML`来改变元素内容。以下是一个简单的例子： ```javascript const domElement = ...
DOM(innerHTML和className)
qq_43614064的博客
04-23 196
innerHTML 实例： <ul id="list1"> <li>1</li> <li>2</li> <li>3</li> </ul> <script> // 设置id为list1的元素的字体颜色 var box=document.getElem...
JS DOM操作无法获取display属性问题（获取非行内样式问题及解决办法）
qq_38981275的博客
06-09 2919
先把代码贴出来吧： 下面是初始化效果：
Dom——显示隐藏
zx2014567296的博客
06-11 1022
显示隐藏 知识点 操作元素 （一）、改变元素内容 element.innerText：修改从起始位置到终点位置的内容，但去除html标签 element.innerHTML：修改从起始位置到终点位置的全部内容，包括html标签 ※不同点： innerText不识别html标签，innerHTML识别html标签，推荐使用后者 innerText去除空格和换行，innerHTML保留空格和换行 （二）、改变元素属性 如：img.src （三）、表单元素的属性操作 获取元素 注册事件、处理程序。 ①
控制dom元素隐藏和显示的几种做法
热门推荐
boss2967的博客
02-27 1万+
控制dom元素隐藏和显示的几种做法1.style属性的display 被隐藏的控件不再占用显示时占用的位置this.getElementByXid(‘domXid’).style.display=”none”;this.getElementByXid(‘domXid’).style.display=”block”;2.“visibility”隐藏的控件仅仅是将控件设置成不可见了，控件仍然占俱原来的...
【学习笔记41】DOM操作的练习
yizhiyang
11-27 666
DOM操作的练习
前端基础知识之JS DOM
qq_48617322的博客
08-02 279
文章目录
JS DOM innerHTML和innerText
大河之犬的博客
10-06 1015
属性很方便地获取和设置一个元素的“内部元素”，也可以使用。在JavaScript中，我们可以使用。属性获取和设置一个元素的“内部文本”获取的是元素内部所有的内容，而。获取的仅仅是文本内容。
CSS属性、样式和事件
zhouandyuan的博客
06-28 933
事件是发生在HTML元素上的一些事情。
深入display:none与visibility:hidden
weixin_50736511的博客
03-20 3430
display:none 我们都清楚当元素设置display:none后，界面上将不会显示该元素，并且该元素不占布局空间，但我们仍然可以通过JavaScript操作该元素（本质上dom是存在的这里跟v-if不一样） 2.display:none具有继承性 3.无法响应任何事件，无论是捕获、命中目标和冒泡阶段均不可以 由于display:none的元素根本不会在界面上渲染，就是连1个像素的都不占，因此自然无法通过鼠标点击命中，而元素也无法获取焦点，那么也不能成为键盘事件的命中目标；而父元素的display为
chrome插件的popup.html怎么操作页面dom元素
07-28
2. 在popup.js文件中，可以使用document.getElementById()等DOM操作方法来获取需要操作的DOM元素。例如，如果要获取页面上的一个按钮元素，可以使用以下代码： ```javascript var button = document.getElementById...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值