JavaScript-DOM（1）

DOM简介

DOM 节点分类	DOM 节点层级关系
1、文档节点	1、父节点
2、标签（元素)节点	2、子节点
3、属性节点	3、兄弟节点
4、注释节点	4、根节点
5、文本节点

DOM节点分类

DOM节点关系

获取元素

• 通过 id 获取元素

  // document本身是window的属性 但window是可以省略不学的
  // window.document.getElementById()
  var divID = document.getElementById("divID")

• 通过 class 获取元素（标签）节点

  // 返回值 集合类型（数组类型）
  var divClassArr = document.getElementsByClassName('divClass');
  for(var i = 0; i < divClassArr.length; i++){
      console.log(divClassArr[i]);
  }

• 通过 tag 获取元素

  var divTagArr = document.getElementsByTagName('div');

• 通过 name 属性获取元素

  var nameArr = document.getElementsByName('a')

获取属性节点

<script type="text/javascript">
    //通过id获取input标签
    var myInput = document.getElementById("inputID")

    // 获取属性节点
    // 方式一 标签节点.属性点
    console.log(myInput.type)   // text
    console.log(myInput.placeholder);

    // 修改属性节点
    // 标签节点.属性名 = 新的属性值
    myInput.placeholder = '嘿嘿'


    // 方式二
    // 获取属性节点  标签节点.getAttribute(属性名称)
    var inPl = myInput.getAttribute('type');

    // 修改属性节点
    // 标签节点 : setAttribute(属性名称，新的属性值)
    myInput.setAttribute('placeholder', '666');

    // 删除属性节点
    myInput.removeAttribute('placeholder')
</script>

内部节点与外部节点属性

<script type="text/javascript">
    // 获取div1节点
    var div1 = document.getElementById("div1")
    
    // 1、innerHTML:获取元素节点
    //从对象的开始标签到结束标签的全部内容,不包括本身Html标签
    var innerDiv = div1.innerHTML;
    
    //2、元素节点.outerHTML
    //除了包含innerHTML的全部内容外, 还包含对象标签本身
    var outerDiv = div1.outerHTML;
    
    //3、元素节点.innerText
    //从对象的开始标签到结束标签的全部的文本内容
    var innerText = div1.innerText;
    
    //4、修改元素节点
    div1.innerHTML = '<h1>666</h1>';
</script>

行间样式的获取

css对应的style属性

<div id="div1" style="width: 150px;height: 150px;background-color: red;"></div>
<button onclick="changeColor()">换颜色</button>
<script type="text/javascript">
    var div1 = document.getElementById("div1");
    console.log(div1);    
    var divArr = document.getElementsByTagName('div');
    console.log(divArr);  // [object HTMLCollection]
    console.log(divArr[0]); // [object HTMLDivElement]

    // 通过标签节点获取style属性的值
    var styleDiv = div1.style

    // 获取style属性下面的样式值 width
    var width = div1.style.width;

    // 修改背景颜色
    div1.style.backgroundColor = 'green';

    // 按钮 点击一次按钮更换一次div的背景颜色

    function changeColor() {
    var r = parseInt(Math.random() * 256);
    var g = parseInt(Math.random() * 256);
    var b = parseInt(Math.random() * 256);
    var colorStr = "rgb(" + r + ", " + g + ", " + b + ")";
    div1.style.backgroundColor = colorStr;
    }

</script>