JavaScript 学习笔记（三）JavaScript基础，JavaScript的基本DOM操作（三）

文章目录

JavaScript 学习笔记（三）JavaScript基础，JavaScript的基本DOM操作（三）
一、节点操作
二、获取元素的尺寸
总结

JavaScript 学习笔记（三）JavaScript基础，JavaScript的基本DOM操作（三）

一、节点操作

1. 创建节点

创建一个页面中没有的节点（无中生有）
语法：document.createElement(‘标签名称’)
作用：创建一个指定标签元素
返回值：一个创建好的元素节点

var div = document.createElement('div')
console.log(div)

2. 插入节点

创建一个节点，插入到一个已经存在的结构内
语法1：父节点.appendChild(子节点)
作用：把子节点放在父节点的内部，并且放在最后的位置

<body>
    <div>
        <p>
            我是div标签内部的p标签
        </p>
    </div>
    
	<script>
	    //创建一个span 标签
	    var span = document.createElement('span')
	    //向 span 内部添加一些文本内容
	    span.innerText = '我是创建出来的 span标签 '
	    //输出
	    console.log(span)
	    //获取页面上的div元素
	    var div = document.querySelector('div')
	    //把创建的span 标签插入到div 内部
	    div.appendChild(span)
	</script>
</body>

语法2：父节点.insertBefore(要插入的子节点，哪一个子节点的前面)
作用：把子节点放在父节点的内部，并且放在制定某一个子节点的前面。

<body>
    <div>
        <p>
            我是div标签内部的p标签
        </p>
    </div>
    
    <script>
        //创建一个span 标签
        var span = document.createElement('span')
        //向 span 内部添加一些文本内容
        span.innerText = '我是创建出来的 span标签 '
        //输出
        console.log(span)
    
        //获取页面上的div元素
        var div = document.querySelector('div')
        //获取到div 内部的p标签
        var p = document.querySelector('p')
        //把创建的span 标签插入到div 内部,bing并且放在p标签的前面
        div.insertBefore(span,p)
    </script>
</body>

3. 删除节点

语法1：父节点.removeChild(子节点)
作用：从父节点内删除某一个子节点

<body>
    <div>
        <p>我是div标签内部的p标签</p>
        <span>我是div 内部的span 标签</span>
    </div>

    <script>
        //获取页面上的div元素
        var div = document.querySelector('div')
        //获取到div 内部的p标签
        var p = document.querySelector('p')
        //从div 内删除p标签
        div.removeChild(p)
    </script>
</body>

语法2：节点.remove()
作用：把自己直接删除

<body>
    <div>
        <p>我是div标签内部的p标签</p>
        <span>我是div 内部的span 标签</span>
    </div>

    <script>
        //获取到div 元素
        var div = document.querySelector('div')
        //删除
        div.remove()
    </script>

4. 替换节点

语法：父节点.replaceChild(换上节点，换下节点)
作用：在父节点内，使用换上节点替换到换下节点

<body>
    <div>
        <p>我是 div 内部 p 标签</p>
        <span>我是div 内的span标签</span>
        <p> 我是div内的p标签 </p>
    </div>

    <script>
        //创建一个i标签
        var i = document.createElement('i')
        //向i标签内添加一些文本
        i.innerText = '我是创建出来的 i 标签'
        //获取到 div 元素
        var div = document.querySelector('div')
        // 获取到span元素
        var span = document.querySelector('span')
        //使用创建的 i 标签去替换div 内本身的span 标签
        div.replaceChild(i, span)
    </script>
</body>

5. 克隆节点

语法：节点.cloneNode(是否克隆后代节点)
作用：把该节点复制一份一模一样的内容
返回值：克隆好的节点

<body>
    <div>
        <p>我是 div 内部 p 标签</p>
    </div>

    <script>
        //获取div元素
        var div = document.querySelector('div')
        //克隆一个div 元素，不克隆后代元素
        var clone1 = div.cloneNode(false)
        //克隆一个div 元素，克隆后代元素
        var clone2 = div.cloneNode(true)

        //输出
        console.log('不可隆后代节点：',clone1)
        console.log('可隆后代节点：',clone2)
    </script>
</body>

二、获取元素的尺寸

语法1：元素.offsetHeight && 元素.offsetWidth
获取：元素内容 + padding + border 区域的尺寸
语法2：元素.clientHeight && 元素.clientWight
获取：元素内容 + padding 区域的尺寸
语法1与语法2的区别在于是否加上 border 区域的尺寸