杨晓宁
杨晓宁
3月前 · 1 人阅读

1. DOM简介

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

DOM节点分类

DOM节点分类

DOM节点关系

图片描述

2. 获取元素

  • 通过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')

3. 获取元素节点

<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>

4. 内部节点与外部节点属性

<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>

5. 行间样式的获取

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属性下面的样式值 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>
收藏 0
javascript
评论 ( 0 )