重生前端之我在javascript敲代码（06-DOM操作）

一. 什么是DOM？

元素的对象和属性，以及访问它们的方法。换言之，HTML DOM 是关于如何获取、修改、添加或删除 HTML 元素的标准。

注意：DOM 是 Document Object Model（文档对象模型）的缩写。

二. DOM 节点

根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点：

• 整个文档是一个文档节点

• 每个 HTML 元素是元素节点

• HTML 元素内的文本是文本节点

• 每个 HTML 属性是属性节点

• 注释是注释节点

 <script>
        // 当浏览器加载html文件的时候，会创建一个document对象
        // document对象是浏览器提供的，专门用来操作当前页面
        // 把API理解为方法
        // 节点有点有哪些
        // HTML 文档中的所有内容都是节点：
        //     文档节点：表示整个文档
        //     元素节点：表示标签
        //  属性节点：表示标签的属性
        // 文本节点：表示标签中的文本内容（空格tab 这些都是文本节点）
        // 注释节点：表示注释
    </script>

 三.节点之间的关系(了解，知识点)

节点树中的节点彼此拥有层级关系，我们可以使用父（parent）、子（child）和同胞（sibling）等术语来描述这些关系。父节点拥有子节点。同级的子节点被称为同胞（兄弟或姐妹）。

• 在节点树中，顶端节点被称为根（root）

• 每个节点都有父节点、除了根（它没有父节点）

• 一个节点可拥有任意数量的子节点

• 同胞是拥有相同父节点的节点

四.获取元素节点

 <div id="main">
        <div class="box">
            <p>段落内容</p>
        </div> 
        <div class="box">
            <p>段落内容</p>
        </div>
         <div class="box">
            <p>段落内容</p>
        </div>
    </div>
    <script>
           // document对象是浏览器提供的，专门用来操作当前页面
        //    1.获取你要更新的元素
        // 获取元素
        // 通过id获取元素
        var box = document.getElementById('main')
        console.log('box',box)
        // 通过class去获取dom元素
        var smallbox = document.getElementsByClassName('box')
        // HTMLCollection 元素集合 得到是一个伪数组
        console.log('smallbox',smallbox)
        console.log('smallbox',smallbox[0])
        // 获取标签
        var p = document.getElementsByTagName('p')
        console.log('p',p)
        console.log('p',p[0])

还有可以获取到的特殊节点 

 <script>
        // 获取整个文档
        console.log(document.documentElement)
        // 获取body
        console.log(document.body)
        // 获取title
        console.log(document.title)
        document.title='我是新的标题'
    </script>

五. 修改节点

//1.修改元素内容
 <p class="box">段落内容</p> 
    <p class="box">段落内容</p> 
    <p class="box">段落内容</p>
    <script>
        // 需求：修改p标签中的内容
        // 1.获取p标签
        // document.getElementsByTagName('p')[0] 返回的是一个元素对象
        var p = document.getElementsByTagName('p')[0];
        console.log('p',p)
        // 2.修改p标签中的内容
        // 获取p标签的内容
        console.log(p.innerText)
        // p.innerText ='修改后的值'
        console.log(p.innerHTML)
        // p.innerHTML ='通过innnerHtml修改的值'
        // innerTex和innerHTML的区别
        // innerText:获取标签中的内容
        // innerHTML:获取标签中的内容,包括标签
        // p.innerText = '<h1>我是h1标签<h1>'
        // p.innerHTML = '<h1>我是h1标签<h1>'
        // 动态拼接内容
        p.innerText += '我是后拼上的内容'
    </script>

• innerText和innerHTML的区别

• 获取内容时的区别：

  innerText会去除空格和换行，而innerHTML会保留空格和换行

• 设置内容时的区别：

  innerText不会识别html，而innerHTML会识别。

 通过 HTML DOM，我们能够访问 HTML 元素的样式对象

//改变css样式 
<div class="box">
        我是stan
    </div>
    <script>
        // 需求我要把box里面的文字变成红色
        // 1.获取元素
        var box = document.getElementsByClassName('box')[0];
        // 2.修改样式
        console.log('box',box)
        box.style.color='red';
        // font-size
        box.style.fontSize='40px';
    </script>

//3.改变html属性 
<div id="box" class="classBox" title="我是标题">

    </div>
    <script>
        // 1.获取元素
        var box = document.getElementById('box');
        console.log(box.id)
        console.log(box.title)
        // 特殊的属性
        console.log(box.className)
        // 2.修改属性的值
        box.title= '我是修改后的值'
        box.title=''
        // 第二种通过getAttribute setAttribute
        console.log('通过方法获取属性值',box.getAttribute('id'))
        // 设置（修改）属性
        // box.setAttribute('id','newId')
        box.setAttribute('title','我是他通过方法设置的title')
        // removerAttribute删除属性
        box.removeAttribute('title')
    </script>

 <div id="box" >

    </div>
    <script>
       var box = document.getElementById('box');
        // 通过.的方法添加标签原本不具有的属性的时候是添加到dom对象上了而不是标签上
        box.aaa = '我是新添加的属性';
    //    通过setAttribute方法添加标签原本不具有的属性的时候是添加到标签上了
        box.setAttribute('bbb','我是bbb属性的值')
        console.log('box',box) 
    </script>

六. 操作HTML元素

6.1输出到文档

输入到文档就是我们之前讲过的  document.write

作用：可以将任意字符串插入在文档中。

 <script>
        document.write("hello world");
        document.write('<h1>哈哈</h1>')
    </script>

如下是详情照片，我们再回顾一下 

6.2这里再讲一个（旗帜法则）

<style>
        img {
            width: 600px;
            height: 800px;
        }
    </style>
</head>

<body>
    <img src="../img/秃子2.png" id="imgBox" alt="">
    <script>
        var img = document.getElementById('imgBox');
        var flag = 1;
        img.onclick = function () {
            if (flag == 1) {
                img.src = '../img/秃子2.png';
                flag = 2;
            } else if (flag == 2) {
                img.src = '../img/微信图片.jpg';
                flag = 3;
            } else if (flag == 3) {
                img.src = '../img/壁纸.jpg';
                flag = 1;
            }
        }
    </script>
</body>

简单理解来说就是，在放入页面的图片之中，你点击他的话能够切换为下一张图片 。如下所示。   

视频

6.3创建节点以及追加节点

方法：document.createElement(tagName)；

作用：根据标签名（tagName）创建新的 DOM 对象。

方法：document.createTextNode("文本");

作用：创建一个文本节点。

方法：parentElement.appendChild(newElement);

作用：追加到父元素内容的后面。

 <div></div>
    <!-- <p>
        <span>1</span>

    </p> -->
    <script>
        // 创建一个标签节点
        var p = document.createElement('p');
        console.log('p',p)
        // 创建一个文本节点
        // var text = document.createTextNode('hello world');
        // console.log('text',text)
        p.innerText = 'hello world';
        // 当前标签的尾部追加节点 
        // p.appendChild(text);
        document.body.appendChild(p);
    </script>

 6.4插入节点

方法：parentElement.insertBefore(newElement, targetElement)

作用：将新创建的元素（newElement）添加到目标元素（targetElement）前面

 <div class="box">
        <p class="pcon1">这是第一个p</p>
        <p class="pcon2">这是第二个p</p>
        <p class="pcon3">这是第三个p</p>
    </div>
    <script>
        // parentElement.insertBefore(newElement, targetElement)
        // newElement就是要插入的元素
        // targetElement目标元素
        var pcon2 = document.getElementsByClassName('pcon2')[0];//目标元素
        // 创建一个标签节点
        var sapn = document.createElement('span');
        sapn.innerText = '这是新插入的span';
        // 获取父元素
        var box = document.getElementsByClassName('box')[0];
        // 插入节点
        box.insertBefore(sapn, pcon2);

    </script>

 注意：没有inertAfter这个方法。

6.5替换节点

方法：parentElement.replaceChild(newElement, targetElement)

作用：使用新元素替换目标元素

被替换的节点将从文档树种移除，同时要插入的节点占据其位置。

 <div class="box">
        <p class="pcon1">这是第一个p</p>
        <p class="pcon2">这是第二个p</p>
        <p class="pcon3">这是第三个p</p>
    </div>
    <script>
        // parentElement.replaceChild(newElement, targetElement)
        // newElement就是要替换的元素
        // targetElement目标替换掉的元素
        var pcon2 = document.getElementsByClassName('pcon2')[0];//目标元素
        // 创建一个标签节点
        var sapn = document.createElement('span');
        sapn.innerText = '这是新插入的span';
        // 获取父元素
        var box = document.getElementsByClassName('box')[0];
        // 节点
        box.replaceChild(sapn, pcon2);

    </script>

6.6删除节点

方法：parentElement.removeChild(childElement);

作用：从父元素（parentElement）中删除一个子元素（childElement）

 <div id="box">
        <p class="pcon1">这是第一个P</p>
        <p class="pcon2">这是第二个P</p>
    </div>
    <div id="out">
        <p>我是out里面的p</p>
    </div>
    <script>
        //删除指定父元素下的指定子元素
        //1.获取父元素
        var box = document.getElementById('box');
        //2.获取要删除的子元素
        var p1 = document.getElementsByClassName('pcon1')[0];
        //3.删除子元素
        box.removeChild(p1);
        // 直接删除某个元素
        // 要获取删除的某个元素
        var out = document.getElementById('out');
        // 直接删除
        out.remove();
    </script>

6.7克隆节点 

方法：currentElement.cloneNode(true/false);

作用：复制 DOM 元素。

该方法只接受一个布尔值的参数，true代表深度拷贝，false代表浅拷贝，不传参的话，默认为false。

 <div id="box">
        <p class="pcon1">这是第一个P</p>
        <p class="pcon2">这是第二个P</p>
    </div>
   
    <script>
        //1.获取要克隆的元素
        var box = document.getElementById('box');
        // 默认是false 浅克隆只复制元素本身不包含任何子元素
        console.log(box.cloneNode()) //cloneNode()方法接收一个参数，表示是否深度克隆，true表示深度克隆，false表示浅度克隆
        document.body.appendChild(box.cloneNode(true))
    </script>

七. 根据DOM节点层次关系获取元素

                                                 

 

// 访问父节点(亲爸爸)
console.log(div.parentNode);

// 访问下一个兄弟节点
//包括空白节点(幽灵节点) 
console.log(div.nextSibling);
//IE9以上才支持
console.log(div.nextElementSibling);

// 访问上一个兄弟节点
//包括空白节点(幽灵节点) 
console.log(div.previousSibling);
//IE9以上才支持
console.log(div.previousElementSibling);

// 访问第一个孩子节点
//包括空白节点(幽灵节点) 
console.log(div.firstChild);
//IE9以上才支持
console.log(div.firstElementChild);

// 访问最后一个孩子节点
//包括空白节点(幽灵节点) 
console.log(div.lastChild);
//IE9以上才支持
console.log(div.lastElementChild);

// 访问孩子节点
//包括空白节点(幽灵节点) 
console.log(div.childNodes);

console.log(div.children[1]);

节点的类型名称及值

• nodeType 属性返回节点类型。

如果节点是一个元素节点，nodeType 属性返回 1。

如果节点是一个文本节点，nodeType 属性返回 3。

如果节点是一个注释节点，nodeType 属性返回 8。

• nodeName 属性指定节点的节点名称。

如果节点是元素节点，则 nodeName 属性返回标签名。

如果节点是属性节点，则 nodeName 属性返回属性的名称。

对于其他节点类型，nodeName 属性返回不同节点类型的不同名称。

• nodeValue 属性设置或返回指定节点的节点值。