javascript改html内容
document是文本对象。js要想修改html,就要写document。
这个官网的没找到,还是看菜鸟教程吧菜鸟javascript document。个人还是很喜欢菜鸟教程的。
document对象在HTML DOM(文档对象模型)里。DOM(Document Object Model)-文档对象模型。通过DOM,js就可以创建动态的HTML。
后台打印document文档对象。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>document</title>
</head>
<body>
<div class="box" id="one">你好</div>
<div class="box" id="two">你好吗!</div>
<script>
/*document里的类容是整个html*/
console.log(document);
</script>
</body>
</html>
下面改一个div块元素。
querySelector(“id”) 方法返回文档中匹配指定 CSS 选择器的一个元素。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>document</title>
</head>
<body>
<div class="box" id="one">你好</div>
<div class="box" id="two">你好吗</div>
<script>
//js改html只要改document就好了
//js帮助文档https://www.runoob.com/jsref/dom-obj-document.html
//document.querySelector("#two");
var div=document.querySelector("#two");
div.style.width="250px";
div.style.height="250px";
div.style.backgroundColor="yellow";
</script>
</body>
</html>
在追加一个更改文本的。也是document对象里的方法。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>document</title>
</head>
<body>
<div class="box" id="one">你好</div>
<div class="box" id="two">你好吗</div>
<script>
//js改html只要改document就好了
//js帮助文档https://www.runoob.com/jsref/dom-obj-document.html
var div=document.getElementById("two");
div.innerHTML="我可能很开心";
</script>
</body>
</html>
其实有了这个帮助文档,再有个引入门的开头后面的也没啥好说的。所以我不写了。。。
0.0