1 Jun 18 DOM (JS)
Posted zhangyaqian
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了1 Jun 18 DOM (JS)相关的知识，希望对你有一定的参考价值。
# 图片太多，详细见link 以及文本
1 Jun 18
一、今日面试题
生成如下列表：[[0, 0, 0, 0, 0], [0, 1, 2, 3, 4], [0, 2, 4, 6, 8], [0, 3, 6, 9, 12]]
# 方式一: for 循环
list1 = []
for i in range(4):
tmp = []
for j in range(5):
tmp.append(j * i)
list1.append(tmp)
print(list1)
# 方式二：列表推导式（可以双层）
ret = [[i * j for j in range(5)] for i in range(4)]
print(ret)
二、DOM （Document Object Model）: DOM是一套对文档的内容进行抽象和概念化的方法。JS通过DOM就可以操作我的html页面（标签，标签css样式，页面上的事件）
1. HTML DOM树：HTML DOM模型被构造为对象的树
2. JS找标签
1. 直接查找（用的较广泛）
document.getElementById 根据ID获取一个标签
document.getElementsByClassName 根据class属性获取
document.getElementsByTagName 根据标签名获取标签合集
2. 间接查找
parentElement 父节点标签元素
children 所有子标签
firstElementChild 第一个子标签元素
lastElementChild 最后一个子标签元素
nextElementSibling 下一个兄弟标签元素
previousElementSibling 上一个兄弟标签元素
3. JS操作
1. 创建一个标签
document.createElement("div")
2. 设置标签的属性
1. 设置标签属性的两种方式：
1. d1Ele.setAttribute("id", "i1")
2. imgEle.src = "hlw.png" #对于img特有的src，可以直接.出来
2. 获取属性
divEle.getAttribute("age")
3. 删除属性
divEle.removeAttribute("age")
3. 将创建的标签追加到文档中
1. 在父标签内部追加新的标签(添加节点)
父标签.appendChild(新的标签)
2. 在父标签内部在某个子标签的前面插入新标签（添加节点）
父标签.insertBefore(新标签, 某个子标签)
3. 删除节点
removeChild(要删除的节点)
4. 替换节点
Somenode.replaceChild(newnode，某个节点)
4. 获取文档内容和设置文档内容
innerText --> 获取文本内容
innerText = "内容" --> 不认识HTML标签
innerHTML --> 获取所有内部文档内容
innerHTML = "内容" --> 可以认识HTML标签
5. 获取值操作（适用于input,select,textarea）
elementNode.value
6. 修改HTML样式
1. 直接修改样式#在文档中style后写修改样式
2. 通过class修改样式
className 获取所有样式类名（字符串）
classList.remove(cls) 删除指定类
classList.add(cls) 添加类
classList.contains(cls) 存在返回true，否则返回false
classList.toggle(cls) 存在就删除，否则添加
3. 指定CSS操作
obj.style.backgroundColor="red"
a. 对于没有中横线的CSS属性
obj.style.margin
obj.style.width
obj.style.left
obj.style.position
b. 对于含有中横线的CSS属性（中横线后面的第一个字母换成大写即可）
obj.style.marginTop
obj.style.borderLeftWidth
obj.style.zIndex
obj.style.fontFamily
6. 事件：有能力使HTML事件触发浏览器中的动作
1. 两种绑定事件的方式
方式一：
<div id>=‘di‘ onclick = ‘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>
2. 涉及到DOM操作的JS代码都应该放在body标签的最下面！！！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="d1">哈哈</div>
<script>
var d1Ele = document.getElementById("d1");
console.log(d1Ele);
d1Ele.innerText = "呵呵";
</script>. #放在body的最后面
</body>
</html>
3. this指的是出发当前事件的标签对象
4. 常用事件示例
1. onclick
2. onfocus和onblur
3. onchange
三、常用事件示例
1、onclick(单击事件示例)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1 {
height:200px;
width: 200px;
border-radius: 50%;
}
.bg-red {
background-color: red;
}
.bg-green {
background-color: green;
}
</style>
</head>
<body>
<input type="button" id="b1" value="switch" onclick="change();">
<input type="button" id="b2" value="SWITCH">
<div class="c1 bg-red"></div>
<script>
function change() {
var c1Ele = document.getElementsByClassName(‘c1‘)[0];
c1Ele.classList.toggle(‘bg-green‘)
}
var b2Ele = document.getElementById(‘b2‘);
b2Ele.onclick =() => {
change();
}
</script>
</body>
</html>
2、onclick（定时器）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="button" id="b1" value="start">
<input type="button" id="b2" value="stop">
<input type="text" id="i1">
<script>
var t;
function showTime() {
var now=new Date();
var i1Ele=document.getElementById("i1");
i1Ele.value = now.toLocaleString();
}
showTime();
var b1Ele = document.getElementById("b1");
b1Ele.onclick = function () {
if (!t){
t=setInterval(showTime,1000)
}
};
var b2Ele = document.getElementById("b2");
b2Ele.onclick = function () {
clearInterval(t);
console.log(t);
t=undefined;
};
</script>
</body>
</html>
3、onfocus onblur 输入框示例
第一种实现方式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="text" id="i1" value="haifeisi" onfocus="f(this);">
<input type="text" id="i2" value="latiao" onfocus="f(this);">
<script>
function f(ths) {
ths.value ="";
}
</script>
</body>
</html>
第二种实现方式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="text" id="i1" value="haifeisi" onfocus="f(this);">
<script>
var i1Ele=document.getElementById("i1");
i1Ele.onfocus= function () {
this.value ="";
}
i1Ele.onblur= function () {
this.value = "haifeisi";
}
</script>
</body>
</html>
4、onchange（联动）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<select name="" id="province">
<option>province:</option>
</select>
<select id="city">
<option>city:</option>
</select>
<script>
var s1Ele=document.getElementById("province");
var s2Ele=document.getElementById("city");
var data = {"上海": ["黄浦区", "静安区"], "北京": ["朝阳区", "海淀区"], "山东": ["威海市", "烟台市"]};
for (let k in data) {
console.log(k);
let tmp=document.createElement("option");
tmp.innerText =k;
s1Ele.appendChild(tmp);
}
s1Ele.onchange= function () {
s2Ele.innerHTML ="";
let p=document.createElement("option");
p.innerText ="city:";
s2Ele.appendChild(p);
console.log(this.value);
let province=this.value;
for (let i=0;i<data[province].length;i++){
let tmp = document.createElement("option");
tmp.innerText=data[province][i];
s2Ele.appendChild(tmp)
}
}
</script>
</body>
</html>
以上是关于1 Jun 18 DOM (JS)的主要内容，如果未能解决你的问题，请参考以下文章