javaScript的DOM操作 DOM概念查找所有元素创建和删除元素设置页面中的属性值attribute改变页面中的所有CSS样式改变页面中所有的class的操作事件

57 阅读 0 评论 38 点赞

我是靠谱客的博主单薄枕头，最近开发中收集的这篇文章主要介绍javaScript的DOM操作 DOM概念查找所有元素创建和删除元素设置页面中的属性值attribute改变页面中的所有CSS样式改变页面中所有的class的操作事件，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

DOM概念

DOM（Document Object Model）是一套对文档的内容进行抽象和概念化的方法。
当网页被加载时，浏览器会创建页面的文档对象模型
在HTML当中，一切都是节点
文档节点(document对象)：代表整个文档
元素节点(element 对象)：代表一个元素（标签）
文本节点(text对象)：代表元素（标签）中的文本
属性节点(attribute对象)：代表一个属性，元素（标签）才有属性
注释是注释节点(comment对象)
整个html文档就是一个文档节点。所有的节点都是Object　
JavaScript的用途：
1.能够找到页面中的所有HTML元素
2.动态创建和删除元素
3.能够设置页面中的所有属性值
4.能够改变页面中的所有 CSS 样式
5.能够对页面中的所有事件做出反应

查找所有元素

直接查找

1.根据ID获取一个标签 Element

document.getElementById
var tet=document.getElementById("1");
tet.innerText;只显示文本内容
tet.innerText="只要你敢不懦弱，凭什么我们要错过"; #进行修改

2.根据class属性获取注意是Elements。生成的是列表，就算只有一个标签，也是以列表的形式存在的

tet=document.getElementsByClassName("content");
tet.innerText;#undefined
tet是个列表，查看文本内容更要有索引
tet；#[div.content, div.content]
tet[1].innerText="只要你敢不懦弱，凭什么我们要错过"; #进行修改

3.根据标签名获取标签合集

document.getElementsByTagName
tet[0];
#<p>明明就</p> 标签和内容均显示
tet[0].innerText; #"明明就"

间接查找

首先要找到一个标签，然后对其进行父标签和子标签的查找

parentElement
父节点标签元素
children
所有子标签
firstElementChild
第一个子标签元素
lastElementChild
最后一个子标签元素
nextElementSibling
下一个兄弟标签元素
previousElementSibling
上一个兄弟标签元素

var tet=document.getElementsByClassName("content");
tet[0].parentElement;
tet[0].children;
#查到的子标签是数组
tet[0].children[0].innerText;

DOM代码放置位置

DOM相关代码放在script中，script放到body里面的最后位置

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<title>DOM相关的代码应该放在哪个位置</title>
<!--<script>-->
<!--// 执行到这里的时候 DOM树还没有渲染完成!!!-->
<!--var d1Ele = document.getElementById("d1");-->
<!--alert(d1Ele);-->
<!--</script>-->
</head>
<body>
<div id="d1">我是id为d1的标签!</div>
<script>
// 我们通常把涉及到DOM操作的JS代码都放在body标签的最下面!!!
var d1Ele = document.getElementById("d1");
alert(d1Ele.innerText);
</script>
</body>
</html>

View Code

创建和删除元素

创建节点

createElement(标签名)
var divEle = document.createElement("div");
var app1=document.createElement("span");
app1.innerText="当海不蓝，飞起的梦想都变为尘埃"

添加节点

添加节点：先创建一个节点。然后查找一个标签，将创造的节点放到标签内。
一定要说明创建的节点放到哪个标签内
1.追加一个子节点（作为最后的子节点）
somenode.appendChild(newnode)；
var divele=document.createElement("div"); #创建一个标签 <div></div>
divele.innerText="烽烟起，寻爱似浪淘沙"; 添加内容
var d2ele=document.getElementById("2"); #得到父标签，在id为2的标签中添加divele这个标签
d2ele.appendChild(divele);
d2ele;
<div id="2">
<div>烽烟起，寻爱似浪淘沙</div>
</div>
2.把增加的节点放到某个节点的前边。
somenode.insertBefore(newnode,某个节点);

删除节点

获得要删除的元素，通过父元素调用删除。
removeChild(要删除的节点)
d2ele.removeChild(divele);

替换节点

somenode.replaceChild(newnode, 某个节点);
var app2=document.createElement("span");
app2.innerText="是我的海";
app.replaceChild(app2,app1);

设置页面中的属性值attribute

<img src="images/1.jpg" class="image-box" >
var app=document.getElementsByTagName("img")[0];

1.获取属性值

app.getAttribute("src") #images/1.jpg
app.getAttribute("class") #image-box

2.设置属性值

如果属性存在就修改，属性不存在，就增加
app.setAttribute("src","images/3.jpg");
#images/3.jpg
app.setAttribute("id","ruby")

3.清除：

divEle.removeAttribute("age")

4.自带的属性还可以直接.属性名来获取和设置

app.id;#2 获取自身的属性 app.id="3" 修改

改变页面中的所有CSS样式

直接对标签内的属性进行操作：
var tet=document.getElementById("1"）;
tet.style.backgroudColor="bule" 该变圆的颜色
tet.style.height="200px" 该变高和宽
tet.style.width="200px"
修改完属性<div id="1" class="c1"></div> 变为 <div id="1" class="c1" style=“backgroud-Color”：“bule”></div>
将改变后的属性都加到标签内，一直生效。直到页面关闭

改变页面中所有的class的操作

1.className
查看某个节点中class的值
2.classList.remove(cls)
删除指定类
3.classList.add(cls)
添加类
4.classList.contains(cls)
存在返回true，否则返回false
5.classList.toggle(cls)
存在就删除，否则添加

<div id="1" class="content test con"></div>
首先找到要操作的标签：var app=document.getElementById("1");
1.app.className;
#"content test con" 查看
app.classList; #["content", "test", "con", value: "content test con"]
2.app.classList.remove("content"); 删除
app.className; #"test con"
3.app.classList.add("jerd"); 添加
app.className; #"test con jerd"

在网页上显示一个圆。通过js控制变颜色

通过增加class和移除class实现。本来时粉色，变颜色，只需要加个c2类即可
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
height:50px;
width:50px;
border-radius: 50%;
background-color: #f807ff;
}
.c2{
background-color: #15eea1;
}
</style>
</head>
<body>
<div id="1" class="c1"></div>
<!--用开关来控制-->
<input type="button" id="b1" value="开关" οnclick="f1();"> #点击开关，就相当于调用了f（）
<script>
function f1(){
var tet=document.getElementById("1");
tet.classList.toggle("c2")
#c2不存在就创建，就会变色，存在的话就删除，恢复之前按的颜色
}
</body>
</html>
1.在js中的操作：
var tet=document.getElementById("1"）; 找到圆这个标签
tet.classList.add("c2"); 添加c2 执行后就会变色
tet.classList.remove("c2"); 恢复之前的颜色
2.在页面上添加一个开关，有开关控制

View Code

获取form表单的值 value

适用于form表单中的：.input select textarea
当用户在网页上输入信息=时，能获得这个值
<form action="">
<label >用户名：
<input type="text" id="i1">
</label>
app=document.getElementById("1")
console.log(app.value);

事件

用户点击某个 HTML 元素时启动一段 JavaScript。下面是一个属性列表，这些属性可插入 HTML 标签来定义事件动作。

onclick
当用户点击某个对象时调用的事件句柄。
onfocus
元素获得焦点。
// 练习：输入框
onblur
元素失去焦点。
应用场景：用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证.
onchange
域的内容被改变。
应用场景：通常用于表单元素,当元素内容被改变时触发.（select联动）
onmouseout
鼠标从某元素移开。
onmouseover
鼠标移到某元素之上。
onselect
在文本框中的文本被选中时发生。
onsubmit
确认按钮被点击，使用的对象是form。

ondblclick
当用户双击某个对象时调用的事件句柄。
onkeydown
某个键盘按键被按下。
应用场景: 当用户在最后一个输入框按下回车按键时,表单提交.
onkeypress
某个键盘按键被按下并松开。
onkeyup
某个键盘按键被松开。
onload
一张页面或一幅图像完成加载。
onmousedown
鼠标按钮被按下。
onmousemove
鼠标被移动。

绑定方式

#方式一
<div id="d1" οnclick="changeColor(this);">点我</div>
<script>
function changeColor(ths) {
ths.style.backgroundColor="green";
}
</script>
#方式二
<div id="d2">点我</div>
<script>
var divEle2 = document.getElementById("d2");
divEle2.onclick=function () {
this.innerText="呵呵";
}
</script>

点击时圆变颜色

'''
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<title>事件相关</title>
<style>
.c1 {
height: 100px;
width: 100px;
background-color: red;
border-radius: 50%;
}
.c3 {
height: 100px;
width: 100px;
background-color: blue;
border-radius: 50%;
}
.c2 {
background-color: green;
}
</style>
</head>
<body>
<!--方式1-->
<div class="c1" οnclick="f1(this);"></div>
<!--方式2-->
<div class="c3"></div>
<input type="button" value="开关">
<script>
function f1(xx) {
//
xx就是当前标签，为了理解，可以将xx打印出来，查看

console.log(xx);
xx.classList.add("c2");
}
// 第二种绑定事件的方式 得到的是数组，要用索引
var c3Ele = document.getElementsByClassName("c3")[0];
c3Ele.onclick=function () {
// this指向的是当前操作的标签--> c3Ele
this.classList.add("c2");
}
</script>
</body>
</html>
'''

View Code

获取焦点和失去焦点

'''
鼠标在输入框时，默认值消失，不在输入框时有默认值
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<title>搜索框</title>
</head>
<body>
<div>
<form action="" >
<label >
<input type="text" id="i1" value="小米商城">
</label>
</form>
</div>
<script>
// 找到input标签
var i1Ele = document.getElementById("i1");
// 绑定事件
// 绑定的是获取焦点的事件
i1Ele.οnfοcus=function () {
// 获取焦点之后要做的事儿
// 把值变成空
this.value="";
};
// 再绑定一个失去焦点的事件
i1Ele.οnblur=function () {
// this指向的是当前触发事件的input标签
this.value="小米商城";
}
</script>
</body>
</html>
'''

View Code

定时器实例

'''
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<title>定时器示例</title>
</head>
<body>
<input type="text" id="i1">
<input type="button" id="stop" value="停止">
<input type="button" id="start" value="开始">
<script>
var i1Ele = document.getElementById("i1");
var t;
// 把当前的时间显示在input框里面
// 获取当前时间
//
var now = new Date();
//
var nowStr = now.toLocaleString();
// 显示在input框中
// 找到input标签
//
var i1Ele = document.getElementById("i1");
//
i1Ele.value=nowStr;

function nowTime() {
// 获取当前时间
var now = new Date();
i1Ele.value = now.toLocaleString();
}
// 一秒钟设置一次
t = setInterval(nowTime, 1000);
var stopEle = document.getElementById("stop");
stopEle.onclick=function () {
// 点击停止按钮,让定时器结束
clearInterval(t);
// 清除的是定时器对象,但是t变量还有值
t = undefined;
// 手动将t变量置为undefined

};
var startEle = document.getElementById("start");
startEle.onclick=function () {
// 点击开始按钮,让定时器跑起来
// 判断:如果原来就有定时器,就不设置新的定时器了
if (t === undefined){
// 没有设置定时器
t = setInterval(nowTime, 1000);
}
}
</script>
</body>
</html>
'''

View Code

省市联动

'''
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<title>select联动</title>
</head>
<body>
<select name="" id="s1">
<option value="">请选择省</option>
</select>
<select name="" id="s2">
<option value="">请选择市</option>
</select>
<script>
var s1Ele = document.getElementById("s1");
//要有数据
var data = {"河北省": ["廊坊", "邯郸"], "北京": ["朝阳区", "海淀区"], "山东": ["威海市", "烟台市"]};
// 把data对象里面的key都放到s1下面
for (var i in data){
var ele=document.createElement("option");
s1Ele.appendChild(ele);
ele.value=i;
//
将key值添加到新建的标签中
ele.innerText=i;
}
s1Ele.onchange =function() {
//
console.log(s1Ele.value)
//
法一：选择省后，查看市里面有没有值，有的话就给删掉。
var slE = document.getElementById("s2");
if (slE.children.length>1){
for (var j=slE.children.length-1;j>0;j--)
{
slE.removeChild(slE.children[j])
}
}
//
方法二：利用文本属性进行删除，可设置标签 slE.innerHTML为空，这样标签会全部删除
//
slE.innerHTML='<option value="">请选择市</option>';
//
根据相应的省，创建相应的市
var ret=s1Ele.value;
for (var a in data[ret]) {
var ele1 = document.createElement("option");
slE.appendChild(ele1);
ele1.innerText =data[ret][a];
}
}
// for循环取出key,生成option标签,添加到s1内部
// 给s1这个select绑定事件 --> onchange事件
//
s1Ele.οnchange=function () {
//
// 值发生变化之后要做的事儿
//
// 取到当前s1选中的值,去data中取对应的城市或区
//
// for循环,生成option标签,把它添加到s2中
//
//
}
</script>
</body>
</html>
'''