JS DOM笔记
js的组成
ECMAScript:JS的语法
DOM:页面文档对象模型
BOM:浏览器对象模型
web APIs
是浏览器提供的一套操作浏览器功能和页面元素的API
主要学习的是DOM和BOM
web APIs是JS独有的
主要学习页面交互功能
API:应用程序编程接口
// 获取元素 var p1 = document.getElementById("text") console.log(p1); console.dir(text); // 遍历出每个内容 var p2 = document.getElementsByTagName("li") for (var i = 0; i < p2.length; i++) { console.log(p2[i]); } console.log(p2); // 获取某个特定的元素 var nav = document.getElementById("nav") var navlis = nav.getElementsByTagName("li") console.log(navlis); var box = document.getElementsByClassName("box") console.log(box); // queryselect 返回的是指定选择器的第一个元素 切记 里面的选择器需要加符号 var firstbox = document.querySelector(".box") console.log(firstbox); var nav2 = document.querySelector("#box2") console.log(nav2); var li2 = document.querySelector("li") console.log(li2); // 获取到姓名后存储到变量中去 var unsme = prompt("请输入您的姓名") alert("您的姓名是" + unsme) // 获取body元素 var bodylie = document.body console.log(bodylie); // 获取HTML元素 var HTMLles = document.documentElement; console.log(HTMLles);
DOM:文档对象模型:处理可扩展标记语言的标准编程接口
文档:一个页面就是一个文档,DOM中使用document表示
元素:页面里面所有标签都是元素,DOM中使用element表示
节点:网页中所有的内容都是节点,DOM中使用node表示
语法
var element = document.getElementById(id);
返回一个匹配到 ID 的 DOM Element 对象。若在当前 Document 下没有找到，则返回 null。
console.dir()可以打印我们返回的元素对象 更好的查看里面的属性和方法
<p id="text">sss</p>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<ul id="nav">
<li>12</li>
<li>23</li>
<li>34</li>
<li>45</li>
<li>56</li>
</ul>
<div class="box">45678</div>
<div id="box2">22222</div>
var btn1 = document.getElementById("btn")
btn1.onclick = function () {
console.log("ok");
}
// 获取事件源
var div = document.querySelector("div")
// 绑定事件 注册事件
// div.onclick
// 添加事件处理程序
div.onclick = function () {
console.log("hhhhh");
}
事件基础
事件可以被JS检测到的行为
事件的三部分
事件源 事件类型 事件处理程序 事件三要素
事件源:事件被触发的对象
事件类型:如何触发 什么事件
事件处理程序 通过函数赋值的方式
<button id="btn">唐伯虎</button>
操作元素
改变元素内容
element.innerHTML W3C标准
识别HTML标签，保留空格和换行
element.innerText 非标准
不识别HTML标签，去除空格和换行
这两个属性是可以读写的 可以获取元素里面内容
<button id="button">显示时间</button>
<div id="div">某个时间</div>
<p id="p2">123</p>
<script>
// 点击按钮时 div里面的值发生变化
var btn = document.getElementById("button")
var div2 = document.getElementById("div")
btn.onclick = function () {
div2.innerHTML = getDate()
}
function getDate() {
var date = new Date()
var year = date.getFullYear();
var month = date.getMonth() + 1;
var dates = date.getDate();
var day = date.getDay()
var dateArr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
return ("今天是" + year + "年" + month + "月" + dates + "日" + dateArr[day])
}
// 元素可以不用添加事件
var p3 = document.getElementById("p2")
p3.innerHTML = getDate()
</script>
<!-- 切换图片案例 -->
<button id="button1">1</button>
<button id="button2">2</button>
<img src="../imges/business-pic3.jpg" alt="">
<script>
// 获取元素
var button1 = document.getElementById("button1")
var button2 = document.getElementById("button2")
var img = document.querySelector("img")
// 注册事件 修改图片地址
button1.onclick = function () {
img.src = "../imges/business-pic4.jpg"
}
button2.onclick = function () {
img.src = "../imges/business-pic3.jpg"
}
</script>
案例
<!-- 分时显示不同的图片 -->
<img src="../imges/u=1362909999,1391932580&fm=11&gp=0.jpg" alt="">
<div>上午好</div>
<script>
var img = document.querySelector("img")
var div = document.querySelector("div")
var time = new Date();
var h = time.getHours();
if (h < 12) {
img.src = '../imges/u=1362909999,1391932580&fm=11&gp=0.jpg'
div.innerHTML = "上午好好学习"
} else if (h < 18) {
img.src = '../imges/u=3070420121,2549906773&fm=26&gp=0.jpg'
div.innerHTML = "中午好好学习"
} else {
img.src = '../imges/u=3279797416,3064979525&fm=26&gp=0.jpg'
div.innerHTML = "晚上好好学习"
}
</script>
<!-- 点击按钮修改文本内容 -->
<button>按钮</button>
<input type="text" value="输入内容">
<script>
var btn = document.querySelector("button")
var input = document.querySelector("input")
btn.onclick = function () {
input.value = '是是是'
// 如果想要某个表单被禁用可以用disabled
this.disabled = true
// this指向的是事件函数的调用者
}
</script>
<!-- 点击眼睛查看密码 -->
<div class="box">
<label for=""><img src="../imges/business-pic4.jpg" alt="" id="eye"></label> <input type="password" name=""
id="pwd">
</div>
<script>
var eye = document.getElementById("eye")
var pwd = document.getElementById("pwd")
var flag = 0;
// 点击一次过后flag一定要变化'
eye.onclick = function () {
if (flag == 0) {
pwd.type = "text"
flag = 1;
} else {
pwd.type = "password"
flag = 0;
}
}
</script>
<!-- 点击box修改背景 -->
<div id="box2">eeeeeeeeee</div>
<script>
var box2 = document.getElementById("box2")
var flag = 0
box2.onclick = function () {
if (flag == 0) {
this.style.background = 'blue'
this.style.width = "350px"
flag = 1
} else {
this.style.background = 'black'
this.style.width = "450px"
flag = 0
}
}
</script>
css代码
img { width: 300px; height: 300px; } .box { width: 400px; height: 400px; border: 1px solid #efefef; margin: 100px auto; position: relative; } .box input { width: 350px; height: 30px; outline: none; } .box img { width: 20px; height: 20px; position: absolute; top: 7px; right: 70px; } #box2 { width: 200px; height: 200px; background-color: gold; } .box3 { width: 200px; height: 200px; margin: 0 auto; display: block; position: relative; } .box3 i { position: absolute; left: -10px; top: 0; cursor: pointer; }
