JavaScript DOM操作_const dom = document.getelementbyid('cursor'); dom-CSDN博客

本文链接：https://blog.csdn.net/linwow/article/details/90759949

DOM

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。通过 DOM，你可以访问所有的 HTML 元素，连同它们所包含的文本和属性。
在这里插入图片描述
DOM标准规定HTML文档中的每个成分都是一个节点(node)：

文档节点(document对象)：代表整个文档
元素节点(element 对象)：代表一个元素（标签）
文本节点(text对象)：代表元素（标签）中的文本
属性节点(attribute对象)：代表一个属性，元素（标签）才有属性

JavaScript 能够改变页面中的所有 HTML 元素、HTML 属性、CSS 样式、事件做出反应。

查找元素

通过 JavaScript，查找HTML 元素可以通过三种方式：通过 id 找到 HTML 元素；通过标签名找到 HTML 元素；通过类名找到 HTML 元素。

直接查找

document.getElementById           	根据ID获取一个标签
document.getElementsByClassName   	根据class属性获取
document.getElementsByTagName     	根据标签名获取标签合集

通过id="d1"的元素：
var x=document.getElementById("d1");
查找 id="main" 的元素，然后查找 id="d1" 元素中的所有 <span> 元素：
var x=document.getElementById("d1");
var y=x.getElementsByTagName("span");
查找 class="test" 的元素：
var x=document.getElementsByClassName("test");

间接查找

parentElement            父节点标签元素
children                 所有子标签
firstElementChild        第一个子标签元素
lastElementChild         最后一个子标签元素
nextElementSibling       下一个兄弟标签元素
previousElementSibling   上一个兄弟标签元素

js代码在书写时，一定要保证在页面html文件全部加载完毕后才能正常执行，否则报错。两种解决方式

window.onload = function(里面写js代码)title标签内部
js写在html文档最下方

节点操作

1.创建节点，2.添加自定义属性，3.添加固有属性，4.添加到DOM树中浏览器展示

appendChild 直接尾部添加
// 创建标签
var imgEle = document.createElement('img');
// 设置自定义属性
imgEle.setAttribute('id','i1')
// 设置固有的属性
imgEle.src = 'longzhu.png'
// 添加到DOM树中，让浏览器展示出来
var d1Ele = document.getElementById('d1')
d1Ele.appendChild(imgEle)

1.创建节点，2.添加固有属性和标签文本值，3.指定位置添加标签

insertBefore 固定位置添加
// 创建标签
var aEle = document.createElement("a")
aEle.href = 'https:www.baidu.com'
aEle.innerText = '点我点我'
// 获取参考点标签
var d3Ele = document.getElementById('d3')
var s1Ele = document.getElementById('s1')
// 在d3标签内部，s1标签上方添加创建的a标签
d3Ele.insertBefore(aEle,s1Ele)

innerText和innerHTML的区别

// 获取一个标签
var d2Ele = document.getElementById('d2');
// 仅仅能获取到d2标签的内部文本
d2Ele.innerText
// 不仅获取文本，标签页全部获取到
d2Ele.innerHTML

// 获取标签
var d2Ele = document.getElementById('d2');
// 设置内部文本
d2Ele.innerText = '哈哈'
d2Ele.innerHTML = '呵呵'
// 设置内部文本(文本中包含标签)
d2Ele.innerText = '<h1>我是h1</h1>' // 不认识html标签
d2Ele.innerHTML = '<h1>我是h1</h1>' // 能够识别html标签

获取值操作

用于获取用户选择或输入的标签：input、select、textarea

var demoElw=document.getElementsByTagName("input")[0];
// 获取值
demoEle.value
// 设置值
demoEle.value = '我改了'

class操作

通过class获取到的数据是一个数组，需要通过索引拿到单个对象

// 根据class找到相应的标签对象
var c1Ele = document.getElementsByClassName('c1')[0]

// 获取该标签对象的class属性列表并移除背景红色
c1Ele.classList.remove('bg-red')

// 添加属性
c1Ele.classList.add('bg-green')

// 判断是否存在,返回true或false
c1Ele.classList.contains('bg-green')
c1Ele.classList.contains('bg-red')

// 有则删除，无则添加,返回true或false
c1Ele.classList.toggle('bg-green')

style样式操作

// 修改高度样式
d1Ele.style.height = '200px'
// 修改宽度样式
d1Ele.style.width = '200px'
// 修改背景色样式
d1Ele.style.backgroundColor = 'blue'

事件绑定

两种绑定事件的方法

标签内直接调用相应事件函数
js代码自动查找标签并绑定事件

示例

<div class="bg-red " id="d1"></div>
<button id='b1' onclick='change();'>开关1</button>
<button id='b2'>开关2</button>
<script>
    // 标签直接绑定事件
    function change(){
        var d1Ele = document.getElementById('d1');
        d1Ele.classLict.toggle('bg-green');
    }
    // 通过JS代码绑定事件
    var b2Ele = document.getElementById('b2');
    b2Ele.onclick = ()=>{
        change();
    }

搜索框案例

<input type="text" value="苹果手机" id="i1">
    var i1Ele = document.getElementById('i1');
    // 获取焦点
	i1Ele.onfocus = function (ev) {
        i1Ele.value = '';
        // 也可以直接用this
        this.value = ''
    };
	// 失去焦点
    i1Ele.onblur = function (ev) {
        i1Ele.value = '苹果电脑';
        // 也可以直接用this
        this.value = '苹果电脑'
    }

计时器案例
1.单纯的获取当前时间，展示到input框中
2.页面上定义一个按钮点击时间走动(setInterval)
3.再定义一个按钮停止时间走动(clearInterval)
4.定义了一个全局变量指代定时器并且判断这个变量只能指代一次
5.在清除定时器的时候将全局变量置为空(false)

<body>
<input type="text" id="d1">
<button id="b1">开始</button>
<button id="b2">结束</button>

<script>
    // 定义一个存储定时器的全局变量
    var flag;
    // 先获取代码中需要用到的一些固定标签对象
    var b1Ele = document.getElementById('b1');
    var iEle = document.getElementById('d1');
    var b2Ele = document.getElementById('b2');
    // 定义一个展示时间的函数
    var showTime = function(){
        // 获取当前时间
        var cTime = new Date();
        iEle.value = cTime.toLocaleString()
    };
    // 给b1标签绑定点击事件
    b1Ele.onclick = function () {
        // 先判断flag是否已经指代了一个定时器
        if (!flag){
            flag = setInterval(showTime,1000)
        }
    };

    b2Ele.onclick = function () {
        // 取消定时器
        clearInterval(flag);
        // 将标志位手动置为布尔值为false的值即可
        flag = null;
    }
</script>
</body>

省市联动案例
1.定义多个select标签
2.先循环获取自定义对象的键(省)
3.动态创建option标签并为其添加文本值
4.将创建好的标签添加到标识省的select框中(appendChild)
5.给标识省的select标签绑定onchange事件，当用户选择不同的省的时候自动触发,在该事件内部能够动态获取到用户选择的省的信息
6.根据用户选择的省获取到对应的市的数组信息，循环遍历改数组内每一个市的信息，动态创建option标签并为其添加文本值
7.将创建好的标签添加到标识市的select框中(appendChild)
8.在动态修改市相关select框之前先清空改select框内的文本及标签(innerHTML)

<body>
<select name="" id="province">
</select>
<select name="" id="city">
</select>
<script>
    data = {"河北省": ["廊坊", "邯郸"], "北京": ["朝阳区", "海淀区"], "山东": ["威海市", "烟台市"]};
    // 先提前将两个标签对象查找到
    var pEle = document.getElementById('province');
    var cEle = document.getElementById('city');
    // 先展示省份信息
    for (var province in data) {
        var proEle = document.createElement('option');
        proEle.innerText = province;
        pEle.appendChild(proEle)
    }
    // 绑定变化事件
    pEle.onchange = function () {
        // 获取对应的省信息
        var currentProvince = pEle.value;
        // 将之前的省对应的市清除
        cEle.innerHTML = '';

        // 添加默认的请选择项
        var newEle = document.createElement('option');
        newEle.innerText = '请选择';
        cEle.appendChild(newEle);

        // 获取当前省对应的市
        relCity = data[currentProvince];
        // 循环对应的市，添加到市对应的选择框中
        for (var i = 0; i < relCity.length; i++) {
            var cityEle = document.createElement('option');
            cityEle.innerText = relCity[i];
            cEle.appendChild(cityEle)
        }
    }
</script>
</body>