javascript如何操作页面元素

深碍√TFBOYSˉ_ 2023-10-03 22:17 6阅读 0赞

要操作页面元素首先要获取页面内元素，获取到元素后，我们就可以对元素进行各种各样的操作，例如改变元素的文字，修改元素的内置属性等等。

#### （1）改变元素内容 ####

element.innerText

从起始位置到终止位置的内容，但它可以去除html标签，同时空格和黄行也会去掉

element.innerHTML

起始位置到终止位置的全部内容，包括html标签，同时抱球空格和换行

#### （2）innerText和innerHTLML的区别 ####

<div></div>
    <p>
    	文字
    	<span>123</span>
    </p>
    <script>
    	var div = document.querySelector('div');
    	div.innerText = '<strong>今天是：<strong> 2021';
    	// <strong>今天是：<strong> 2021 不识别html标签
    	div.innerHtml = '<strong>今天是：<strong> 2021';
    	//今天是：html  会识别strong标签
    	
    	//这两个属性是可读写的 可以获取元素里面的内容
    	var p = document.querySelector('p');
    	console.log(p.innerText);//我来组成文字 123
    	console.log(p.innerHTML);
    	//两行输出
    	//我来组成文字
    	//<span>123</span>
    </script>

#### （3）常见元素的属性操作 ####

1、innerText、innerHTML
    2、src、href
    3、id、alt、title

#### （4）表单元素的属性操作 ####

利用DOM可以操作如下表单元素的属性

type、value、checked、selected、disabled

#### （5）样式属性操作 ####

我们可以通过js修改元素大小、颜色、位置等

1、element.style     行内样式操作
    2、element.className 类目样式操作

注意：

js里面的样式采取驼峰命名法比如：fontSize，backgroundColor

js修改style样式操作，产生的是行内样式，css权重比较高

修改样式较多时，即可使用操作类名方式更改元素样式

class因为是个保留字，因此使用className来操作元素类名属性

className会直接更改元素的类名，会覆盖原先的类名

如果想要保留原来类名，我么可以在赋值时直接赋值多个类名

this.className = "one";
    this.className = "one two";

####  ####

发表评论取消回复

表情：

评论列表（有 0 条评论，6人围观）

还没有评论，来说两句吧...

相关阅读

相关 JavaScript中如何操作HTML元素

在JavaScript中，我们可以使用各种方法来操作和修改HTML元素。这使得我们能够动态地更新和改变网页的内容，从而实现交互性和动态性。下面是一些常用的方法和示例代码。 1

迈不过友情╰/ 2024年02月28日 03:28/ 0 赞/ 45 阅读

相关 javascript如何操作页面元素

要操作页面元素首先要获取页面内元素，获取到元素后，我们就可以对元素进行各种各样的操作，例如改变元素的文字，修改元素的内置属性等等。（1）改变元素内容 elem

深碍√TFBOYSˉ_/ 2023年10月03日 22:17/ 0 赞/ 7 阅读

相关 JavaScript经典案例：页面元素拖拽

效果展示： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nL

小鱼儿/ 2022年12月23日 11:14/ 0 赞/ 227 阅读

相关 javascript 实现页面元素倒序排列

如下面元素 <ul id="ulList"> <li onclick="console.log('aaaaaaaaaa')">a</li>

女爷i/ 2022年11月11日 05:25/ 0 赞/ 175 阅读

相关用JavaScript获取页面元素的位置

制作网页的过程中，你有时候需要知道某个元素在网页上的确切位置。下面的教程总结了Javascript在网页定位方面的相关知识。一、网页的绝对大小和相对大小首先，要明确

待我称王封你为后i/ 2022年09月18日 13:46/ 0 赞/ 208 阅读

相关 JavaScript DOM页面元素操作

DOM 页面元素操作 DOM（document object model）概念：文档：document，一个页面就是一个文档。也是页面的对象节点：页面的所

梦里梦外;/ 2022年05月13日 02:20/ 0 赞/ 297 阅读

相关用JavaScript获取页面元素的位置

制作网页的过程中，你有时候需要知道某个元素在网页上的确切位置。下面的教程总结了Javascript在网页定位方面的相关知识。一、网页的绝对大小和相对大小首先，要明确

太过爱你忘了你带给我的痛/ 2022年04月21日 14:10/ 0 赞/ 220 阅读

相关 JavaScript操作表单元素

表单元素在HTML页面中起着非常重要的作用，是用户与网页交互信息的重要手段。下面将介绍一些常用的使用JavaScript操作表单元素的方法。 1、表单（form） 1

怼烎@/ 2021年09月30日 15:16/ 0 赞/ 375 阅读

相关 WebDriver高级应用----使用JavaScript操作页面元素

目的：在webdriver脚本代码中执行JavaScript代码，来实现对页面元素的操作，此种方法主要用来解决在某些情况下，页面元素的.click()方法无法

╰半橙微兮°/ 2021年09月16日 07:02/ 0 赞/ 335 阅读

相关 JavaScript 操作HTML DOM元素

DOM概念 DOM是文档对象模型的简称，全名为“Document Object Model”，通过 HTML DOM，可访问 JavaScript HTML 文档的所有元素。

小灰灰/ 2021年09月14日 02:18/ 0 赞/ 636 阅读