JavaScript学习笔记——DOM节点的CRUD

目录

  • 节点(Node)
    • 元素节点的获取
      • 获取父节点
      • 获取兄弟节点
        • 1. 下一个节点 | 下一个元素节点
        • 2. 上一个节点 | 上一个元素节点
        • 3. 补充:获得任意一个兄弟节点
      • 获取子节点
        • 获取单个子节点
        • 1. 第一个子节点 | 第一个子元素节点
        • 2. 最后一个子节点 | 最后一个子元素节点
        • 获取所有子节点
    • 属性节点的获取
      • 获取属性值
      • 获取所有属性
      • 检查属性
      • 对象属性
    • 文本节点的获取
    • DOM节点的增删改(CUD)
      • 创建元素节点
      • 插入节点
      • 删除节点
      • 克隆节点
    • 文档的加载
      • onload 事件:

节点(Node)

节点: 构成 HTML 网页的最基本单元。

常见节点

  • 文档节点
  • 元素节点
  • 属性节点
  • 文本节点

DOM节点层次

树形结构:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GCFKFRZd-1590412835591)(http://i.imgur.com/tY1ymHt.png)]

元素节点的获取

  • getElementById 只能获取Document中的元素
  • getElementsByTagName
  • getElementsByClassName
  • getElementsByTagName
  • getElementsByClassName
var div1 = document.getElementById("box1"); // 通过 id 获取 一个 元素节点

var arr1 = document.getElementsByTagName("div"); // 通过 标签名 获取 元素节点数组,所以有s

var arr2 = document.getElementsByClassName("hehe"); // 通过 类名 获取 元素节点数组,所以有s
document.getElementsByTagName("div1")[0];    //取数组中的第一个元素

document.getElementsByClassName("hehe")[0];  //取数组中的第一个元素

补充

getElementById() 只有在作为 document 的方法时才能起作用,而在DOM中的其他元素下无法生效。这是因为 ID 值在整个网页中必须保持唯一。因此没有必要为这个方法创建所谓的 “局部” 版本。

获取父节点


<div id="d1">
    <div id="d2">
    div>
div>

parentNode

节点.parentNode
var son = document.getElementById("d2")
var parent = son.parentNode
console.log(parent)	// 

parentElement

节点.parentElement
var son = document.getElementById("d2")
var parent = son.parentElement
console.log(parent)	// 

获取兄弟节点


<ul id="u1">
    <li class="l1">li>
    <li class="l2">li>
    <li class="l3">li>
ul>

1. 下一个节点 | 下一个元素节点

下一个兄弟节点 = 节点.nextElementSibling || 节点.nextSibling

nextSibling

var bro1 = document.getElementsByClassName("l2")
//getElementsByClassName返回值为伪数组
var bro2 = bro1[0].nextSibling
console.log(bro2)	// #text

nextElementSibling

var bro1 = document.getElementsByClassName("l2")
//getElementsByClassName返回值为伪数组
var bro2 = bro1[0].nextElementSibling
console.log(bro2)	// 
  • 2. 上一个节点 | 上一个元素节点

    前一个兄弟节点 = 节点.previousElementSibling || 节点.previousSibling
    

    previousSibling

    var bro1 = document.getElementsByClassName("l2")
    var bro2 = bro1[0].previousSibling
    console.log(bro2)	// #text
    

    previousElementSibling

    var bro1 = document.getElementsByClassName("l2")
    var bro2 = bro1[0].previousElementSibling
    console.log(bro2)	// 
  • 3. 补充:获得任意一个兄弟节点

    节点自己.parentNode.children[index]
    
    var bro1 = document.getElementsByClassName("l1")
    var bro2 = bro1[0].parentNode.children[0]
    console.log(bro2)	// 
  • 获取子节点

    
    <ul id="u1">
        <li class="l1">li>
        <li class="l2">li>
        <li class="l3">li>
    ul>
    

    获取单个子节点

    1. 第一个子节点 | 第一个子元素节点

    第一个子元素节点 = 节点.firstElementChild || 节点.firstChild
    

    firstChild

    var parent = document.querySelector("#u1")
    var son = parent.firstChild
    console.log(son)	// #text
    

    firstElementChild

    var parent = document.querySelector("#u1")
    var son = parent.firstElementChild
    console.log(son)	// 
  • 2. 最后一个子节点 | 最后一个子元素节点

    最后一个子元素节点 = 节点.lastElementChild || 节点.lastChild
    

    lastChild

    var parent = document.querySelector("#u1")
    var son = parent.lastChild
    console.log(son)	// #text
    

    lastElementChild

    var parent = document.querySelector("#u1")
    var son = parent.lastElementChild
    console.log(son)	// 
  • 获取所有子节点

    childNodes

    子节点数组 = 父节点.childNodes
    
    var parent = document.querySelector("#u1")
    var sons = parent.childNodes
    console.log(sons)	// NodeList(7) [text, li.l1, text, li.l2, text, li.l3, text]
    

    children(使用最多)

    子元素数组 = 父节点.children
    
    var parent = document.querySelector("#u1")
    var sons = parent.children
    console.log(sons)	// HTMLCollection(3) [li.l1, li.l2, li.l3]
    

    属性节点的获取

    属性节点是建立在元素节点下的节点,一般只获取属性节点的值

    
    <ul id="app" class="active">
    	<li>1li>
    	<li>2li>
    

    获取属性值

    var appNode = document.querySelector("#app")
    
    //Element.getAttributeNode(attrName)	(获取属性节点)
    var idAttr = appNode.getAttributeNode("id")
    var val1 = idAttr.appNode
    console.log(val1)	//app	(麻烦)
    
    //Element.getAttribute(attributeName)	(获取属性节点的值)
    var val2 = appNode.getAttribute("id")
    console.log(val)	//app
    
    //Element.attrName						(获取属性节点的值)
    var val3 = appNode.id	//appNode["id"]
    var val4 = appNode.className	//appNode["className"]
    console.log(val3)	//app(不能拿自定义节点,只能拿预定义节点)
    console.log(val4)
    

    获取所有属性

    var appNode = document.querySelector("#app")
    
    console.log(appNode.getAttributeNames())
    console.log(appNode.attributes)
    

    检查属性

    var appNode = document.querySelector("#app")
    console.log(appNode.hasAttribute("id"))	//ture
    console.log(appNode.hasAttribute("abc"))	//false
    

    对象属性

    var appNode = document.querySelector("#app")
    console.log(appNode.id)
    console.log(appNode.name)
    console.log(appNode.className)
    
    appNode.classList.add("active3")
    console.log(appNode.className)
    appNode.classList.remove("active")
    console.log(appNode.className)
    var firstClass = appNode.classList.item(0)
    console.log(firstClass)
    
    //classList.toggle 有就删除,没有添加
    appNode.classList.toggle("abc")
    console.log(appNode.className)
    appNode.classList.toggle("abc")
    console.log(appNode.className)
    var flag = appNode.classList.contains("damu")
    console.log(flag)
    

    文本节点的获取

    
    <ul id="app" class="active">
    	<li>1li>
    	<li>2li>
    
    var appNode = document.getElementById("app")
    console.log(appNode.innerText)
    console.log(appNode.textContent)
    
    console.log(appNode.innerHTML)	//不常用
    

    DOM节点的增删改(CUD)

    创建元素节点

    	新的标签(元素节点) = document.createElement("标签名");
    
        var a1 = document.createElement("li");   //创建一个li标签
        var a2 = document.createElement("adbc");   //创建一个不存在的标签
        
    	console.log(a1);
        console.log(a2);
    

    插入节点

    方式1:

    	父节点.appendChild(新的子节点)
    

    解释:父节点的最后插入一个新的子节点

    方式2:

    	父节点.insertBefore(新的子节点, 作为参考的子节点)
    

    解释:

    • 在参考节点插入一个新的节点
    • 如果参考节点为null,那么它将在父节点里面的最后插入一个子节点

    删除节点

    格式:

    	父节点.removeChild(子节点)
    

    解释:用父节点删除子节点

    删除自己的方法:

    	node1.parentNode.removeChild(node1)
    

    克隆节点

    格式:

    	要复制的节点.cloneNode([false])
    	要复制的节点.cloneNode(true)
    

    解释:

    • 不带参数/false:只复制节点本身,不复制子节点
    • 带参数true:即复制节点本身,也复制其所有的子节点

    文档的加载

    ​ 浏览器在加载一个页面时,是按照自上向下的顺序加载的,读取到一行就运行一行。如果将script标签写到页面的上边,在代码执行时,页面还没有加载,页面没有加载DOM对象也没有加载,会导致无法获取到DOM对象。

    onload 事件:

    ​ onload 事件会在整个页面加载完成之后才触发。为 window 绑定一个onload事件,该事件对应的响应函数将会在页面加载完成之后执行,这样可以确保代码执行时所有的DOM对象已经加载完毕了。

    
    <html>
      <head>
        <meta charset="UTF-8" />
        <title>title>
        <script type="text/javascript">
          window.onload = function() {
            var son = document.getElementById("d2")
            var parent = son.parentElement
            console.log(parent)
            };
          };
        script>
      head>
      <body>
        <div id="d1">
            <div id="d2">
            div>
        div>
      body>
    html>
    

    你可能感兴趣的:(JavaScript)