DOM学习详细笔记
DOM
DOM document Object Model 文档对象模型
// 整个html文档,会保存一个文档对象document
// console.log( document ); // 获取当前文档的对象
查找标签
直接查找
document.getElementsByTagName("标签名")
document.getElementById("id值")
document.getElementsByClassName("类名")
1、方法的返回值是dom对象还是数组
2、document对象可以是任意dom对象，将查询范围限制在当前dom对象
导航查找标签
css选择器
document.querySelector("css选择器") //根据css选择符来获取查找到的第一个元素，返回标签对象（dom对象）
document.querySelectorAll("css选择器"); // 根据css选择符来获取查找到的所有元素,返回数组
绑定事件??????
静态绑定
click
动态绑定
在js中通过代码获取元素对象,然后给这个对象进行后续绑定。
试一试
一个元素本身可以绑定多个不同的事件, 但是如果多次绑定同一个事件,则后面的事件代码会覆盖前面的事件代码
-
多个标签的事件绑定
- 111
- 222
- 333
- 444
- 555
this.innerhtml我们也可以进行修改，假设在点击之后列表的中的元素要改为“ivanlee”+原内容for(var i=0;i经过点击之后
操作标签
<标签名 属性1=“属性值1” 属性2=“属性值2”……>文本
文本操作
ivanee
还可以有双击鼠标事件：
ele.ondblclick = function () {
this.innerHTML = "ivanlee";
innerhtml里存放了一个新的超链接标签，双击可以出发此链接
}
当双击鼠标之后，页面显示变为一个带有超链接标签的ivanlee，此时点击就可以进入百度搜索栏
但是如果换做是innertext则不会有任何的反应
ele.ondblclick = function () {
this.innertext = "ivanlee";
innerhtml里存放了一个新的超链接标签，双击可以出发此链接
}
innerHTML和innertext的区别1） innerHTML设置或获取标签所包含的HTML+文本信息(从标签起始位置到终止位置全部内容，包括HTML标签，但不包括自身)
2） outerHTML设置或获取标签自身及其所包含的HTML+文本信息（包括自身）
3） innerText设置或获取标签所包含的文本信息（从标签起始位置到终止位置的内容，去除HTML标签，但不包括自身）
4） outerText设置或获取标签自身及其所包含的文本信息（包括自身）
innerText和outerText在获取的时候是相同效果，但在设置时，innerText仅设置标签所包含的文本，而outerText设置包含包括标签自身在内的文本。
value操作
像input标签，select标签以及textarea标签是没有文本的，但是显示内容由value属性决定
css样式操作
Hello world!
属性操作
并不是所有属性都可以像value那样操作。
class属性操作
elementNode.className
elementNode.classList.add
elementNode.classList.remove
练习 京东tab页面切换
ivanlee
- 商品介绍
- 规格与包装
- 售后保障
- 商品评价
- 商品介绍...
- 规格与包装...
- 售后保障...
- 商品评价...
节点操作
// 创建节点：
document.createElement("标签名")
// 插入节点
somenode.appendChild(newnode) // 追加一个子节点（作为最后的子节点）
somenode.insertBefore(newnode,某个节点) // 把增加的节点放到某个节点的前边
// 删除节点
somenode.removeChild()：获得要删除的元素，通过父元素调用删除
//替换节点
somenode.replaceChild(newnode, 某个节点);
hello JS!
hello world
-
添加和插入节点
var add_btn = document.querySelector(".add_btn"); var c1 = document.querySelector(".c1"); var c2 = document.querySelector(".c2"); add_btn.onclick = function () { // 创建节点 var ele = document.createElement("img"); //ele.src = "https://img2.baidu.com/it/u=3312360479,315254076&fm=253&fmt=auto&app=138&f=JPEG?w=600&h=400" console.log(ele); // 添加节点 c1.appendChild(ele); 第一种 c1.insertBefore(ele, c2) 第二种 }
第一种是插入到最后
第二种是插入到某个子节点的前面
-
删除节点
del_btn.onclick = function () { // 删除子节点 c1.removeChild(c2); }; -
替换节点
replace_btn.onclick = function () { // 创建替换节点 var ele = document.createElement("img"); //ele.src = "https://img2.baidu.com/it/u=1613029778,1507777131&fm=26&fmt=auto&gp=0.jpg" console.log(ele); // 替换节点 c1.replaceChild(ele, c2); }
常用事件
onload
ivanlee
window.onload的方法解决了js在从上到下编译的时候，无法先解析body里面的内容，后解析