1.1 DOM元素获取的四种方式
- 第一种方法
<script>
// 使用文档对象中的方法
// get获取Element里面的id
var div =document.getElementById("app");
console.log(div);
console.log(typeof(div));//object
</script>
- 第二种方法
<div class="app">1</div>
<div class="app">2</div>
<script>
var div = document.getElementsByClassName("app");
console.log(div);
// 伪数组的一个形式输出
console.log(typeof(div));//object
console.log(div[0]);
console.log(div[1]);
</script>
- 第三种方法
<ul class="myul">
<li>红楼</li>
<li>三国</li>
<li>西游</li>
<li>水浒</li>
</ul>
<script>
// var lin=document.getElementsByTagName("li");//获取到标签名
// console.log(lin)
// for(var i=0;i<lin.length;i++){
// console.log(lin[i]);
// }
var ul =document.getElementsByClassName("myul")[0];
var lin=ul.getElementsByTagName("li");
console.log(lin)
</script>
- 第四种方法
<div class="box1"></div>
<div class="box1"></div>
<div class="box2"></div>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<script>
// var box =document.getElementsByClassName("box1")[0];//返回第一个box1
// var box =document.getElementsByClassName("box1")[0];//返回两个box1
var box = document.querySelector(".box1");//选择器名字 只能返回一个（第一个）box1
console.log(box);
var lin =document.querySelectorAll("li");//返回所有的li
console.log(lin);
</script>
1.2 DOM中的特殊元素
1.3 单击事件
- 案例1
<button id="btn">弹出</button>
<script>
var btn =document.querySelector("#btn");
btn.onclick = function(){
alert("你好啊")
};
</script>
- 案例二
<div class="box">
</div>
<div class="box2">
</div>
<button id="btn">请点击</button>
<script>
var div = document.getElementsByClassName("box");
var div2 = document.getElementsByClassName("box2")[0];
var btn =document.getElementById("btn");
btn.onclick=function(){
console.log(div.innerHTML="你好啊")
}
div2.innerHTML="你好啊"
</script>
- 案例三 修改图片的地址
<button id="btn">修改图片得地址</button>
<img src="1.jpg" alt="">
<script>
var btn =document.getElementById("btn");
var img =document.querySelector("img");
btn.onclick=function(){
img.src="2.jpg"
}
</script>
1.4 inner.HTML和inner.Text的区别
inner.HTML能将其中的html标签一同输出，而inner.Text是纯文本输出
<div class="box">
<ul>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
</ul>
</div>
<script>
// var box = document.querySelector(".box");
var box2 = document.getElementsByClassName("box")[0];
console.log(box2.innerHTML);//带HTML标签输出
console.log(box2.innerText);//纯文本输出
</script>
1.5 表单属性的设置
<div>
<input type="text" name="" id="">
<button>清除数据</button>
</div>
<script>
var input =document.querySelector("input");//获取标签名
var btn =document.querySelector("button");
input.value="zry";
btn.onclick=function(){
// input.value="";
// this.disabled=true;
//this指向的是事件函数的调用者
btn.disabled=true;
input.disabled=true;
input.readOnly=true;//只读属性,只能读，不能写
}
</script>
1.6 明码和密码的转换
<style>
input {
border: none;
border-bottom: 2px solid #999;
width: 200px;
outline: none
}
img {
vertical-align: middle;
width: 30px;
}
</style>
</head>
<body>
<div>
<input type="password">
<img src="./images/close.png" alt="">
</div>
<script>
// 1.拿到图片，进行点击，让input变成type="text",同时让img变成另外一个图片
var img = document.querySelector("img")
var input = document.querySelector("input")
// 需要用到这么一个全局变量，做为哨兵变量
var flag = false;//设置一个中间转换量
img.onclick = function() {
if(!flag) {
input.type = "text"
img.src = "images/open.png"
flag = true
}else {
input.type = "password"
img.src = "images/close.png"
flag = false
}
}
</script>
1.7 用DOM元素对元素样式的操作
<style>
div {
width: 100px;
height: 100px;
background: red;
}
</style>
<div class="box"></div>
<script>
var box = document.querySelector(".box")
// 这里使用background-color:
// 使用的是驼峰命名法
box.style.backgroundColor = "pink"
// 不加单位是不行的。一定要带单位！！！
box.style.width = '300px'
</script>
1.8 关闭悬浮广告
<style>
.box {
width: 100px;
height: 100px;
border: 2px solid red;
margin: 100px;
position: relative;
}
i {
position: absolute;
width: 20px;
height: 20px;
right: -10px;
top: -10px;
/* background: red; */
border: 1px solid red;
border-radius: 50%;
font-style: normal;
text-align: center;
line-height: 20px;
font-size: 12px;
color: black
}
</style>
<div>
<div class="box">
<i>X</i>
</div>
</div>
<script>
var div = document.querySelector("div")
var i = document.querySelector("i")
i.onclick = function() {
div.style.display = "none"
}
</script>
1.9 显示隐藏文本的内容(聚焦 失焦)
<input type="text">
<script>
var input = document.querySelector("input");
input.value = "helloworld!!!"
//在聚焦状态下
input.onfocus = function() {
if(input.value != "helloworld!!!") {
}else {
input.value = ""
}
}
<!--在失焦状态下-->
input.onblur = function() {
if(!input.value) {
input.value = "helloworld!!!"
}
}
</script>
2.1 操作class方式改变样式
<div class="box"></div>
<script>
var box = document.querySelector(".box")
// className
// console.log(box.className)
box.className = "box divstyle"
</script>
