2021-11-06 dom补充

H5自定义属性的目的：是为了保存并使用数据，有些数据可以保存到页面中而不用保存到数据库中。

自定义属性获取是通过getAttribute('属性')获取。但是有些自定义属性很容易引起歧义，不容易判断是元素的内置属性还是自定义属性。

设置H5自定义属性

H5规定自定义属性data-开头作为属性名并且赋值，比如<div data-index='1'></div>

获取H5自定义属性

1、兼容性获取element.getAttribute('data-index')          （最常用）

2、H5新增element.dataset.index   或者  element.dataset['index']          ie11才开始支持

获取元素通常使用两种方式：

1、利用DOM提供的方法获取元素

document.getElementByld()

document.getElementsByTagName()

document.querySelector等

2、利用节点层级关系获取元素

利用父子兄节点关系获取元素。

逻辑性强，但是兼容性稍差。

以上两种方式都可以获取元素，我们以后都会使用，但是节点操作更简单。

一、节点概述

网页中所有内容都是节点，（标签、属性、文本、注释等），在DOM中，节点使用node来表示。

HTML DOM树中所有节点均可以通过javascript进行访问，所有HTML元素（节点）均可被修改，也可以创建或者删除。

一般地，节点至少拥有nodeType（节点类型）、nodeName（节点名称）、nodeValue（节点值）三个基本属性。在实际开发中，节点操作主要是元素节点。

节点主要是通过层次关系来获取元素的，利用DOM树可以把节点划为不同的层级关系，常见的是父子兄层级关系。元素1，属性2，文本3

1、父级节点

得到的是离元素最近的父级节点。node.parentNode

2、子节点

parentNode.childNodes返回包含指定节点的子节点的集合，该集合为即时更新的集合。注意:返回值包含指定节点的子节点的集合，包括元素节点、文本节点等。如果只想获得里面的元素节点，则需要专门处理，一般不使用childNodes。代码如下：

 var ul= document.querySelector('ul')

        for (var i=0;i<ul.childNodes.length;i++){

            if (ul.childNodes[i]==1){

                console.log(ul.childNodes[I])

            }

        }

3、利用children来获取子元素

4、兄弟节点

node.nextSibling返回当前元素的下一个兄弟节点，找不到则返回null。同样，也是包含所有节点。

5、节点操作

a、创建节点

document.creatElement('tagName')

b、添加节点

node.appendChild(child)    node是父级，child是子级    后面追加元素，类似于数组中的push。

node.insertBefore(child,指定元素)，显示在前面。

c、删除节点

node.removeChild(child)方法从DOM中删除一个节点，返回删除的节点。

6、创建和删除留言案例

补充内容：阻止链接跳转需要添加javascript:void(0);，或者javascript:;

（1）获取元素

（2）注册事件

btn.οnclick=function(){

        if (text.value==''){

            alert('您没有输入内容')

            return false

        }else{

            //创建元素

            var li =document.createElement('li')

            //有了li，赋值

            li.innerHTML=text.value

            //添加元素

            ul.insertBefore(li,ul.children[0])

            //删除元素  删除的是当前链接的li,

            var as =document.querySelectorAll('a')

            for (var i=0;i<as.length;i++) {

                as[i].οnclick=function(){

                    ul.removeChild(this.parentNode)

                }

            }

        }

    }

7、DOM重点核心

文档对象类型，简称DOM，是W3C组织推荐的处理可扩展标记语言（HTML或XML）的标准编程接口。

W3C已经定义了一系列的DOM接口，通过这些DOM接口，可以改变网页内容、结构和样式。

对于JavaScript，为了能够使JavaScript操作HTML,JavaScript就有了一套自己的dom编程接口

对于HTML，dom使得html形成一个树，文档（整个页面），元素（页面中所有的标签），节点（页面中所有的内容）

关于dom操作，我们主要针对元素的操作，包括增、删、改、查、属性操作、事件操作

创建：document.write

innerHTML

createElement

增：appendChild

insertBefore

删：removeChild

改：主要修改dom的元素属性，

        修改元素属性：src,href,title

        修改普通元素内容：innerHTML,innerText

        修改表单元素：value,type,disabled

        修改元素样式：style,className

查：H5提供的新方法：querySelector,querySelectorAll

        利用节点操作元素获取;父（parentNode),子（children)等。

属性操作：主要针对自定义属性

        setAttribute:设置dom的属性值

        getAttribute:得到dom的属性值

事件操作：给元素注册事件，采取  事件源.事件类型=事件处理程序

onclick  鼠标点击左键触发等。