Dom简单操作获取元素样式获取元素类名获取语法.class 设置语法.class DOM 节点元素节点就html

获取元素样式

<head>
    <style>
        .box {
            width: 300px;
            height: 300px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="box"> 我是一个具有样式的div </div>
    <!-- <div class="box" style="width: 500px; height: 600px"> 我是一个具有样式的div </div> -->
    <script>
        /**
         *  获取元素样式
         * 
         *  语法: 元素.style.某个CSS属性            ----> 只能获取到行内样式
        */
        var oBox = document.getElementsByClassName('box')[0]
        // 1. 获取元素样式
        console.log(oBox.style.width)
        console.log(oBox.style.height)
        // console.log(oBox.style.background-color) // 错误写法
        console.log(oBox.style['background-color']) // 中括号语法
        console.log(oBox.style.backgroundColor) // 驼峰命名

        // 2. 设置元素样式          ---> 只能设置给行内
        oBox.style.backgroundColor = 'blue'
        /**
         *  获取元素样式 (非行内)    注意: 这种方式获取到的 是 只读的属性
         *          只读: 只能获取到, 但是不允许修改
        */
        console.log(window.getComputedStyle(oBox).width)
        console.log(window.getComputedStyle(oBox).backgroundColor)
        window.getComputedStyle(oBox).width = 800 + 'px'//02_获取元素样式.html:43 Uncaught DOMException: Failed to set the 'width' property on 'CSSStyleDeclaration': These styles are computed, and therefore the 'width' property is read-only. 报错内容
    </script>
</body>

获取元素类名

获取语法.class
设置语法.class

<body>
    <div class="item box">我是一个具有两个类名的 DIV</div>
    <script>
        var oDiv = document.querySelector('div')
        // 3. 第二种获取语法
        console.log(oDiv.classList)
        // 4. 第二种设置语法
        oDiv.classList.add('new_box')
        // 5. 删除语法
        oDiv.classList.remove('box')
    </script>
</body>

DOM 节点

元素节点
- 就html标签都元素节点
属性节点
- 就元素自身所携带的属性
文本节点
- 元素内的文本就文本节点另外空格换行也是文本节点

获取节点

childNodes: 获取某一节点下所有的子一级节点

就是获取元素的所有子节点包括文本节点、

<body>
    <div>
        <p>dffff
            <span class="d" id="2" data-ss="555">ddd</span>
        </p>
        <span>fff</span>
    </div>
    <script>
        var D = document.querySelector('div')
        console.log(D.childNodes) //打印一个伪数组 数组内包含文本节点
    </script>
</body>

children: 获取某一节点下所有的子一级元素节点

该方法获取的是子元素节点

<body>
    <div>
        <p>dffff
            <span class="d" id="2" data-ss="555">ddd</span>
        </p>
        <span>fff</span>
    </div>
    <script>
        var D = document.querySelector('div')
        console.log(D.children)//打印所有子元素节点
    </script>
</body>

firstChild: 获取某一节点下子一级的第一个节点

该方法获取到第一个子节点（包含文本节点）

<body>
    <div>
        <p>dffff
            <span class="d" id="2" data-ss="555">ddd</span>
        </p>
        <span>fff</span>
    </div>
    <script>
        var D = document.querySelector('div')
        console.log(D.firstChild)
    </script>
</body>

lastChild: 获取某一节点下子一级的最后一个节点

该方法获取最后一个子元素节点

<body>
    <div>
        <p>dffff
            <span class="d" id="2" data-ss="555">ddd</span>
        </p>
        <span>fff</span>
    </div>
    <script>
        var D = document.querySelector('div')
        console.log(D.lastChild)
    </script>
</body>

firstElementChild: 获取某一节点下子一级的第一个元素节点

第一个元素节点

<body>
    <div>
        <p>dffff
            <span class="d" id="2" data-ss="555">ddd</span>
        </p>
        <span>fff</span>
    </div>
    <script>
        var D = document.querySelector('div')
        console.log(D.firstElementChild)
    </script>
</body>

lastElementChild: 获取某一节点下子一级的最后一个元素节点

最后一个元素节点

<body>
    <div>
        <p>dffff
            <span class="d" id="2" data-ss="555">ddd</span>
        </p>
        <span>fff</span>
    </div>
    <script>
        var D = document.querySelector('div')
        console.log(D.lastElementChild)
    </script>
</body>

nextSibling: 获取某一个节点的下一个兄弟节点

获取到下一个兄弟节点（包含文本）

<body>
    <div>
        <p>dffff
            <span class="d" id="2" data-ss="555">ddd</span>
        </p>
        <span>fff</span>
    </div>
    <script>
        var D = document.querySelector('div')
        console.log(D.nextSibling)
    </script>
</body>

previousSibling: 获取某一个节点的上一个兄弟节点

获取到上一个兄弟节点

<body>
    <div>
        <p>dffff
            <span class="d" id="2" data-ss="555">ddd</span>
        </p>
        <span>fff</span>
    </div>
    <script>
        var D = document.querySelector('div')
        console.log(D.previousSibling)
    </script>
</body>

nextElementSibling 获取某一个节点的下一个元素节点

获取到下一个兄弟元素节点

<body>
    <div>
        <p>dffff
            <span class="d" id="2" data-ss="555">ddd</span>
        </p>
        <span>fff</span>
    </div>
    <script>
        var D = document.querySelector('div')
        console.log(D.nextElementSibling)
    </script>
</body>

previousElementSibling 获取某一个节点的上一个元素节点

<body>
    <div>
        <p>dffff
            <span class="d" id="2" data-ss="555">ddd</span>
        </p>
        <span>fff</span>
    </div>
    <script>
        var D = document.querySelector('div')
        console.log(D.previousElementSibling)
    </script>
</body>

parentNode: 获取某一个节点的父节点

<body>
    <div>
        <p>dffff
            <span class="d" id="2" data-ss="555">ddd</span>
        </p>
        <span>fff</span>
    </div>
    <script>
        var D = document.querySelector('div')
        console.log(D.parentNode)
    </script>
</body>

attributes: 获取某一个 元素节点 的所有 属性节点
获取到一个属性的集合

<body>
    <div>
        <p>dffff
            <span class="d" id="2" data-ss="555">ddd</span>
        </p>
        <span>fff</span>
    </div>
    <script>
        var D = document.querySelector('div')
        console.log(D.attributes)
    </script>
</body>

节点属性

nodeType 获取节点类型, 用数字表示

元素节点为 1
文本节点为 3
属性节点为 2 ====》必须属性伪数组中的值

nodeName 获取节点的节点名称

元素节点获取到的是大写的元素名称
文本节点获取到的是 #text
属性节点获取到的是属性名

nodeValue 获取节点的值

元素节点没有对应的value 所以地空值
文本获取到的就是文本内容
属性节点获取到的是属性值

操纵 DOM 节点

创建节点

向页面中加入一个节点

添加节点首先需要拥有一个节点
元素.appendChild() 接收一个参数将节点添加到最后一个位置
元素.insetBefore()接收两个参数第一个参数为要添加的节点第二个参数为添加到某某元素的前面第二个参数必写为null时将元素添加到最后一个位置

<body>
    <ul>
        <li></li>
        <li></li>
        <li>2222</li>
    </ul>
    <script>
        var oUl = document.querySelector('ul')//获取到ul标签
        console.log(oUl)
        var ll = document.createElement('div')//创建一个元素节点
        console.log(ll)//可以打印 但是其

        var tt = document.createTextNode('55555')
        console.log(tt)

        var oli = document.querySelector('li')
        oli.appendChild(tt)

        console.log(oli)
        var ooli = oli.cloneNode(true)
        // ooli.appendChild(tt) 创建的元素是一次性的 假如在后面添加的话前面的添加会被取消

        oUl.appendChild(ooli)
        var ss = oli.offsetLeft
        console.log(ss)
    </script>
</body>

删除页面中的某一个节点

父元素.removeChild(要删除的节点)

        var myli = document.querySelectorAll('li')
        oUl.removeChild(myli[3])

修改页面中的某一个节点

修改某一个节点父节点.replaceChild(新的节点, 要被修改的节点)

         oUl.replaceChild(myLi, oLi)

克隆页面中的某一个节点

克隆节点元素.cloneNodes(布尔值默认是false)

     var oUl = document.querySelector('ul')
        var oLi = document.querySelector('li')

        // console.log(oUl)
        // console.log(oLi)
        // oUl.appendChild(oLi)    // 把原本的 li 从原本的位置, 移动到父节点的最后

        /**
         *  复制(克隆)一个 LI
         * 
         *      想要复制的节点.cloneNode(参数布尔值)
         *          参数 false 不克隆子节点     默认
         *          参数 true 克隆子节点
        */
        var newLi = oLi.cloneNode(true)
        console.log(newLi)
        oUl.appendChild(newLi)

获取元素的非行内样式

getComputedStyle (非IE使用)

 window.getComputedStyle

获取到的只读的值非行内样式

currentStyle (IE使用)

获取到的是行内样式

获取元素偏移量

offsetParent

<head>

    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .box1 {
            width: 400px;
            height: 400px;
            background-color: pink;
            position: relative;
        }

        .box2 {
            width: 100px;
            height: 100px;
            background-color: skyblue;
            position: absolute;
            left: 100px;
            top: 200px;
        }
    </style>
</head>

<body>
    <div class="box1">
        <div class="box2"></div>
    </div>

    <script>
        /**
         *  获取元素偏移量
        */
        // 0. 获取元素
        var box2 = document.querySelector('.box2')

        // 1. 获取元素相对父级      元素.offsetParent
        console.log(box2.offsetParent)

        // 2. 获取元素的偏移量
        console.log('box2.offsetLeft', box2.offsetLeft)
        console.log('box2.offsetTop', box2.offsetTop)
    </script>
</body>

获取元素尺寸

<head>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        div {
            width: 4000px;
            height: 5000px;
            background-color: pink;
            /* padding: 50px; */
            /* border: 10px solid black; */
            /* margin: 50px; */
        }
    </style>
</head>

<body>
    <div></div>

    <script>
        var oDiv = document.querySelector('div')
        // 获取元素尺寸(占地面积)

        1. offsetXXX         ---> 实际宽度 + padding + border
        console.log('oDiv.offsetWidth', oDiv.offsetWidth)
        console.log('oDiv.offsetHeight', oDiv.offsetHeight)

        console.log('======================')

        2. clientXXX         ---> 实际宽度 + padding
        console.log('oDiv.clientWidth', oDiv.clientWidth)
        console.log('oDiv.clientHeight', oDiv.clientHeight)

 
    </script>
</body>

注意 offsetWidth offsetHeight 会计算内边距和边框
clientWidth clientHeight 不会计算边框

获取浏览器窗口尺寸

       // 获取浏览器窗口尺寸

        // 1. window.innerXXX   ---> 计算时 会包含浏览器的滚动条
        console.log('window.innerWidth', window.innerWidth)
        console.log('window.innerHeight', window.innerHeight)

        // 2. document.documentElement.clientXXX    ---> 计算时 不会计算滚动条(只计算浏览器的可视区域)
        console.log('document.documentElement.clientWidth', document.documentElement.clientWidth)
        console.log('document.documentElement.clientWidth', document.documentElement.clientHeight)

Dom简单操作

获取元素样式

获取元素类名

DOM 节点

获取节点

childNodes: 获取某一节点下 所有的子一级 节点

children: 获取某一节点下所有的子一级 元素节点

firstChild: 获取某一节点下子一级的 第一个节点

lastChild: 获取某一节点下子一级的 最后一个节点

firstElementChild: 获取某一节点下子一级的 第一个元素节点

lastElementChild: 获取某一节点下子一级的 最后一个元素节点

nextSibling: 获取某一个节点的 下一个兄弟节点

previousSibling: 获取某一个节点的 上一个兄弟节点

nextElementSibling 获取某一个节点的 下一个元素节点

previousElementSibling 获取某一个节点的 上一个元素节点

parentNode: 获取某一个节点的 父节点

节点属性

nodeType 获取节点类型, 用数字表示

nodeName 获取节点的节点名称

nodeValue 获取节点的值

操纵 DOM 节点

创建节点

向页面中加入一个节点

删除页面中的某一个节点

修改页面中的某一个节点

克隆页面中的某一个节点

获取元素的非行内样式

getComputedStyle (非IE使用)

currentStyle (IE使用)

获取元素偏移量

offsetParent

获取元素尺寸

获取浏览器窗口尺寸

childNodes: 获取某一节点下所有的子一级节点

children: 获取某一节点下所有的子一级元素节点

firstChild: 获取某一节点下子一级的第一个节点

lastChild: 获取某一节点下子一级的最后一个节点

firstElementChild: 获取某一节点下子一级的第一个元素节点

lastElementChild: 获取某一节点下子一级的最后一个元素节点

nextSibling: 获取某一个节点的下一个兄弟节点

previousSibling: 获取某一个节点的上一个兄弟节点

nextElementSibling 获取某一个节点的下一个元素节点

previousElementSibling 获取某一个节点的上一个元素节点

parentNode: 获取某一个节点的父节点