文章/答案/技术大牛

发布

社区首页 >专栏 >前端day13-JS(WebApi)学习笔记(attribute语法、DOM节点操作)

前端day13-JS(WebApi)学习笔记(attribute语法、DOM节点操作)

原创

帅的一麻皮

修改于 2020-04-20 04:10:29

3.2K00

代码可运行

文章被收录于专栏：前端与Java学习前端与Java学习

运行总次数：0

代码可运行

1-获取元素语法补充

重点掌握选择器获取,其他仅做了解

小技巧：如果API写的是Emement复数的形式，也就是后面加了s（Emements）那么它返回的就是一个伪数组否则就是单个对象，一般只有id才会是单个对象，其他方式获取（标签名类名）都是伪数组.

注意点:根据类名className获取元素存在浏览器兼容问题，IE8及以下不支持，一般很少使用。

1.1-innerText与innerHTML

作用完全不同(知识有些类似)
类似点：获取到的都是string类型字符串
innerText:获取元素文本
innerHTML:获取元素内容（文本+标签）

   <div id="box">我是班长
        <p>我是班长小迷妹</p>
   </div>
   <script>     
        var box = document.getElementById("box");

        //2.innertHTML:获取元素内容(包含标签与文本)
        console.log(box.innerHTML);
        //1.innerText:获取元素文本（包含子标签的文本）
        console.log(box.innerText);

        //覆盖原来的内容，innerText:会把所有的内容都当成文本，无法解析标签
        box.innerText = '<a>我是i连接</a><p>我是p</p>';
        //覆盖原来的内容，可以解析字符串中的标签，和document.write()一样动态给页面添加元素
        box.innerHTML = '<a>我是i连接</a><p>我是p</p>';  
    </script>

2-attribute语法学习

标签元素属性:
- (1)行内标准属性
- （2）行内自定义属性
- （3）js动态添加属性
- （4）行外属性
1.attribute方式
- 1.获取属性：getAttribute ( "aaa" )
  - 如果是类型直接使用calss，无需使用className，因为这种方式用的是字符串语法获取属性
- 2.设置属性: 元素.setAttribute('属性名',属性值);
- 3.删除属性：元素.removeAttribute('属性名');
- 用attribute方式设置的属性只能使用attribute方式来获取
2.注意点
- js点语法能获取到的属性：
  - （1）行内标准属性
  - （2）js点语法动态添加的自定义属性
- 不能获取到的属性：
  - (1)行内自定义属性
  - (2)行外属性
- getAttribute能获取到的属性：
  - （1）行内标准属性
  - （2）行内自定义属性
  - （3）setAttribute动态添加的属性
- 不能获取到的属性：
  - （1）js点语法动态添加的自定义属性
  - （2）行外属性
3.总结：js点语法操作属性与attribute语法操作属性场景(语义不同)
- 标准属性操作：使用js点语法（代码简洁）
- 自定义属性操作：用attribute（易读性更高）

<html lang="en">
<head>
    <title>Document</title>
    <style>
        .one {
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>
<body>
    <!--如果一个属性不是html中得属性，那么这个属性成为自定义属性-->
    <div id="div1" class="one" aaa='啊啊啊啊'></div>


    <script>
        //1.js点语法属性操作
        var div1 = document.getElementById("div1");
        console.log(div1.id); //div1
        div1.index = 1;
        console.log(div1.index); //1

        div1.setAttribute("age", 18);
        //自定义属性和setAttribut属性无法通过点语法获得
        console.log(div1.age); //undefined
        console.log(div1.aaa); //undefined

        //getAttribute可以获取行内标准属性和自定义属性
        console.log(div1.getAttribute("age")); //18
        console.log(div1.getAttribute("aaa")); //啊啊啊啊
        console.log(div1.getAttribute("class")); //one  //行内标准属性   类名直接class即可

        //行内标准属性可以用点语法获得
        console.log(div1.className); //one

        //2. attribute方式
        /*获取属性：  元素.getAttribute('属性名')
        添加属性：元素.setAttribute('属性名',属性值);
            * 用setAttribute方式添加只能用getAttribute获取
         删除属性： 元素.removeAttribute('属性名');
            * a.属性名属性值全部删除，更加彻底
            * b.点语法只能删除属性值，不能删除属性名
        总结：js点语法操作属性与attribute语法操作属性场景
        标准属性：点语法（简洁）
        自定义属性：attribute（代码易读性更高）
         */
        //不能获取
        console.log(div1.getAttribute("style.width")); //行外属性
        console.log(div1.getAttribute("index")); //js点动态添加的属性

        //添加属性
        div1.setAttribute("index", 3);
        console.log(div1);
        console.log(div1.index); //1
        console.log(div1.getAttribute("index")); //3

        div1.removeAttribute("index");
        console.log(div1.getAttribute("index"));//null
        
    </script>
</body>

</html>

3-DOM节点：网页一切内容皆节点

3.1-DOM节点介绍

1.什么是节点：在HTML文档中，一切皆节点（HTML文档本身、标签、属性、注释内容、文本）
2.什么是元素：元素在HTML中叫做标签，在JS的dom对象中称为元素（可以理解为标签的面向对象的叫法）
3.HTML标签属于节点的一种，叫做元素节点
4.节点三要素：
- 节点类型：标签、属性、注释、文本
- 节点名称：p、div、class（标签名）
- 节点的值：one（属性的值）
在JavaScript中，document这个对象大家一定很熟悉，哪怕是刚刚开始学习的新人，也会很快接触到这个对象。而document对象不仅仅是一个普通的JavaScript内置对象，它还是一个巨大API的核心对象，这个巨大的API就是DOM（Document Object Model），它将文档的内容呈现在JS面前，并赋予了JS操作文档的能力。
- DOM树体现着HTML页面的层级结构，学习中经常提到的父元素子元素的说法也是建立在树这种数据结构的基础之上的,而DOM文档树则包含文档中所有内容。

HTML页面中的所有内容都会体现在DOM文档树中，要理解这种结构，对构成它的每个节点就要先有了解。下面是DOM节点的基本类别，以及各自类别基本属性的值及简单介绍：

3.2-元素节点与属性节点

1.元素节点
- 类型 nodeTypoe:1
- 名称 nodeName：标签名大写
- 值 nodeValue ： null
2.属性节点
- 类型 nodeTypoe:2
- 名称 nodeName：属性名
- 值 nodeValue ：属性值

    <div class="one" id="box">我是一个div</div>
    <p class="one" id="p1">我是一个p</p>

    <script>
        //1.获取元素节点
        var box = document.querySelector("#box");
        var p1 = document.querySelector("#p1");

        //2.查看元素节点
        console.log(box.nodeType); //1 元素节点
        console.log(box.nodeName); //DIV
        console.log(box.nodeValue); //null

        console.log(p1.nodeType); //1元素节点
        console.log(p1.nodeName); //p
        console.log(p1.nodeValue); //null

        //3.获取到属性节点
        //这个只是单纯的获取class属性的值，不是获取属性节点
        console.log(box.getAttribute("class")); //one
        //查看box元素的所有属性节点
        console.log(box.attributes); //NamedNodeMap {0: class, 1: id, class: class, id: id, length: 2}

        //4.查看属性节点
        console.log(box.attributes[0].nodeType); //2 属性节点
        console.log(box.attributes[0].nodeName); //class
        console.log(box.attributes[0].nodeValue); //one
    </script>

3.3-文本节点与注释节点与文档节点

1.文本节点
- 类型 nodeTypoe:3
- 名称 nodeName：#text
- 值 nodeValue ：文本内容
2.注释节点
- 类型 nodeTypoe:8
- 名称 nodeName：#comment
- 值 nodeValue ：注释内容
3.文档节点
- 类型 nodeTypoe:9
- 名称 nodeName：#document
- 值 nodeValue ： null

    <ul id = "main">
        <!-- 这里是li标签注释 -->
        <li>
            111
            <a href="#">li111111</a>
            aaa
        </li>

        <li><a href="#">li222222</a></li>

        <li><a href="#">li333333</a></li>

    </ul>

    <script>
        //获取main元素节点
        var main = document.querySelector("#main");
        // var liList = document.querySelectorAll("#main li");
        //获取元素节点下的所有子节点(元素之间的空格部分可以看作一个没有内容的文本节点)
        var liList= main.childNodes;
        console.log(liList);//NodeList(9) [text, comment, text, li, text, li, text, li, text]

        //查看注释节点
        console.log(liList[1].nodeType);//8 注释节点
        console.log(liList[1].nodeName);//#comment
        console.log(liList[1].nodeValue);//这里是li标签注释
        //查看文本节点
        console.log(liList[2].nodeType);//3 文本节点
        console.log(liList[2].nodeName);//#text
        console.log(liList[2].nodeValue);// 空值 因为liList[2]为一个空格
        console.log(liList[3].childNodes);//li元素节点下的子节点 NodeList(3) [text, a, text]
        console.log(liList[3].childNodes[0].nodeType);//3 文本节点
        console.log(liList[3].childNodes[0].nodeName);//#text
        console.log(liList[3].childNodes[0].nodeValue);//   111
        //查看文档节点（文档节点就是document自己）
        console.log(document.nodeType);//9
        console.log(document.nodeName);//#document
        console.log(document.nodeValue);//null
    </script>

3.4-获取子节点与子元素

childNodes：获取子节点：（文本节点，注释节点，子元素节点）
- 细节：属性节点通过attribute来获取，一般用的不多
- 浏览器兼容问题：IE8及之前不包含非空文本
children：获取子元素：（元素节点）
- 浏览器兼容问题: IE8及之前包含注释节点

   <ul id="ul1">
        我是班长的小迷妹
        <!-- 我是暗恋班长的班花 -->
        <li>我是班长1</li>
        <li>我是班长2</li>
        <li>我是班长3</li>
        <li>我是班长4</li>
        <li>我是班长5</li>
    </ul>
    <script>
        var ul1 = document.querySelector('#ul1');

        //获取子元素:元素节点
        /* 
            谷歌火狐：元素节点
            IE8：包含注释和元素
        */
        console.log(ul1.children); //HTMLCollection(5) 


        //获取子元素节点:元素节点  文本节点  注释节点
        /* 
            谷歌火狐：  包含空文本
            IE8：  不包含空文本
        */
        console.log(ul1.childNodes); //NodeList(13)
    </script>

3.5-兄弟节点与兄弟元素

获取兄弟节点与兄弟元素

nextSibling：获取下一个节点 previousSibling：获取上一个节点
- IE8及之前：文本（不包含非空）、注释、元素
- 其他浏览器：文本（包含非空）、注释、元素

<ul id="ul1">
        我是班长的小迷妹
        <!-- 我是暗恋班长的班花 -->
        <li>我是班长1</li>
        <!-- svkhskvhb -->
        <li id="li2">我是班长2</li>666
        <li>我是班长3</li>
        <li>我是班长4</li>
        <li>我是班长5</li>
    </ul>
    <script>
        var ul1 = document.querySelector('#ul1');
        var li2 = document.querySelector('#li2'); //班长2
        //1.兄弟节点：元素、注释、文本
        //1.1获取上一个节点
        console.log(li2.previousSibling);//#text 是一个空字符

        //1.2获取下一个节点
        console.log(li2.nextSibling);//666

        //2.兄弟元素：元素
        //2.1获取上一个元素
        console.log(li2.previousElementSibling); //<li>我是班长1</li>

        //2.2获取下一个元素
        console.log(li2.nextElementSibling);//<li>我是班长3</li>
    </script>

3.6-第一个子节点与第一个子元素,最后一个节点与最后一个元素

1.firstChild : 第一个子节点(元素文本注释)
2.firstElementChild：第一个子元素节点
3.lastChild : 最后一个子节点(元素文本注释)
4.lastElementChild：最后一个子元素节点

他们的浏览器兼容问题与兄弟节点一致

   <ul id="ul1">
        我是班长的小迷妹
        <li>我是班长1</li>
        <!-- svkhskvhb -->
        <li id="li2">我是班长2</li>666
        <li>我是班长3</li>
        <li>我是班长4</li>
        <li>我是班长5</li>
        <!-- 我是暗恋班长的班花 -->
    </ul>

    <script>
        var ul1 = document.querySelector('#ul1');

        //1.获取第一个子节点(元素 文本  注释)
        console.log(ul1.firstChild); //我是班长的小迷妹
        //2.获取第一个子元素:元素
        console.log(ul1.firstElementChild); //<li>我是班长1</li>

        //3.获取最后一个子节点
        console.log(ul1.lastChild); //#text 空字符
        //4.获取最后一个子元素
        console.log(ul1.lastElementChild); //<li>我是班长5</li>
    </script>

==3.8-获取父节点==

parentNode:获取元素的父元素节点

细节：一个元素的父节点一定是一个元素，而不是（文本、注释、属性），只有元素才有子节点

  <ul id="ul1">
        我是班长的小迷妹
        <li>我是班长1</li>
        <!-- svkhskvhb -->
        <li id="li2">我是班长2</li>666
        <li>我是班长3</li>
        <li>我是班长4</li>
        <li>我是班长5</li>
        <!-- 我是暗恋班长的班花 -->
    </ul>
    <script>
        //获取元素的父节点： 子元素.parentNode
        var li2 = document.getElementById('li2');
        //获取元素的父节点一定是元素。 （因为只有元素节点才会有节点）
        console.log(li2.parentNode); //<ul id="ul1">
        console.log(li2.parentNode.parentNode); //body
        console.log(li2.parentNode.parentNode.parentNode); //html
        console.log(li2.parentNode.parentNode.parentNode.parentNode); //document
        console.log(li2.parentNode.parentNode.parentNode.parentNode.parentNode); //null
        
        //获取父元素节点
        console.log(li2.parentElement); //<ul id="ul1">
        //当父节点的nodeType不是1，即不是element节点的话，它的parentElement就会是null
        console.log(li2.parentElement.parentElement.parentElement.parentElement); //null
    </script>

4-dom增删改页面元素

4.1-创建元素三种方式介绍

1.document.write():慎用，可能会覆盖原本内容
- 解析字符串识别标签
2.innerHTML：创建元素过多时（100以内可以忽略），会损耗性能
- 解析字符串识别标签
- 直接赋值元素.innerHTML 会替换原本内容，如果不想替换使用 += 拼接
3.document.createElement()：dom推荐方式
- 动态创建一个dom对象（空标签，需要自己设置属性）在内存中
- 需要使用appendChild来添加到HTML
document.write():慎用，因为可能会覆盖原本的内容
- 覆盖内容的原理了解即可：编译器从上往下解析HTML的时候会形成一个文档流，这个文档流会在文档所有的HTML标签解析后关闭。不会覆盖的情况：如果在关闭这个文档流之前调用document.write()，则不会覆盖会覆盖的情况：如果在关闭文档流之后调用document.write()，会开启一个新的文档流，此时会把上一个文档流中的内容覆盖

4.2-添加子元素：appendChild()

appendChild()添加元素有三种情况

（1）如果是一个新的子元素，则默认会添加到最后
(2) 如果是一个已存在的子元素，相当于移动到最后面
（3）如果添加的元素有子元素，子元素也会一起移动到最后面

4.3-插入子元素：inertBefore()

insertBefore:插入子元素到指定位置

语法： 父元素.insertBefore(要插入的标签，插入到哪一个标签前面)
特点：与appendChildNode一致
- （1）如果是新元素则插入到指定位置
- （2）如果是已存在元素则移动到指定位置
- （3）如果元素有子元素，则子元素随着它一起移动
如果想插入到某元素后面，没有直接的api，可以先获取该元素的下一个元素，然后插入到下一个元素前面即可

4.4-替换子元素：replaceChild()

替换子元素：replaceChild() 语法：父元素.replaceChile(新元素,旧元素)
特点：
- 1.如果是新创建的元素，则直接替换
- 2.如果是已存在的元素（不论这个元素是自己的子元素还是别人的）会将新元素移动到旧元素位置，并且旧元素被移除
- 3.如果已存在的元素有子元素，则子元素会随着父元素一起替换