判断节点类型

nodeType => 元素节点返回1，属性节点返回2，文本节点返回3。

nodeName => 元素节点返回标签名的大写，属性节点返回属性名，文本节点返回#text。

nodeValue => 元素节点返回的值为null，属性节点返回的值是属性值，文本节点返回的是文本内容。

<body>
    <div class="d1">元素一</div>

    <script>
        var divEle = document.querySelector('.d1')
        console.log(divEle.nodeType, divEle.nodeName, divEle.nodeValue);
        console.log(divEle.firstChild.nodeType, divEle.firstChild.nodeName,divEle.firstChild.nodeValue);

    </script>
</body>

动态操作节点

       - 创建节点
            document.createElement('div')
            document.createTextNode('元素一')
       - 添加节点
            父节点.appendChild(子节点)
            父节点.insertBefore(新子节点,原子节点)

       - 删除节点
            父节点.removeChild(子节点)
            子节点.remove()

       - 克隆节点
            节点.cloneNode()
               =>false 默认  不克隆子节点
               =>true        克隆子节点
       - 替换节点
            父节点.replaceChild(新节点,原节点)

代码块

    <body>
		<div>元素一</div>
		<button class="del">删除节点</button>
		<button class="clone">克隆节点</button>
		<button class="replace">替换节点</button>
		<script>
			function test1() {
				var divEle = document.createElement('div') //创建元素节点
				var content = document.createTextNode('元素二') //创建文本节点
				divEle.appendChild(content) //<div>元素二</div>
				// document.body.appendChild(divEle)
				console.log('document.body.firstElementChild ', document.body.firstElementChild)
				document.body.insertBefore(divEle, document.body.firstElementChild)
			}
			// test1()
			function testDelete() {
				var delBtn = document.querySelector('.del')
				delBtn.onclick = function () {
					//删除节点
					// this.body.firstElementChild.remove()
					var divEle = document.querySelector('div')
					divEle.remove()
				}
			}

            function testClone(){
                var cloneBtn = document.querySelector('.clone')
                
                //绑定事件
                cloneBtn.onclick = function(){
                    //点击执行
                    var divEle = document.querySelector('div')
                    var newDivEle = divEle.cloneNode(true)
                    console.log(newDivEle)
                    document.body.appendChild(newDivEle)
                }
            }
            // testClone()
            function testReplace(){
                var replaceBtn = document.querySelector('.replace')
                replaceBtn.onclick = function(){
                    //创建h2节点
                    var h2Ele = document.createElement('h2')
                    var content = document.createTextNode('标题')
                    h2Ele.appendChild(content)   //<h2>标题</h2>

                    var divEle = document.querySelector('div')
                    document.body.replaceChild(h2Ele,divEle)
                }
            }
            // testReplace()
		</script>
	</body>

获取元素的非行间样式

兼容性:

非IE：window.getComputedStyle(元素).样式名

IE：元素.currentStyle.样式名

获取元素位置

offsetTop

offsetLeft

#获取元素尺寸（宽、高）的三种方式

内容宽：window.getComputedStyle(元素).width

内容宽 + padding：元素.clientWidth

内容宽 + padding + border ：元素.offsetWidth

<style>
			* {
				padding: 0;
				margin: 0;
			}
			div {
				width: 100px;
				height: 100px;
				background-color: pink;
				margin: 120px;
				padding: 10px;
                border: 2px solid rebeccapurple;
				position: relative;
			}
		</style>
	</head>
	<body>
		<div></div>

        <script>
            var divEle = document.querySelector('div')
            console.log('clientWidth :',divEle.clientWidth, 'offsetWidth :',divEle.offsetWidth);
        </script>
	</body>

在千峰学习的第三周第二天

判断节点类型

动态操作节点

获取元素的非行间样式

获取元素位置