day13DOM
1.回顾
2.DOM获取节点
2.1获取子节点
-
父元素.children 获取父元素下所有的元素节点
-
父元素.childNodes 获取父元素下所有的节点(元素节点 文本节点 注释节点)
2.2获取父节点
-
子节点.parentNode 获取直接父元素
-
子节点.offsetparent 获取最近定位父元素 如果没有最近定位父元素则是获取body
2.3获取首尾节点
-
兼容问题
1.怎么兼容方法 window.getComputedStyle() 判断该方法是否存在
if(window.getComputedStyle){//方法存在 标准浏览器
getComputedStyle(标签).样式名
}else{//IE低版本浏览器
标签.currentStyle.样式名
}
2.怎么兼容属性 ||短路情况 || 一真为真
如果第一个条件为true 第二个条件不执行
如果第一个条件为false 第二个条件执行
标准浏览器的语法 || IE低版本的语法
-
获取首节点
-
标准浏览器：父元素.firstElementChild
-
IE低版本：父元素.firstChild
-
-
获取尾节点
-
标准浏览器：父元素.lastElementChild
-
IE低版本：父元素.lastChild
-
2.4获取兄弟节点
-
获取上一个兄弟节点
-
标准浏览器：当前参考节点.previousElementSibling
-
IE低版本：当前参考节点.previousSibling
-
-
获取下一个兄弟节点
-
标准浏览器：当前参考节点.nextElementSibling
-
IE低版本：当前参考节点.nextSibling
-
var li = document.getElementById("box");
// 获取上一个兄弟节点
// 标准浏览器：当前参考节点.previousElementSibling IE低版本：当前参考节点.previousSibling
var a = li.previousElementSibling || li.previousSibling;
console.log(a);
// 获取下一个兄弟节点
// 标准浏览器：当前参考节点.nextElementSibling IE低版本：当前参考节点.nextSibling
var b = li.nextElementSibling || li.nextSibling;
console.log(b);
3.DOM操作节点
3.1追加节点
-
创建元素节点 document.createElement("标签名称")
-
创建文本节点 document.createTextNode(文本内容)
-
追加节点：父节点.appendChild(子节点);
<ul>
<li>1</li>
<li>2</li>
</ul>
<script>
// 父节点.appendChild 直接在父节点末尾追加
var ul = document.getElementsByTagName("ul")[0];
// 1.创建元素节点 document.createElement("元素名称")
var li = document.createElement("li");// <li></li>
// 2.创建文本节点 document.createTextNode(添加的文本内容)
// var text = document.createTextNode("新增加的2")
// console.log(li, text);
// 3.将文本节点追加到元素节点中 父节点.appendChild
// li.appendChild(text);
// 直接给li添加文本内容
li.innerHTML = "新增加的2"
// 4.将li节点追加到ul中
ul.appendChild(li);
</script>
3.2插入节点
-
语法：父元素.insertBefore(插入的新节点,参考节点)
-
作用：在参考节点之前插入一个新的节点
// 1.插入节点：父元素.insertBefore(插入的新节点,参考节点)
// 创建新的节点
var newLi = document.createElement("li");
newLi.innerHTML = "新的内容";
oul.insertBefore(newLi, li[2])
3.3删除节点
-
删除节点：节点.remove() 删除节点本身 存在兼容问题，不支持IE浏览器
-
删除子节点：父节点.removeChild(子节点) 删除子节点
// 2.删除节点：节点.remove() 删除节点本身 存在兼容问题 oul.remove(); // 删除子节点：父节点.removeChild(子节点) 删除子节点 oul.removeChild(li[2])
3.4替换节点
-
语法：父元素.replaceChild(新的节点,要替换的节点)
-
作用：替换成新的节点
// 3.替换节点
// 父元素.replaceChild(新的节点,要替换的节点)
var oDiv = document.createElement("div");
oDiv.innerHTML = "这是div标签"
oul.replaceChild(oDiv, li[2]);
3.5复制节点
-
被复制的节点.cloneNode(Boolean值)
-
参数
-
false 默认值 只复制标签
-
true 复制标签和标签内容
-
// 4.复制节点 // 被复制的节点.cloneNode(Boolean值) //false 默认值 只复制标签 true 复制标签和标签内容 var a = li[2].cloneNode(true); console.log(a); oul.appendChild(a);
4.DOM操作属性节点
-
获取：getAttribute(属性名)
-
设置：setAttribute(属性名,属性值)
-
删除：removeAttribute(属性名)
==可以操作所有的属性==
<body>
<div a="123" class="box" id="wrap"></div>
<script>
/*
之前操作的属性：
固有属性： 标签.属性名 特殊：class需要写成className
自定义属性： div.a 无法获取
DOM操作属性(可以操作所有的属性)
获取：getAttribute(属性名)
设置：setAttribute(属性名,属性值)
删除：removeAttribute(属性名)
*/
var oDiv = document.getElementsByTagName("div")[0];
//获取属性
console.log(oDiv.getAttribute("class"));//"box"
console.log(oDiv.getAttribute("id"));//"wrap"
console.log(oDiv.getAttribute("a"));//"123"
// 设置属性
oDiv.setAttribute("class", "box1")
oDiv.setAttribute("id", "wrap1")
oDiv.setAttribute("a", "456")
// 删除属性
oDiv.removeAttribute("class");
oDiv.removeAttribute("a");
</script>
</body>
5.操作表格节点
-
表格节点.tHead 表头
-
表格节点.tBodies 获取主体部分 获取到的是一个主体集合
-
表格节点.tFoot 表尾
-
表格节点.rows 获取所有的行
-
oTable.tBodies[0].rows[0].cells 列： 必须通过行获取
6.操作表单节点
-
表单元素.name
<body>
<form action="">
<input type="text" name="name1">
<input type="password" name="pass">
<input type="checkbox" name="check1">
<input type="radio" name="sex">男
<input type="radio" name="sex">女
<input type="file" name="file1" id="">
<input type="submit" value="提交">
</form>
<script>
var oForm = document.getElementsByTagName("form")[0];
// DOM获取表单元素 表单元素.name
console.log(oForm.name1);
// 如果多个name值相同 获取到的是一个集合
console.log(oForm.sex);
console.log(oForm.file1);
</script>
</body>
7表单事件和方法
7.1input的事件
-
onfocus 获取焦点的时候触发
-
onblur 失去焦点的时候触发
-
onchange 当输入框的内容和上一次内容不一致的时候触发
-
oninput 当输入框的内容发生改变的时候触发 实时触发
-
onselect 当选中输入框中的内容时触发
<script>
var oinput = document.getElementsByTagName("input")[0]
// input框的事件
// 1.input.onfocus 获取焦点的时候触发
oinput.onfocus = function () {
console.log("获取焦点")
}
// 2.input.onblur 失去焦点的时候触发
oinput.onblur = function () {
console.log("失去焦点")
}
// 3.input.onchange 当输入框的内容和上一次内容不一致的时候触发
oinput.onchange = function () {
console.log("onchange")
}
// 4.input.oninput 当输入框的内容发生改变的时候触发 实时触发
oinput.oninput = function () {
console.log("oninput");
console.log(this.value)
}
// 5.input.onselect 当选中输入框中的内容时触发
oinput.onselect = function () {
console.log("选中")
}
</script>
7.2form的事件
-
onsubmit input表单的type类型为submit button按钮可以触发
-
onreset input表单的type类型设置为reset
<body>
<form action="javascript:void(0)">
<input type="text">
<input type="file">
<input type="submit" value="提交">
<input type="reset" value="重置">
<!-- <button>提交</button>
<button>重置</button> -->
</form>
<script>
var oForm = document.getElementsByTagName("form")[0]
// 1.onsubmit input表单的type类型为submit button按钮可以触发
oForm.onsubmit = function () {
console.log("提交")
}
// 2.onreset input表单的type类型设置为reset
oForm.onreset = function () {
console.log("重置")
}
// 事件：由某个动作触发的 方法：函数 主动去调用某个动作
</script>
</body>
7.3表单中的方法
-
input元素.focus() 获取焦点
-
input元素.blur() 失去焦点
-
form元素.submit() 提交 提交是默认提交本页面
-
form元素.reset() 重置
<body>
<form action="">
<input type="text" placeholder="请输入姓名" name="name1">
</form>
<p>获取焦点</p>
<p>失去焦点</p>
<p>提交</p>
<p>重置</p>
<script>
var oForm = document.getElementsByTagName("form");
var oP = document.getElementsByTagName("p");
// 1.点击第一个p标签 让input输入框获取焦点
oP[0].onclick = function () {
//input元素.focus()
oForm[0].name1.focus();
}
oP[1].onclick = function () {
//input元素.blur()
oForm[0].name1.blur();
}
oP[2].onclick = function () {
//form元素.submit() 提交是默认提交本页面
oForm[0].submit()
}
oP[3].onclick = function () {
//form元素.reset()
oForm[0].reset()
}
</script>
</body>
3万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
