DOM元素操作

最新推荐文章于 2024-07-22 15:13:59 发布

LN Feng

最新推荐文章于 2024-07-22 15:13:59 发布

阅读量71

点赞数

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/weixin_45000466/article/details/127155800

版权

获取元素、控制元素、控制元素隐藏显示、标签切换

获取元素

通过id名获取获取的是单个元素 getElementById()
```
var btn=document.getElementById('btn')
```

通过标签名获取获取的是数组 getElementByTagName()

var btns=document.getElementsByTagName('button')
//用法
btns[0].onclick=function(){
  
}
var btns=document.getElementsByTagName('button')[0]

通过class名获取元素获取的是数组 getElementsByClassName()
```
var spans=document.getElementsByClassName('span')[0]
```
通过name获取获取的是数组 getElementsByName()
```
var inps=document.getElementsByName("user");
```
通过选择器获取的是单个元素 querySelector()
```
var p1=document.querySelector('.p1');
```
通过选择器获取所有的元素数组 querySelectorAll()
```
var button=document.querySelectorAll('button');
```

通过父元素获取子元素 父元素.xxxx()

var father=document.querySelector(".father");
var bigSon=father.getElementsByTagName('p')[0];

获取、设置标签的属性

只能获取或者设置行间的属性

获取

元素.属性名

console.log(bigSon.style.backgroundColor);

设置

元素.属性名=属性值
```
bigSon.style.backgroundColor="pink";
```
通过value的值获取标签的值、
```
console.log(inps[0].value);
```

练习

// =======================demo=======================
// 1. 获取元素
var input=document.getElementsByTagName("input")[0];
var btn=document.getElementsByTagName("button")[0];
var p=document.getElementsByClassName("p1")[0];
console.log(input,btn,p);

// 指定点击事件
btn.onclick=function(){
  // 点击事件执行代码
  // 将表单内容赋值为p标签
  // 1. 获取表单内容
  var v=input.value;
  // value是获取或者设置表单的内容
  // innerHTML获取或者设置其他标签的内容
  p.innerHTML="您输入的用户名是:"+v;
  console.log(p.innerHTML);
}

控制元素

btn绑定点击事件控制div变色

var div=document.getElementsByTagName('div')[0];
var btn=document.querySelector('button');
// btn绑定点击事件控制div变颜色
btn.onclick=function(){
  // 判断div的初始颜色 如果是红色 变成绿色
  if(div.style.backgroundColor=='tomato'){
    div.style.backgroundColor='green';
  }else{
    div.style.backgroundColor='tomato';
  }
}

控制元素隐藏显示

// 1. 获取元素
var btn=document.getElementsByTagName('button')[0];
var div=document.getElementsByClassName('box')[0];

/*===========通过样式控制元素显示隐藏===========*/
btn.onclick=function(){
  //如果显示 隐藏  如果隐藏 显示
  if(div.style.display=='block'){
    div.style.display='none';
  }else{
    div.style.display='block';
  }
}

// 1. 获取元素
var btn=document.getElementsByTagName('button')[0];
var div=document.getElementsByClassName('box')[0];
/*===========通过控制类名显示隐藏===========*/
btn.onclick=function(){
  // class 是保留字
  // 获取行间的class属性 通过className获取
  console.log(div.className);
  if(div.className=="box block"){
    div.className="box none";
  }else{
    div.className="box block";
  }
}

计算器

<script>
    // 1.获取元素
    var num = document.getElementsByName('num');
    var select = document.getElementsByTagName('select')[0]
    var btn = document.getElementsByTagName('button')[0];
    var sum = document.getElementsByTagName('span')[0];

    btn.onclick = function () {
        // 1. 输入的内容不能为空
        if (num[0].value === "" || num[1].value === "") {
            alert("输入内容不能为空");
        } else if (Number(num[0].value) + '' == NaN + '' || Number(num[0].value) + '' == NaN + '') {
            // 2. 输入的内容必须是数字 
            alert("输入的不是数字 计算个锤子啊!");
        } else{
            // 3. 正常情况   
            //    将表单获取的值转为数字
            var x = num[0].value * 1;
            var y = num[1].value * 1;
            // console.log(num[0].value,num[1].value,select.value);
            //判断你选则的运算符
            switch (select.value) {
                case '+':
                    sum.innerHTML = '计算结果:' + (x + y);
                    break;
                case '-':
                    sum.innerHTML = '计算结果:' + (x - y);
                    break;
                case 'x':
                    sum.innerHTML = '计算结果:' + (x * y);
                    break;
                case '/':
                    sum.innerHTML = '计算结果:' + (x / y);
                    break;

            }
        }
    }
</script>

标签切换页面

this谁绑定事件就代表谁

<body>
    <ul class="nav">
        <li>第一个</li>
        <li>第二个</li>
        <li>第三个</li>
    </ul>
    <div>one</div>
    <div>two</div>
    <div>three</div>
</body>

<script>
    var one = document.getElementsByTagName('li');
    var div = document.getElementsByTagName('div');
    // var 全局变量
    // let 局部变量
    // 通过for循环遍历 统一绑定事件
    for (var i = 0; i < one.length; i++) {
        // 自定义属性
        one[i].index = i;
        one[i].onclick = function () {
            //样式初始化
            for (var j = 0; j < one.length; j++) {
                one[j].style.backgroundColor = 'gray';
                div[j].style.display = 'none';
            }
            /***************************
            this 谁绑定事件this就代表谁
            ***************************/
            console.log(this.index);
            div[this.index].style.display = 'block';
            this.style.backgroundColor = 'black';
        }
    }
</script>

鼠标移入效果

用法：标签选择器:hover{样式代码}

直接在悬浮元素上改变当前元素本身的样式；

#div1 {
  height: 300px;
  width: 300px;
  background: red;
}
#div1:hover{background: pink;}

改变当前元素子级元素的样式

#div1 {
  height: 300px;
  width: 300px;
  background: red;
}
#div2 {
  height: 100px;
  width: 100px;
  background: green;
}
#div1:hover>#div2{background: yellow;}

<div id="div1">
    <div id="div2"></div>
</div>

改变与当前元素同级元素的样式

#div1 {
  height: 300px;
  width: 300px;
  background: red;
}
#div1:hover{background: #00b38a}
#div2 {
  height: 100px;
  width: 100px;
  background: green;
}
#div3{
  height: 50px;
  width: 50px;
  background:blue;
}
#div1:hover #div3{background: black}

<div id="div1">1
    <div id="div2">2
        <div id="div3">3</div>
    </div>
</div>

改变就近元素的样式

#div1 {
  height: 300px;
  width: 300px;
  background: red;
}
#div2 {
  height: 200px;
  width: 200px;
  background:blue;
}
#div1:hover+#div2{background: pink}

<div id="div1">1 </div>
<div id="div2">2</div>