JS DOM

最新推荐文章于 2024-03-14 19:32:21 发布

Joker_ZzzZ_

最新推荐文章于 2024-03-14 19:32:21 发布

阅读量184

点赞数

文章标签： javascript 前端 servlet

本文链接：https://blog.csdn.net/Joker_ZzzZ_/article/details/126773090

版权

DOM  文档对象模型  document object model
获取元素
getElementsByTagName 
getElementsByClassName 
 getElementById 
querySelector  querySelectorAll 
get和query系列有什么区别 
get系列动态获取 
query系列静态获取

1.获取节点

1.1获取父节点

子元素.parentNode 获取直接父元素
子元素.offsetParent 获取最近定位父元素如果没有最近定位父元素则是获取body

1.2获取子节点

var lastLi = list.lastElementChild || list.lastChild;
lastLi.style.backgroundColor = "pink"

父元素.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

1.3.3获取上一个兄弟节点

var currentLi = document.getElementById("list");
var nextLi = currentLi.nextElementSibling || currentLi.nextSibling;
nextLi.style.backgroundColor = "green"

标准浏览器参考节点.previousElementSibling
IE浏览器参考节点.previousSibling
var currentLi = document.getElementById("list");
var prevLi = currentLi.previousElementSibling || currentLi.previousSibling
prevLi.style.backgroundColor = "teal";
1.3.4获取下一个兄弟节点
标准浏览器参考节点.nextElementSibling
IE浏览器参考节点.nextSibling

2.操作节点

2.1追加节点

创建节点

document.createElement("节点名称") 创建元素节点
doucument.createTextNode("文本内容") 创建文件节点

追加节点

父元素.appendChild(子节点)

2.2删除节点

var list = document.getElementsByTagName("ul")[0];
// 1.参考节点.remove() 删除本身存在兼容问题不支持IE浏览器
console.log(list)

参考节点.remove()
- 删除当前节点 ==存在兼容问题==

父元素.removeChild(子节点)

// 2.父节点.removeChild(子节点)
var oli = document.getElementById("list");
// list.removeChild(oli)

删除父元素下的子节点

2.3插入节点

父元素.insertBefore(插入的新节点,参考位置)

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);

3.2DOM方法操作属性节点

复制(克隆)节点
// 复制(克隆)节点参考节点.cloneNode(Boolean值) true复制节点和节点内容 false只复制节点(默认值)
var oLi = document.querySelector("li");
var newLi = oLi.cloneNode(true);
oUl.appendChild(newLi)
3.操作属性节点

3.1之前操作属性节点
固有属性
- 获取标签.属性名 ==特殊class需要写成ClassName==
- 设置标签.属性名 = 值
自定义属性
- 设置
  - 第一种直接在标签上添加自定义属性可以在结构中看到但是无法获取
  - 第二种通过js设置自定义属性结构上看不到但是可以获取
获取节点.getAttribute(属性名)
设置节点.setAttribute(属性名,属性值)
删除节点.removeAttribute(属性名)

==注意：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 才可以触发该事件