JavaScript DOM
文章目录
JavaScript DOM
1.DOM的介绍
DOM（document object model）：文档对象模型。
将HTML元素的各个组成部分封装成对象。借助这些对象可以对HTML元素进行增删改查的动态操作。
2.Element元素的获取
2.1 getElementById()
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="d1">这是一个div</div>
<button onclick="f()">点击</button>
</body>
</html>
<script>
function f(){
//getElementById()：根据id属性获取元素对象
let d1 = document.getElementById("d1");
alert(d1)
}
</script>
2.2 getElementByTagName()
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="d1">这是一个div</div>
<div id="d2">这是一个div</div>
<div id="d3">这是一个div</div>
<button onclick="f()">点击</button>
</body>
</html>
<script>
//getElementByTagName() 根据标签名获取元素对象们 返回数组
function f(){
let d1 = document.getElementsByTagName("div")
for(let i=0;i<d1.length;i++){
alert(d1[i])
}
}
</script>
2.3 getElementByClassName()
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div class="c1">这是一个div</div>
<div class="c1">这是一个div</div>
<div class="c1">这是一个div</div>
<button onclick="f()">点击</button>
</body>
</html>
<script>
//getElementByClassName() 根据class属性获取对象们 返回数组
function f(){
let d1 = document.getElementsByClassName("c1")
for(let i=0;i<d1.length;i++){
alert(d1[i])
}
}
</script>
2.4 getElementByName()
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div name="c1">这是一个div</div>
<div name="c1">这是一个div</div>
<div name="c1">这是一个div</div>
<button onclick="f()">点击</button>
</body>
</html>
<script>
//getElementByClassName() 根据name属性获取对象们 返回数组
function f(){
let d1 = document.getElementsByName("c1")
for(let i=0;i<d1.length;i++){
alert(d1[i])
}
}
</script>
2.5 parentElement
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div name="c1">
<span id="s1">这是span</span>
</div>
<button onclick="f()">点击</button>
</body>
</html>
<script>
//parentElement(属性):子元素对象. parentElement 获取父元素对象
function f(){
let s1 = document.getElementById("s1")
let d1 = s1.parentElement;
alert(d1)
}
</script>
3.Element元素的增删改
3.1 createElement()
3.2 appendChild()
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#d1{
width: 100px;
height: 100px;
border: 1px solid red;
}
</style>
</head>
<body>
<div id="d1">
</div>
<button onclick="f()">点击</button>
</body>
</html>
<script>
function f(){
/* 创建span元素 */
let span = document.createElement("span");
/* 添加文本内容 */
span.innerText="你是大帅哥！！！！！";
/*得到父类的元素对象*/
let div1 = document.getElementById("d1");
/* 将创建的对象添加到父元素中 */
div1.appendChild(span);
}
</script>
3.3 removeChild()
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#d1{
width: 100px;
height: 100px;
border: 1px solid red;
}
</style>
</head>
<body>
<div>
<span id="d2">123</span>
</div>
<button onclick="f()">点击</button>
</body>
</html>
<script>
function f(){
let span = document.getElementById("d2")
let div = span.parentElement;
/* 删除子元素 */
div.removeChild(span);
}
</script>
3.4 replaceChild()
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<select id="s1">
<option>默认</option>
<option>北京</option>
<option id="o1">南京</option>
</select>
<button onclick="f()">点击</button>
</body>
</html>
<script>
function f(){
let option = document.createElement("option");
option.innerText="杭州";
let s1 = document.getElementById("s1")
let o1= document.getElementById("o1")
s1.replaceChild(option,o1)
}
</script>
4.Attribute属性的操作
4.1 添加属性
4.2 删除属性
4.3 获取属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<a id="a1" href="https://www.baidu.com">点击去百度</a>
<button onclick="f()">获取属性</button>
<button onclick="f2()">删除属性</button>
<button onclick="f3()">添加属性</button>
</body>
</html>
<script>
function f(){
let a1 = document.getElementById("a1")
/* 获取属性值 getAttribute(属性名)*/
let value = a1.getAttribute("href")
alert(value)
}
function f2(){
let a1 = document.getElementById("a1")
/*删除指定属性 removeAttribute(属性名) */
a1.removeAttribute("href")
}
function f3(){
let a1 = document.getElementById("a1")
/* 添加属性 setAttribute(属性名,属性值) */
a1.setAttribute("href","https://www.baidu.com")
}
</script>
4.4 添加样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<span id="s1">这是一个span标签</span>
<button onclick="f()">添加样式</button>
</body>
</html>
<script>
function f(){
let s1 = document.getElementById("s1")
s1.style.color="red"
}
</script>
4.5 添加指定样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.div1{
width: 100px;
height: 100px;
border: 1px solid red;
}
</style>
</head>
<body>
<div>这是一个div</div>
<div>这是一个div</div>
<div>这是一个div</div>
<div>这是一个div</div>
<div>这是一个div</div>
<div>这是一个div</div>
<button onclick="f()">加样式</button>
</body>
</html>
<script>
function f(){
let divs = document.getElementsByTagName("div");
for(let i=0;i<divs.length;i++){
/* divs[i].className="div1" */
divs[i].setAttribute("class","div1")
}
}
</script>
5.Text文本操作
5.1 innerText()
5.2 innerHTML()
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#div1{
width: 200px;
height: 200px;
border: 1px solid red;
}
p{
color: red;
}
</style>
</head>
<body>
<div id="div1"></div>
<button onclick="f()">添加文本</button>
</body>
</html>
<script>
function f(){
let div = document.getElementById("div1")
div.innerText="我是div"
/* innerText 添加文本内容 不会解析标签 */
/* div.innerText="<p>这是一个p标签</p>" */
div.innerHTML="这是HTML的文本"
innerHTML 添加文本内容 解析标签
div.innerHTML="<p>这是一个p标签</p>"
}
</script>
6.JavaScript事件
6.1 事件介绍
事件指的就是某些组件执行完某些操作后会触发某些代码的执行。
6.2 常用事件
6.3 了解事件
6.4 绑定事件
方式一：
<button onclick="f()">添加文本</button>
//案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
密码：<input type="text" onchange="f2()" id="pwd"/>
<span id="s1" hidden="hidden">密码格式不对</span>
<button>提交</button>
</body>
</html>
<script>
function f2(){
let input = document.getElementById("pwd")
var s1 = document.getElementById("s1")
let pwdvalue = input.value;
if(pwdvalue.length<6){
s1.removeAttribute("hidden")
s1.style.color="red"
}else{
s1.setAttribute("hidden","hidden")
}
}
</script>
方式二：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div{
width: 400px;
height: 200px;
border: 1px solid red;
}
</style>
</head>
<body>
<div id="d1">
</div>
<button onclick="f()">在div中添加输入框并且添加内容改变事件</button>
</body>
</html>
<script>
function f(){
let input = document.createElement("input")
input.setAttribute("type","text")
input.onchange=function(){
alert(1)
}
let d1 = document.getElementById("d1")
d1.appendChild(input)
}
</script>
转载：https://blog.csdn.net/weixin_44524687/article/details/117037009
查看评论