HTML 基础
HTML 基础
HTML 标签
HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
HTML 标签通常是成对出现的,标签对中的第一个标签是开始标签，第二个标签是结束标签。
内嵌元素
1.不会换行,内嵌元素可以嵌套内嵌元素，不能嵌套块级元素，
2.不能设置宽高，img 除外
span 标签
a 标签 超文本链接标签
img 图片标签
块级元素
1.独立占据一整行，内部既可以嵌套内嵌元素，又可以嵌套块级元素
2.p 元素和 h 元素除外，但是他们可以嵌套内嵌元素，不能嵌套块级元素（内容块级元素，内容块级不能包含布局块级元素）
3.可以设置宽高
h 标题标签
p 段落标签
ul 无序列表
ol 有序列表
div 标签
table 表格标签
form 表单标签
DOM 节点
每个 HTML 标签是一个元素节点，包含在 HTML 元素中的文本是文本节点，每一个 HTML 属性是一个属性节点。
获取节点
通过 id 查找 HTML 元素
通过类名查找 HTML 元素
通过标签名查找 HTML 元素
var myElement = document.getElementById("intro");//id
var x = document.getElementsByClassName("intro");//类名
var x = document.getElementsByTagName("p");//标签名
创建节点
var child = document.createElement("p");
添加节点
在添加节点之前，需要先创建节点
var parent = document.getElementById("box");
// 创建节点
var child = document.createElement("p");
var textNode = document.createTextNode("创建节点");
// 添加节点
child.appendChild(textNode);
// 添加节点
parent.appendChild(child);
删除节点
var parent = document.getElementById("box");
var child = document.getElementById("child1");
parent.removeChild(child);
插入节点
父节点.insertBefore(新节点，插入在哪个节点的前方)
兄弟节点.after/before(新节点)
insertBefore/Before 在兄弟元素前插入
after 在兄弟元素后插入
1.insertBefore
var parent=document.getElementById("box");
var child1=document.getElementById("child1");
var newDiv = document.createElement("div");
parent.insertBefore(newDiv, child1);
2.before
var child1 = document.getElementById("child1");
var newDiv = document.createElement("div");
child1.before(newDiv);
替换内容
父节点.replaceChild(新节点，被替换的旧节点)
var parent = document.getElementById("box");
var newDiv = document.createElement("div");
var textNode = document.createTextNode("替换原本内容");
newDiv.appendChild(textNode);
var child1 = document.getElementById("child1");
parent.replaceChild(newDiv, child1);
复制节点
要复制的节点.cloneNode(布尔值)
true:复制自己+所有的子节点(默认浅克隆)
false:只复制自己，不包含子节点(深克隆)
var parent = document.getElementById("box");
var newClone = parent.cloneNode(false);
var clone = document.getElementById("clone");
parent.insertBefore(newClone, clone);
事件
冒泡
事件冒泡：最精准的元素上，逐渐往上
先执行按钮上的，其次执行div上的，最后执行body上的
<body onclick="showMsg3()">
<div onclick="showMsg2()">
<button onclick="showMsg()">按钮</button>
</div>
</body>
<script>
function showMsg() {
alert("BUTTON");
}
function showMsg2() {
alert("div");
}
function showMsg3() {
alert("body");
}
</script>
捕获
事件捕获：从上层元素，往最精准的元素
先执行body上的，其次执行div上的，最后按钮执行上的
<body onclick="showMsg3()">
<div onclick="showMsg2()" id="div1">
<button onclick="showMsg()" id="btn">按钮</button>
</div>
</body>
<script>
var div1 = document.getElementById("div1");
var btn = document.getElementById("btn");
document.body.addEventListener(
"click",
showMsg3,
true
); /*true-捕获 false-冒泡，默认冒泡*/
div1.addEventListener("click", showMsg2, true);
btn.addEventListener("click", showMsg, true);
function showMsg() {
alert("BUTTON");
}
function showMsg2() {
alert("div");
}
function showMsg3() {
alert("body");
}
鼠标事件
onclick -->鼠标单击
onDblClick -->鼠标双击
onmousedown -->鼠标按下
onmouseup -->鼠标弹起
onmousemove --> 鼠标移动
onmouseout --> 鼠标移出
onmouseover -->鼠标移入
键盘事件
onkeyup -->按键弹起
onkeydown -->键盘按下
onkeypress --> 键盘按下弹起
注意：
onkeypress 在英文、数字、功能键被触发
焦点事件
onfocus -->获取焦点
onblur -->失去焦点
页面事件
window.onload-->页面加载
window.onresize -->窗口改变事件
window.onscroll -->滚动条事件
window.onload = function () {
console.log("页面加载");
};
window.onresize = function () {
console.log("窗口改变事件");
};
window.onscroll = function () {
console.log("滚动条事件");
};