JavaScript（十三）-EW帮帮网

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("节点名称") 创建元素节点
- 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 点击提交按钮触发
form.onreset 点击重置按钮触发

如何阻止表单提交

action属性设置为Javascript:void(0)
在form标签事件中加 return false

 // 2.form标签的事件
        oForm.onsubmit = function(){
            // 在事件里面阻止提交
            // return false;
            console.log("表单的提交")
        }
        oForm.onreset = function(){
            console.log("表单的重置")

        }

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
prompt
- 用法：prompt(“提示内容”，默认值)
- 作用：弹出一个带有输入框的提示框用户可以点击确定和取消点击确定返回输入框中的值点击取消返回null

本文含有隐藏内容，请开通VIP 后查看

JavaScript（十三）