属性操作,事件,节点

属性操作

阻止a标签跳转

<script>
    window.onload = function () {
      var a = document.getElementsByTagName('a')[0];
      a.onclick = function () {
        // 在这里return false就可以阻止跳转, return true就不会阻止
        return false;
      }
    }

  </script>

属性设置

<script>
    var btn = document.getElementById("btn");
    var dv = document.getElementById("box1");
    btn.onclick=function(){
        // 1 对象.style
        dv.style.backgroundColor="pink";

        // 2 对象.className
        dv.className='box2';
        
        // 3 对象.setAttribute
        dv.setAttribute('style','background-color:yellow;');

        // 4 对象.style.setProperty
        dv.style.setProperty('background-color','green');

        // 5 对象.style.cssText
        dv.style.cssText = "background-color:pink;width:200px;";
    }

事件

鼠标事件mouseover等

// 会出现冒泡,由子触发父,事件源是子
            sup.onmouseover = mouseover;
            sub.onmouseover = mouseover;

            // 不会出现冒泡,不能由子触发父,事件源还是父
            sup.onmouseenter = mouseover;
            sub.onmouseenter = mouseover;

浏览器滚动条onscroll

 // 滚动条  在滑动滚动条的时候触发 向控制台打印--------------
    window.onscroll = function () {
      console.log('--------------');
    }

键盘事件 onkeydown /onkeyup

 <script>
    // onkeydown 键盘按下
    // onkeyup  键盘抬起
  </script>

焦点 onfocus /onfocus

 <script>
    window.onload = function () {
      var inp = document.getElementById('inp');
      inp.onfocus = function () {
        console.log('获得焦点');
      }
      inp.onfocus = function () {
        console.log('失去焦点');
      }
    }
  </script>

节点

 <script>
    // 节点
    // 整个文档就是一个文档节点
    // 节点类型 : 
    // nodeName属性 : 1 元素, 2 属性, 3 文本, 8 注释, 9 文档
  </script>

<script>
  // 9
  console.log(document.nodeType);
  var dv1 = document.getElementById('dv');
  // 1
  console.log(dv1.nodeType);

  // 获取属性节点
  var classAttr = dv1.getAttributeNode('class');
  // 2
  console.log(classAttr.nodeType);

  // 获取子节点(包含文本节点)
  var textNode = dv1.firstChild;
  // 3
  console.log(textNode.nodeType);

  // 第一个子元素节点, 就是第一个子标签(如果没有标签就是null)
  var fec = dv1.firstElementChild;
  // 1
  console.log(fec.nodeType);

  // 1 元素, 2 属性, 3 文本, 8 注释, 9 文档
  // nodeName : 文档 #document, 文本#text, 元素 大写标签名, 属性 属性名

  // nodeValue 属性值 元素节点的 nodeValue是undefined或者null 
  // 属性 属性值, 文本, 文本内容  

  // parentNode 父节点(这个节点不可能是文本, 因为文本不能嵌套标签)
  // childNodes 所有子节点  返回伪数组
  // children  所有子元素节点  只有标签节点