JavaScript编程之BOM编程篇
w3c网站有介绍
windos对象的介绍：
使用window对象弹框，可以实现三种方式
//1.警告框，不同浏览器弹不同的框
//alert();
alert("aaaa")
//2.消息确认框
const b = window.confirm("是否确认删除");
console.log("确认删除的结果："+b)
// 3. 消息输入框
let age = window.prompt("请输入你的年龄");
if (age>18){
alert('你可以上网')
} else {
alert("好好学习")
}
JavaScript编程之DOM编程篇
获取页面元素
var myElement = document.getElementById("intro");
var x = document.getElementsByTagName("p");
var x = document.getElementsByClassName("intro");
var x = document.querySelectorAll("p.intro");
操作页面元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>操作页面元素</title>
</head>
<body>
<ul id="cities">
<li id="beijing">
北京
</li>
<li id="shanghai ">
上海
</li>
<li id="guangzhou">
广州
</li>
<li id="shenzhen">
深圳
</li>
<!-- <li id="hangzhou">-->
<!-- 杭州-->
<!-- </li>-->
</ul>
<input type="button" value="添加城市" onclick="addCity()"><br/>
<input type="button" value="删除城市" onclick="removeCity('hangzhou')"><br/>
<script>
function addCity() {
// 在列表增加城市杭州
// 1.创建一个li标签
let liElement = document.createElement("li");
// 给li标签设置id属性
liElement.setAttribute("id","hangzhou");
//设置li标签的文本内容
liElement.innerHTML="杭州";
// 根据id找到ul标签
let UlElement = document.getElementById("cities");
// 将li标签添加到ul标签中
UlElement.appendChild(liElement);
}
function removeCity(cityId) {
let removeElement = document.getElementById(cityId);
removeElement.remove();
}
</script>
</body>
</html>
Dom修改标签的内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Dom修改标签的内容</title>
</head>
<body>
<div id="city">
<h1>
上海
</h1>
</div>
<script>
// 获取城市的名称
let innerText = document.getElementById("city").innerText;
console.log("城市名称="+innerText)
//修改文本内容
document.getElementById("city").innerHTML="<h1>深圳</h1>"
</script>
</body>
</html>
修改标签的属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>修改标签的属性</title>
</head>
<!--
onmousedown 当鼠标按钮被点击之后事件触发
onmouseup 但鼠标按钮松开后事件触发
-->
<body>
<!--密码框，不显示密码-->
密码：
<input type="password" id="password" ><br>
<input type="button" value="显示密码" onmousedown="showPassword()">
<input type="button" value="隐藏密码" onmouseup="hidePassword()">
<script>
/*
*鼠标单击时，显示密码
*/
function showPassword() {
let inputElement = document.getElementById("password");
// 修改属性的值，为文本框就可以显示密码
inputElement.setAttribute("type","text")
}
/*
鼠标单击时，显示密码
*/
function hidePassword() {
let inputElement = document.getElementById("password");
// 修改为文本框就可以显示密码
inputElement.setAttribute("type","password")
}
</script>
</body>
</html>
javascript事件的快速体验
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>javascript事件的快速体验</title>
</head>
<body>
<input type="button" id="input" value="按钮" onclick="handOnclick()">
<script>
<!-- -->
//
//
function handOnclick() {
console.log("按钮点击就会触发该方法")
let elementById = document.getElementById("input");
elementById.style.color = "red";
elementById.style.background = "yellow";
}
</script>
</body>
</html>
