web开发之-js的dom操作

2023-05-26 0 382

这儿我想了想却是讲许多吧,称得上两个此基础的介绍,在真实世界的组织工作中,他们更多的是加进前面的jquery去操作方式,这儿而已单纯讲呵呵,让他们介绍,怕他们到jquery那儿不知道。

他们下列操作方式单厢采用下列的html的文档:

<html> <head> <title>js</title> <meta http-equiv=“Content-Type” content=“text/html; charset=UTF-8”/> </head> <body> <div id=“container_id”> 我是div块 </div> <div class=“container_class”> 我是div块1 </div> <div class=“container_class”> 我是div块2 </div> </body> <script type=“text/javascript” src=“./index.js”> </script> </html>

js

var dom = document.getElementById(“container_id”); console.log(dom.innerHTML);console.log(dom.innerText); var doms = document.getElementsByClassName(“container_class”); console.log(doms); console.log(doms[0].innerText);
web开发之-js的dom操作

注:

getElementById:是通过html元素的id属性

两个数组。

js更改html中的内容

var dom = document.getElementById(“container_id”); console.log(dom.innerHTML); console.log(dom.innerText); vardoms =document.getElementsByClassName(“container_class”); console.log(doms); console.log(doms[0].innerText); dom.innerHTML =“<div>我是新更改的</div>”; //dom.innerText = “我是另外新更改的”; // 可以尝试看下输出效果

注:

要更改dom元素内部的内容,直接 dom元素.innerHtml = “想要赋的值就行”;或者dom元素.innerText = “想要赋的值就行”;

js更改html中的属性

var dom = document.getElementById(“container_id”); dom.setAttribute(“style”,“color:red;background:blue”);

注:以上代码他们通过setAttribute来给dom元素设置属性,这儿他们设置了字体红色,背景蓝色。同样的你也可以添加其他属性。

var dom = document.getElementById(“container_id”); dom.setAttribute(“style”,“color:red;background:blue”); var cssstyle = dom.getAttribute(“style”); console.log(cssstyle); var csscolor = dom.style.color; console.log(csscolor);

dom元素的style的属性值;

相关文章

发表评论
暂无评论
官方客服团队

为您解决烦忧 - 24小时在线 专业服务