DOM 文档对象模型 document object model
获取元素
getElementsByTagName
getElementsByClassName
getElementById
querySelector querySelectorAll
get和query系列有什么区别
get系列动态获取
query系列静态获取
1.获取节点
1.1获取父节点
- 子元素.parentNode 获取直接父元素
- 子元素.offsetParent 获取最近定位父元素 如果没有最近定位父元素则是获取body
1.2获取子节点
- 父元素.children 获取父元素下的元素节点
- 父元素.childNodes 获取所有的子节点
- 判断节点类型 节点.nodeType
- 元素节点 1
- 属性节点 2
- 文本节点 3
- 注释节点 8
- 获取节点的名称 节点.nodeName
- 元素节点 元素名称大写
- 文本节点 #text
- 注释节点 #comment
- 操作节点的内容(文本节点 注释节点) 节点.nodeValue
- 获取 节点.nodeValue 对元素节点没有用 所以获取的值是null
- 设置 节点.nodeValue = 值
- 判断节点类型 节点.nodeType
1.3获取首尾和兄弟节点
- 兼容问题
1.方法兼容
判断该方法是否存在 判断window.getComputedstyle
if(window.getComputedStyle){ //标准浏览器
}else{//IE低版本浏览器
}
2.属性兼容 || 一真为真
|| 短路运算
如果第一个条件为false 第二个条件执行
如果第一个条件为true 第二个条件不执行
var a = 1;
var b = 10;
var c = --a || --b;// 0 || 9 a=0 b=9 c=9
console.log(a,b,c); // 0 9 9
var a = 2;
var b = 10;
var c = --a || --b; // c= 1 || --b a = 1 c=1 b = 10
console.log(a,b,c);// 1 10 1
标准浏览器 IE浏览器
标准浏览器的语法 || IE浏览器的语法
1.3.1获取首尾节点
- 标准浏览器 父元素.firstElementChild
- IE浏览器 父元素.firstChild
var lastLi = list.lastElementChild || list.lastChild;
lastLi.style.backgroundColor = "pink"
1.3.2获取尾结点
- 标准浏览器 父元素.lastElementChild
- IE浏览器 父元素.lastChild
var lastLi = list.lastElementChild || list.lastChild;
lastLi.style.backgroundColor = "pink"
1.3.3获取上一个兄弟节点
- 标准浏览器 参考节点.previousElementSibling
- IE浏览器 参考节点.previousSibling
var currentLi = document.getElementById("list");
var prevLi = currentLi.previousElementSibling || currentLi.previousSibling
prevLi.style.backgroundColor = "teal";
1.3.4获取下一个兄弟节点
- 标准浏览器 参考节点.nextElementSibling
- IE浏览器 参考节点.nextSibling
var currentLi = document.getElementById("list");
var nextLi = currentLi.nextElementSibling || currentLi.nextSibling;
nextLi.style.backgroundColor = "green"
2.操作节点
2.1追加节点
- 创建节点
- document.createElement(“节点名称”) 创建元素节点
- doucument.createTextNode(“文本内容”) 创建文件节点
- 追加节点
- 父元素.appendChild(子节点)
2.2删除节点
-
参考节点.remove()
- 删除当前节点 存在兼容问题
var list = document.getElementsByTagName("ul")[0]; // 1.参考节点.remove() 删除本身 存在兼容问题 不支持IE浏览器 console.log(list)
-
父元素.removeChild(子节点)
- 删除父元素下的子节点
// 2.父节点.removeChild(子节点) var oli = document.getElementById("list"); // list.removeChild(oli)
2.3插入节点
- 父元素.insertBefore(插入的新节点,参考位置)
<script>
var oUl = document.getElementsByTagName("ul")[0];
var oLi = document.getElementsByTagName("li");
// 1.插入节点 父元素.insertBefore(要插入的节点,参考位置)
var createLi = document.createElement("li");
createLi.innerHTML = "这是新的内容";
oUl.insertBefore(createLi,oLi[3])
</script>
2.4替换复制节点
- 替换节点
// 替换节点
// 1.替换节点 父元素.replaceChild(新节点,要替换的旧节点)
var oUl = document.querySelector("ul");
var oLi = document.querySelector("#list");
// 2.创建新节点
var newLi = document.createElement("li");
newLi.innerHTML = "这是新的节点"
// 3.替换节点
oUl.replaceChild(newLi,oLi);
- 复制(克隆)节点
// 复制(克隆)节点 参考节点.cloneNode(Boolean值) true复制节点和节点内容 false只复制节点(默认值)
var oLi = document.querySelector("li");
var newLi = oLi.cloneNode(true);
oUl.appendChild(newLi)
3.操作属性节点
3.1之前操作属性节点
- 固有属性
- 获取 标签.属性名 特殊class需要写成ClassName
- 设置 标签.属性名 = 值
- 自定义属性
- 设置
- 第一种 直接在标签上添加自定义属性 可以在结构中看到 但是无法获取
- 第二种 通过js设置自定义属性 结构上看不到 但是可以获取
- 设置
3.2DOM方法操作属性节点
- 获取 节点.getAttribute(属性名)
- 设置 节点.setAttribute(属性名,属性值)
- 删除 节点.removeAttribute(属性名)
<script>
var oDiv = document.querySelector("div");
//getAttribute(属性名) 固有属性和自定义属性都可以获取
console.log(oDiv.getAttribute("class"));//"box"
console.log(oDiv.getAttribute("id"));//"wrap"
console.log(oDiv.getAttribute("a"));//"这是a标签"
// setAttribute(属性名,属性值) 固有属性和自定义属性都可以设置
oDiv.setAttribute("class", "box1");
oDiv.setAttribute("id", "wrap1")
oDiv.setAttribute("a", "aaaa")
// removeAttribute(属性名) 固有属性和自定义属性都可以删除
oDiv.removeAttribute("class");
oDiv.removeAttribute("a");
</script>
注意:DOM方法操作节点可以操作固有属性和自定义属性
4.操作表格节点
- 以下方法是快速获取表格中的节点
- table.thead 获取thead表头
- table.tBodies 获取tbody主体 获取到的是一个集合
- table.tFoot 获取tfoot表尾
- table.row 获取table中的所有行
- tables.rows[下标].cells 获取table中该行所对应的列
<script>
var oTable = document.querySelector("table");
console.log(oTable.tHead);//获取thead表头
console.log(oTable.tBodies);//获取tbody主体
console.log(oTable.tFoot);//获取tfoot表尾
console.log(oTable.rows);//获取table中的所有行
console.log(oTable.tBodies[0].rows);// 获取tbody中的所有行
// 注意:cells(列)需要通过rows(行)获取
console.log(oTable.cells);// undefined
console.log(oTable.tBodies[0].cells);// undefined
console.log(oTable.rows[0].cells)
</script>
5.操作表单节点
5.1获取表单节点
- form.name值 获取到对应的表单元素
- 注意:如果name的值相同 则是获取到一个集合
<script>
// 1.获取表单元素 form元素.name名称 获取到对应的表单元素
var oForm = document.querySelector("form");
console.log(oForm.name1);
console.log(oForm.pas);
console.log(oForm.check);
// 注意:如果name的值相同 则是获取到一个集合
console.log(oForm.name2)
</script>
5.2表单中的事件
5.2.1input标签事件
- input.onfocus 输入框获取焦点
- input.onblur 输入框获取焦点
- input.onchange 当输入框内容发生改变的时候触发,失去焦点的时候才会进行触发,只要本次值和上次值内容不一样才会触发
- input.oninput 当输入框内容发生改变的时候触发 实时触发该事件
- input.onselect 当选中输入框中的内容的时候触发
// 输入框获取焦点
ipt1.onfocus = function () {
console.log("获取焦点了")
}
// 输入框获取焦点
ipt1.onblur = function () {
console.log("失去焦点")
}
// 当输入框内容发生改变的时候触发 当内容发生改变并且失去焦点的时候才会触发
ipt1.onchange = function () {
console.log("内容发生了改变")
}
// 当输入框内容发生改变的时候触发 实时触发该事件
ipt1.oninput = function () {
console.log("内容发生了实时改变")
}
// 当选中输入框中的内容的时候触发
ipt1.onselect = function () {
console.log("选中了该内容")
}
5.2.2form标签事件
- form.onsubmit 点击提交按钮触发
- input标签的type类型为submit 或者button按钮 才可以触发该事件
- form.onreset 点击重置按钮触发
- input标签的type类型为reset 才可以触发该事件
如何阻止表单提交
- action属性设置为Javascript:void(0)
- 在form标签事件中加 return false
// 2.form标签的事件
oForm.onsubmit = function(){
// 在事件里面阻止提交
// return false;
console.log("表单的提交")
}
oForm.onreset = function(){
console.log("表单的重置")
}
5.3表单中的方法
- input.focus(); 输入框获取焦点方法
- input.blur(); 输入框失去焦点方法
- input.select(); 选中输入框的元素
- form.submit() 提交表单
- form.reset() 重置表单
6.BOM
6.1什么是BOM
- BOM 浏览器对象模型 Browser Object Model 主要是针对浏览器进行操作 BOM给我们提供了很多工具方法,可以帮助我们快速操作浏览器
- window对象是整个BOM中的顶级对象 window对象包括下面的二级对象,其中二级对象中最特殊是document对象,document对象标识html节点 由document对象衍生出整个DOM
![](BOM结构图.png)
6.2 window对象中的方法
6.2.1系统对话框
window对象的系统对话框共有四个方法 都是window对象的方法 调用的时候可以写成window.xxxx(),也可以省略window 直接写xxxx()
-
alert
- 用法:alert(“提示信息”)
- 作用: 弹窗提示用户指定的提示信息
- 注意:阻塞性弹窗 同步执行 一次只能提示1个
-
console.log
- 用法:console.log(“输入内容”)
- 作用:在控制台中打印指定内容
- 注意:可以同时输出多个,每个输出内容用逗号隔开
-
confirm
- 用法:confirm(“提示内容”)
- 作用:弹出一个带有确定和取消按钮的提示框 用户可以选择确定和取消,点击确定返回值是true 点击取消返回值false
var res = window.confirm("你晚上要吃饭吗") console.log(res);
-
prompt
- 用法:prompt(“提示内容”,默认值)
- 作用:弹出一个带有输入框的提示框 用户可以点击确定和取消 点击确定返回输入框中的值 点击取消返回null
var a = window.prompt("请输入一个数字",10); console.log(a);