DOM
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 = 值
-
-
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("节点名称") 创建元素节点
-
document.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
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);
-
7.面试题
1-获取节点的方法有哪些 获取子节点 获取父节点 获取首尾和兄弟节点 2-获取、设置、删除属性节点 3-input标签的事件有哪些 分别有什么作用 4-form表单的事件有哪些 分别有什么作用 5-