3、css设置样式总结、节点、节点之间关系、创建元素的方式、BOM

本文介绍: 3、css设置样式总结、节点、节点之间关系、创建元素的方式、BOM

<style>
      .headerObj {
        height: 100px;
        background-color: red;
      }
      .select {
        background-color: blue;
      }
    </style>
<body>
    <header class="headerObj" id="headerObj" style="" name-1="">
      我是头部元素
    </header>
</body><script>
    var headerObj = document.querySelector('#headerObj')
    headerObj.addEventListener('mouseover', function () {
      this.style.height = '200px'
      this.className = 'select'//会覆盖原来的类
      this.setAttribute('style', 'background-color:green')
      this.setAttribute('class', 'select headerObj')
      this.style.setProperty('background-color', 'green')
      this.style.cssText =
        'height: 200px;background-color: pink; font-size:30px'
    })
</script>

节点	标签节点	属性节点	文本节点	document
节点类型	1	2	3	9
节点属性	大写的标签名	属性名	#text	#document
节点值	null	属性值	文本内容	null
		先获取属性节点: 元素.getAttributeNode(“属性名”)	1.先获取文本节点：元素.firstChild 2.标签的第一个子节点必是文本节点

<body>
    <header class="headClass" id="headerId" name-1="h1">
      我是头部区域标签
    </header>
    <span class="spanClass" id="spanId" name-1="s1">我是行内元素范围标签</span>
</body>
<script>
    console.log(headerObj.nodeType) //1   块元素
    console.log(spanObj.nodeType) //1     行内元素
    console.log(headerObj.nodeName) //HEADER
    console.log(spanObj.nodeName) //SPAN
    console.log(headerObj.nodeValue) //null
    console.log(spanObj.nodeValue) //null
</script>

<script>
    console.log(headerObj.getAttributeNode('class').nodeType) //2
    console.log(headerObj.getAttributeNode('name-1').nodeType) //2
    console.log(spanObj.getAttributeNode('name-1').nodeType) //2
    console.log(spanObj.getAttributeNode('id').nodeType) //2
    console.log(headerObj.getAttributeNode('class').nodeName) //class
    console.log(headerObj.getAttributeNode('name-1').nodeName) //name-1
    console.log(spanObj.getAttributeNode('name-1').nodeName) //name-1
    console.log(spanObj.getAttributeNode('id').nodeName) //id
    console.log(headerObj.getAttributeNode('class').nodeValue) //class
    console.log(headerObj.getAttributeNode('name-1').nodeValue) //name-1
    console.log(spanObj.getAttributeNode('name-1').nodeValue) //name-1
    console.log(spanObj.getAttributeNode('id').nodeValue) //id
</script>

<script>
    console.log(headerObj.firstChild.nodeType) //3
    console.log(spanObj.firstChild.nodeType) //3
    console.log(headerObj.firstChild.nodeName) //#text
    console.log(spanObj.firstChild.nodeName) //#text
    console.log(headerObj.firstChild.nodeValue) //文本内容
    console.log(spanObj.firstChild.nodeValue) //
</script>

<script>
    console.log(document.nodeType) //9
    console.log(document.nodeName) //#document
    console.log(document.nodeValue) //null
</script>

  <body>
    <ul id="list">
      <!-- 我是ul的第一行文本 -->
      <li id="li1">第一行</li>
      <!-- 我是ul的第二行文本 -->
      <li id="li2">第二行</li>
      111
      <li class="li3">第三行</li>
      <li>第四行</li>
      <!-- 我是ul的注释 -->
      <li>第五行</li>
      <!-- 我是ul的最后一行文本 -->
    </ul>
  </body>
  <script>
    var ulList = document.getElementById('list')
    var li2 = document.getElementById('li2')
  </script>

parentNode与parentElement的区别：

每个li前后都有text

document.write("<header class='hObj'>头部区域</header>")

    <style>
      #btn {
        width: 300px;
        height: 100px;
        font-size: 30px;
      }
      #box {
        margin-top: 30px;
        width: 300px;
        height: 300px;
        border: 3px solid red;
      }
      .li1 {
        color: green;
        font-size: 30px;
      }
    </style>
  <body>
  //1、先搭建静态页面
    <button id="btn">动态的创建列表</button>
    <div id="box"></div>
  </body>
  <script>
    // 2、获取元素
    var btn = document.getElementById('btn')
    var box = document.getElementById('box')
    // 3、创建一个武功秘籍数组
    var arr = ['易经经','葵花宝典','辟邪剑谱','吸星大法','太极拳',]
    // 4、给按钮绑定单击事件
    btn.onclick = function () {
      // 5、创建ul元素，并将该元素当做box的子元素
      var ulObj = document.createElement('ul')
      box.appendChild(ulObj)
      // 6、遍历武功秘籍数组
      arr.forEach(function (value, index) {
        // 7、创建li元素，并将该元素当做ul的子元素
        var liObj = document.createElement('li')
        ulObj.appendChild(liObj)
        // 8、将数组的6个元素分别当做li的文本内容
        liObj.innerText = value
        // 9、设置每个li的class属性
        liObj.setAttribute('class', 'li' + (index + 1))
        // 10、给li绑定鼠标移入移出事件
        liObj.onmouseover = function () {
          this.style.setProperty('background-color', 'red')
        }
        liObj.onmouseout = function () {
          this.style.setProperty('background-color', '')
        }
        // 11、给li绑定单击事件
        liObj.onclick = function () {
          ulObj.removeChild(this)
        }
      })
      // 12、按钮禁用提示用户不能点了
      this.disabled = true
      this.innerText = '别点了！！！'
    }
  </script>

console.log(window.location)

<body>
    <button id="btn">点我重新加载页面</button>
    <button onclick="goToA()">点我跳转到A页面</button>
    <button onclick="forwardToA()">前进一页</button>
</body>
<script>
// 8、reload() 重新加载页面
    document.getElementById('btn').onclick = function () {
      window.location.reload()
    }
    // 9、location   back()返回上一页
    console.log(window.history)
    function goToA() {
      window.location.href = './A.html'  //另一个网页
    }
    // 9、history    返回上一页
    function forwardToA() {
      window.history.forward()
    }
</script>