一、作用域
作用域:全员作用域和局部作用域
全员作用域:整个页面,只有当前页面关闭时,全员作用域才会失效
局部作用域:全局作用域中有划分出的小范围作用域,函数内部可以创建局部作用域,到目前为止,也只有函数内部可以创建局部变量
全局变量可以在函数内部进行访问,但是函数内部定义的变量不能在函数外部进行访问
var a = "张三"
function test() {
//用来计算两个数的和
var result = 10 + 20
// console.log(result)
console.log(a)
// return result
}
test()
function test_1() {
var a = "李四" //变量采取的是就近原则
// console.log(a)
function test_2() {
a = "王五"
}
// console.log(a)
}
test_1()
console.log(a)
function test_3() {
num = 100
}
test_3()
console.log(num) //自动转换成全局变量
二、DOM节点
文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标志语言的标准编程接口。在网页上,组织页面(或文档)的对象被组织在一个树形结构中,用来表示文档中对象的标准模型就称为DOM。Document Object Model的历史可以追溯至1990年代后期微软与Netscape的"“"浏览器大战",双方为了在JavaScript与Script一决生死,于是大规模的赋予浏览器强大的功能。微软在网页技术上加入了不少专属事物,既有VBScript、ActiveX、以及微软自家的DHTML格式等,使不少网页使用非微软平台及浏览器无法正常显示。
<body>
<div class="item">
<!-- 这是一个注释 -->
这是一个div
<span>这是一个span标签</span>
</div>
<input type="text" name="" id="uname">
<a class="item" href="#">超链接</a>
<input type="radio" name="sex" id="">男
<input type="radio" name="sex" id="">女
<div>
这是第二个div
</div>
<script>
//
// 获取整个html文档
console.log(document.documentElement)
// 获取头部head
console.log(document.head)
// 获取主题body
console.log(document.body)
</script>
</body>
<body>
<div class="item">
<!-- 这是一个注释 -->
这是一个div
<span>这是一个span标签</span>
</div>
<input type="text" name="" id="uname">
<a class="item" href="#">超链接</a>
<input type="radio" name="sex" id="">男
<input type="radio" name="sex" id="">女
<div>
这是第二个div
</div>
<script>.
// 获取
var body = document.body //获取到了body标签
var div = body.firstElementChild //共获取到body中的第一个元素
console.log(div)
var div_0 = body.firstChild
console.log(div_0)
var lastEle = body.lastElementChild
console.log(lastEle)
console.log(div.nextElementSibling) //获取的是相邻两兄弟(下一个)
var input = div.nextElementSibling
console.log(input.previousElementSibling) //获取的是相邻兄弟(前一个)
// 通过函数来获取元素
// getElementById():通过标签的id属性的值获取到某个标签
console.log(document.getElementById("uname"))
// getElementsByClassName():根据标签的class属性的值来获取一组标签
console.log(document.getElementsByClassName("item"))
// getElementsByName():根据标签的name属性的值来获取一组标签
console.log(document.getElementsByName("sex"))
// getElementsByTagName():根据标签名来获取一组标签
console.log(document.getElementsByTagName("div"))
// querySelector();根据选择器名称来获取满足条件的并且是遇到的第一标签
console.log(document.querySelector("div"))
console.log(document.querySelectorAll("div"))
</script>
</body>
<body>
<div class="item">
<!-- 这是一个注释 -->
这是一个div
<span>这是一个span标签</span>
</div>
<input type="text" name="" id="uname">
<a class="item" href="#">超链接</a>
<input type="radio" name="sex" id="">男
<input type="radio" name="sex" id="">女
<div>
这是第二个div
</div>
<script>
var divs = document.querySelectorAll("div")
// 通过循环可以将一组元素打印输出
for (var i = 0; i < divs.length; i++) {
console.log(divs[i])
}
console.log(document.querySelector("#uname"))
console.log(document.querySelector(".item"))
console.log(document.querySelectorAll(".item"))
</script>
</body>
添加、删除、修改DOM节点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
ul {
list-style: none;
}
ul li {
width: 200px;
height: 40px;
border: 1px solid red;
}
</style>
</head>
<body>
<input type="button" value="添加节点" id="btnAdd" onclick="Add()">
<input type="button" value="删除节点" id="btnDel" onclick="Del()">
<input type="button" value="修改节点" id="btnUpdate" onclick="Update()">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<script>
function Add() {
var ul = document.querySelector("ul") //获取ul标签
// 创建一个节点
var li = document.createElement("li")
li.innerHTML = "添加一个节点"
ul.appendChild(li) //向便签内追加一个新的子元素
}
function Del() {
// 删除节点removeChild()
// 先获取到要删除的标签,然后在调用removeChild()
var ul = document.querySelector("ul") //获取ul标签
var li = ul.firstElementChild
ul.removeChild(li)
// ul.remove() //删除元素本身以及所有子元素
}
function Update() {
var ul = document.querySelector("ul") //获取ul标签
var li = ul.firstElementChild
li.innerHTML = "<a href=#>这是更改后的超链接</a>"
// li.innerText = "<a href=#>这是更改后的超链接</a>"
}
</script>
</body>
</html>
扫描二维码关注公众号,回复:
14623459 查看本文章
三、属性操作
dataset:用于获取或设置data-*的性
attributes:用于获取或设置所有元素属性,包括自定义属性
.:仅用于获取或设置预定义的属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="text" value="文本框" id="user">
<div id="div_0" class="div" stuname="张三">这是一个div</div>
<div id="div_1" data-index="1" data-lianghaoyu="男">这是一个div2</div>
<script>
//获取标签的属性(自带的)
// 第一种方式:元素名.属性名
// 第一步:先找到标签,第二步才是获取到改标签的属性
var input = document.getElementById("user")
console.log(input.value, input.type)
// 更改属性值
input.value = "用户名"
// 自定义属性
var div_0 = document.getElementById("div_0")
console.log(div_0)
// getAttribute()获取标签的属性值(包括一些自定义的属性)
console.log(div_0.getAttribute("stuname"))
console.log(div_0.getAttribute("class"))
// getAttribute()设置属性
div_0.setAttribute("stuid", "1001")
// Attribute:获取的是标签的自带的属性以及自定义属性
console.log(div_0.attributes)
console.log(div_0.attributes["id"])
// 自定义属性:data-***
// dataset:只能获取到data-***的属性
console.log(div_1.dataset)
console.log(div_1.dataset.index)
console.log(div_1.dataset["lianghaoyu"])
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="password" id="pwd">
<input type="button" value="Eye" id="btnEye" onclick="eye()">
<script>
var pwd = document.getElementById("pwd")
var eye = document.getElementById("btnEye")
eye.onclick = function() {
if (pwd.type == "password") {
pwd.type = "text"
} else {
pwd.type = "password"
}
}
function test() {
if (pwd.type == "password") {
pwd.type = "text"
} else {
pwd.type = "password"
}
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
ul {
list-style: none;
}
</style>
</head>
<body>
<p>
<input type="checkbox" id="selectAll">全选/全不选
<input type="checkbox" id="btn">反选
</p>
<hr>
<ul class="shop">
<li><input type="checkbox" name="" id="">苹果</li>
<li><input type="checkbox" name="" id="">梨</li>
<li><input type="checkbox" name="" id="">葡萄</li>
<li><input type="checkbox" name="" id="">香蕉</li>
<li><input type="checkbox" name="" id="">榴莲</li>
</ul>
<script>
var selectAll = document.querySelector("#selectAll")
// 获取所有的input
var inputAll = document.querySelectorAll(".shop input")
console.log(inputAll) //输出接过
selectAll.onclick = function() {
// 遍历循环出ul中的所有input标签
for (var i = 0; i < inputAll.length; i++) {
// console.log(inputAll[i])
inputAll[i].checked = selectAll.checked
}
}
// 给每一个水果选项绑定一个单击事件
for (var i = 0; i < inputAll.length; i++) {
// 绑定一个单击事件
inputAll[i].onclick = function() {
var count = 0 //用来统计被选中的input标签的个数
for (var m = 0; m < inputAll.length; m++) {
if (inputAll[m].checked == true) {
count++
}
}
// 如果count的值等于水果的个数,全选要选中
if (count == inputAll.length) {
selectAll.checked = true
} else {
selectAll.checked = false
}
}
}
var selectAll = document.querySelector("#btn")
</script>
</body>
</html>