来来来，JavaScript核心基础语句送给你们
学JS你不会DOM算真的学会了吗？
对JavaScript中的 事件 进行疯狂 处理
用BOM来实现轮播图效果
我们来实现创建JavaScript中的自定义对象
JS中构造函数的原型prototype
还不明白JS中的内置对象吗？ 快来这里！
JavaScript中数据如何存储在客户端？带你看看Cookie和WebStorage
关于DOM
1. DOM简介
Document Object Model 文档对象模型
浏览器加载HTML文档时，会将HTML文档解析为一个树形结构，称为DOM树
- HTML文档和DOM树是一 一对应的关系
- 当DOM树被修改时，与值对应的HTML文档也会随之改变
- 当需要对HTML中的内容进行动态改变时，可以使用DOM来进行操作
- DOM提供了一组用来操作HTML文档的API，即提供一套属性、方法和事件
- 树上的每一个结点都是一个DOM对象，树的顶层为document对象
2. document对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
/*
* document对象，表示整个文档
*/
/* document.bgColor设置文档颜色属性 */
function doBgColor() {
document.bgColor='red';
}
/* document.title设置文档标题属性 */
function doTitle() {
document.title='DOM';
}
/* document.body设置文档主体属性 */
function doBody() {
//向body内添加一个文本结点
document.body.appendChild(document.createTextNode('吗吗哈哈'));
}
</script>
</head>
<body>
<button onclick="doBgColor()">设置页面背景</button>
<button onclick="doTitle()">设置页面标题</button>
<button onclick="doBody()">操作页面主体</button>
<h3>喝光大佬的卡布奇诺</h3>
</body>
</html>
3. 查询操作
获取DOM对象
| 方法 | 含义 |
|---|---|
document.geyElementById('id值') | 根据id属性来查询节点，返回匹配的第一个节点 |
document.getElementsByName('name属性值') | 根据name属性来查询，返回所有匹配的节点集合 |
document.getElementsByTagName("标签名") | 根据标签名来查询，返回所有匹配的节点集合 |
document.getElementsByClassName("类名") | 根据class属性查询，返回所有匹配的节点集合 |
document.querySelector("选择器") | 根据css选择器来查询，返回匹配的第一个节点 |
document.querySelectorAll("选择器") | 根据css选择器来查询，返回所有匹配的节点集合 |
node.getElementsByTagName("标签名") | 在当前节点的内部根据标签名来查询 |
node.parentNode属性 | 查询当前节点的父节点 |
node.children属性 | 查询当前节点的子节点集合，NodeList类型 |
node.firstElementChild属性 | 查询当前节点的第一个元素子节点 |
node.lashElementChild属性 | 查询当前节点的最后一个元素子节点 |
node.previousElementSibling属性 | 查询当前节点的上一个元素节点 |
node.nextElementSibling属性 | 查询当前节点的下一个元素节点 |
//使用getElementById方法，根据id来获取对象
<head>
<script>
function doQuery(){
var objDiv = document.getElementById('d');
console.log(objDiv);
onsole.log(typeof objDiv);
}
</script>
</head>
<body>
<button onclick='doQuery()'>查询获取页面中的元素</button>
<div id="d">div</div>
</body>
//使用getElementsByName方法，根据name属性来获取对象
<head>
<script>
var objs = document.getElementsByName('hobby');
console.log(objs);
</script>
</head>
<body>
爱好：
<input type="checkbox" name="hobby" value="eat"> 吃饭
<input type="checkbox" name="hobby" value="sleep"> 睡觉
<input type="checkbox" name="hobby" value="paly"> 玩
</body>
//使用getElementsByTagName方法，根据标签名来获取对象
<head>
<script>
var objs = document.getElementsByTagName('div');
console.log(objs[1]); //获取三个对象中的第二个
</script>
</head>
<body>
<div id='1'>div1</div>
<div id='2'>div2</div>
<div id='3'>div3</div>
</body>
<head>
//根据css选择器获取
<script>
//返回单个对象
var obj = document.querySelector('div.hello');
console.log(obj);
//返回整个集合
var objs = document.querySelectorAll('div');
console.log(objs);
</script>
<style>
div .hello{
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<div class='hello'>div1</div>
<div id='2'>div2</div>
<div id='3'>div3</div>
</body>
<head>
//根据已有节点来获取其他节点
//在当前节点的内部，根据标签名来获取
<script>
var ul = document.getElementById('myul');
var lis = ul.getElementsByTagName('li');
</script>
</head>
<body>
<ul id='myul'>
<li1>1</li1>
<li2>2</li2>
<li3>3</li3>
<li4>4</li4>
<li5>5</li5>
</ul>
</body>
<head>
<script>
var li2 = document.getElementById('second');
console.log("父节点：",li2.parentNode);
console.log("父节点的父节点：",li2.parentNode.parentNode);
console.log("父节点的所有子节点：",li2.parentNode.children);
console.log("第一个子节点",li2.parentNode.firstElementChild);
console.log("最后一个子节点",li2.parentNode.lastElementChild);
console.log("前一个兄弟节点",li2.previousElementSibling);
console.log("后一个兄弟节点",li2.nextElementSibling);
</script>
</head>
<body>
<ul class='myul'>
<li1>li1</li1>
<li2 id='second'>li2</li2>
<li3>li3</li3>
<li4>li4</li4>
<li5>li5</li5>
</ul>
</body>
4. 访问操作
（1）访问属性
获取/设置DOM对象的属性
DOM对象的属性和HTML标签的属性几乎是一样的，一般情况下DOM对象都会存在一个与之对应的HTML标签同名的属性
两种方式：
-
直接访问属性
用法：DOM对象.属性
-
调用setAttribute()和getAttribute()方法
DOM对象.setAttribute(“属性名”,“属性值”) 或 DOM对象.getAttribute(“属性名”)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
function doProperty() {
let obj = document.getElementById('baidu');
console.log(obj);
//获取对象的属性
console.log(obj.href);
console.log(obj.target);
console.log(obj.id);
//或者
console.log(obj.getAttribute('href'));
//修改属性的值
obj.href = "https://www.xina.comc.cn";
obj.target = "_self";
obj.id = "xina";
//或者
obj.setAttribute('href','https://www.qq.com');
}
</script>
</head>
<body>
<button onclick="doProperty()">访问属性</button>
<br>
<a href="https://www.baidu.com" target="_blank" id="baidu">点这里</a>
</body>
</html>
这里有一个特殊的属性checked，它是一个Boolean属性，取值为true或false
<head>
<script>
function doProperty(){
let obj= document.getElementById('male');
obj.checked=true;
}
</script>
</head>
<body>
<button onclick="doProperty()">访问属性</button>
<input type="radio" name="sex" id="male" value="male" checked>男
<input type="radio" name="sex" id="female" value="female">女
</body>
（2）访问内容
获取/设置标签中的内容
三种方式：
-
使用innerHTML
用法：DOM对象、innerHTML 将内容解析为HTML
-
使用innerText
用法：DOM对象、innerText 将内容作为纯文本，出现转义字符时会进行解析
-
使用textContent
用法：DOM对象、textContent 将内容作为纯文本，出现转义字符时会直接保留特性
<head>
<script>
function doContent(){
let obj= document.getElementById('mydiv');
//获取内容
console.log(obj.innerHTML);
console.log(obj.innerText);
console.log(obj.textContent);
//设置内容
obj.innerHTML='<h1>hello</h1>';
obj.innerText='你\n好';
obj.innertextContent='你\n好';
}
</script>
</head>
<body>
<button onclick="doContent()">访问内容</button>
<div id="mydiv">
<h2>hello world</h2>
</div>
</body>
（3）访问CSS
获取/设置CSS属性
三种方式：
-
使用style属性
用法：DOM对象.style.样式属性
如果CSS属性中有短横线，需要去除短横线，然后将其后的单词首字母改成大写字母，如fontsize
<head>
<script>
function doStyle(){
/**
* 使用style属性
*/
var obj = document.getElementById('mydiv');
//获取属性
console.log(obj.style.width);
//设置属性
obj.style.backgroundColor='red';
}
</script>
</head>
<body>
<button onclick="doStyle()">访问CSS</button>
<div id="mydiv" style="width: 300px;height: 300px;background-color:pinck">
<h2>hello world</h2>
</div>
</body>
-
使用className属性
用法：DOM对象.className
<head>
<style>
#mydiv {
width: 300px;
height: 300px;
background-color: pink;
}
.hello {
color: red;
width: 400px;
font-size: 30px;
border-radius: 20px;
}
</style>
<script>
function doStyle(){
/**
* 使用className属性
*/
var obj = document.getElementById('mydiv');
obj.className = 'hello';
console.log(obj.className);
}
</script>
</head>
<body>
<button onclick="doStyle()">访问CSS</button>
<div id="mydiv" class="world">
<h2>hello world</h2>
</div>
</body>
-
使用classList属性
用法：DOM对象.classList
通过classList的add()、remove()进行样式的添加和删除
<head>
<style>
#mydiv {
width: 300px;
height: 300px;
background-color: pink;
}
.hello {
color: red;
width: 400px;
font-size: 30px;
border-radius: 20px;
}
.world {
text-decoration: underline;
}
</style>
<script>
function doStyle(){
/**
* 使用className属性
*/
var obj = document.getElementById('mydiv');
obj.classList.add('hello');
obj.classList.add('world');
console.log(obj.classList); //获取当前DOM对象上的所有类样式
}
</script>
</head>
<body>
<button onclick="doStyle()">访问CSS</button>
<div id="mydiv" class="world">
<h2>hello world</h2>
</div>
</body>
5. 更新操作
结点的创建、添加、修改、删除等
| 方法 | 含义 |
|---|---|
document.createElement("标签名") | 创建一个元素结点，即标签 |
document.createTextNode("文本内容") | 创建一个文本结点，即标签中的文本内容 |
node.appendChild(newNode) | 将一个新的结点newNode添加到指定的结点node中子节点末尾 |
node.insertBefore(newNode,refNode) | 将一个新的结点newNode插入到node结点的子结点redNode之前 |
node.replaceChild(newNode,redNode) | 用一个新的结点newNode替换原有的node结点中的子结点refNode |
node removeChild(refNode) | 删除当前结点中指定的子结点 |
node remove() | 删除当前结点 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
function doUpdate(){
//1.创建元素结点
var li = document.createElement('li');
//2.设置文本内容
li.innerHTML = 'li4';
var text = document.createTextNode(li4);
li.appendChild(text);
//3.设置属性
li.id = 'fourth';
//4.添加到结点中
var myul = document.getElementById('myul');
//添加到末尾
myul.appendChild(li);
//添加到指定结点的前面
myul.insertBefore(li,document.getElementById('second'));
//替换指定结点
myul.replaceChild(li,document.getElementById('second'));
//删除内部某个结点
myul.removeChild(document.getElementById('second'));
//删除当前结点
document.getElementById('second').remove();
}
</script>
</head>
<body>
<button onclick="doUpdate()">更新</button>
<ul id="myul">
<li id="first">li1</li>
<li id="second">li2</li>
<li>li3</li>
</ul>
</body>
</html>
在我们学习完这章的内容之后，可以尝试完成一个简单的计算器。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
button {
width: 80px;
height: 25px;
}
</style>
<script>
function $(id){
return document.getElementById(id);
}
function calculate(flag){
var num1 = Number($('num1').value);
var num2 = Number($('num2').value);
var result;
switch(flag){
case '+':
result = num1+num2;
break;
case '-':
result = num1-num2;
break;
case '*':
result = num1*num2;
break;
case '/':
result = num1/num2;
break;
}
$('result').value = result;
}
</script>
</head>
<body>
<div>
<h2>简易计算器</h2>
<p>
第一个数：<input type="text" id="num1">
</p>
<p>
第二个数：<input type="text" id="num2">
</p>
<p>
<button onclick="calculate('+')">+</button>
<button onclick="calculate('-')">-</button>
<button onclick="calculate('*')">*</button>
<button onclick="calculate('/')">/</button>
</p>
<p>
结果： <input type="text" id="result" disabled>
</p>
</div>
</body>
</html>
扫一扫
1191
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
