JSP5 DOM
程序员文章站
2022-03-01 18:43:20
...
DOM基础
1.DOM查找
document.getElementById(“id”);
返回指定对象的第一个引用
document.getElementsbyTagName(“Tag”);//返回数组
返回所有Tag标签集合
var box=document.getElementById('box');
console.log(box);
var lis=document.getElementsByTagName("li");
console.log(lis.length);
var lis1=document.getElementById("list1").getElementsByTagName("li");
console.log(lis1.length);
2.设置DOM元素样式
innerHTML;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div class='box' id='box'>elemtnt</div>
<div>
<ul id="list1">
<li>前端</li>
<li>后端</li>
<li><b>安全</b></li>
</ul>
<ol>
<li>ahu</li>
<li>llaa</li>
<li><b>haha</b></li>
</ol>
</div>
</body>
</html>
<script type="text/javascript">
var box = document.getElementById('box');
box.style.color = "#f00";
console.log(box);
var lis1 = document.getElementById("list1").getElementsByTagName("li");
for (var i = 0; i < lis1.length; i++) {
lis1[i].style.fontWeight = "bold";
//获取li内部的所有内容 包括标签
console.log(lis1[i].innerHTML);
//操作li内部的所有内容
lis1[i].innerHTML += "code!";
}
console.log(lis1.length);
//动态更改类名
box.className = "newbox";
//获取类名
console.log(document.getElementById("box").className); //newbox
</script>
<script type="text/jscript" src="http://localhost:35729/livereload.js">
</script>
获取 更改 删除属性
<p id='text' align='center' data-type='title'>context</p>
var p = document.getElementById("text");
console.log(p.align); //center
console.log(p.getAttribute("data-type")); //title
//属性设置
p.setAttribute("class", "classp");
console.log(p.getAttribute("class"));
//属性删除
p.removeAttribute("class");
console.log(p.getAttribute("class"));
DOM事件
事件语法:
<tag 事件=“执行脚本”></tag>
<input type="button" class='btn' value="弹出" onclick="alert('sada??')">
<div id='btn' class="btn" onmouseover="onmouseoverFn(this,'#f00')" onmouseout="onmouseoverFn(this,'#00f')">
开始
</div>
function onmouseoverFn(btn,bgcolor){
btn.style.background=bgcolor;
}
function onmouseout(btn){
btn.style.background=bgcolor;
}
上一篇： Session的简单使用
下一篇： session的创建，使用，删除