这儿我想了想却是讲许多吧,称得上两个此基础的介绍,在真实世界的组织工作中,他们更多的是加进前面的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);注:
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的属性值;