JavaScript-DOM操作

最新推荐文章于 2023-06-30 18:01:12 发布

VIP文章好想与不像

最新推荐文章于 2023-06-30 18:01:12 发布

阅读量440

点赞数

分类专栏：前端 DOM操作文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/qq_56045326/article/details/125256599

版权

1.显示和隐藏文本框（对querySelector的用法，）

<body>
    <inputtype="text"value="手机">
    <script>
        // 1.获取元素
        vartext = document.querySelector('input');
        // 2.注册事件 获得焦点事件 onfocus 
        text.onfocus = function() {
                // console.log('得到了焦点');
                if (this.value === '手机') {
                    this.value = '';
                }
                // 获得焦点需要把文本框里面的文字颜色变黑
                this.style.color = '#333';
            }
            // 3. 注册事件 失去焦点事件 onblur
        text.onblur = function() {
            // console.log('失去了焦点');
            if (this.value === '') {
                this.value = '手机';
            }
            // 失去焦点需要把文本框里面的文字颜色变浅色
            this.style.color = '#999';
        }
    </script>
</body>

2.京东广告的开关（对“getElementById”的用法）

<body>
    <buttonid="switch">开\关</button>
    <imgsrc="img/luman.png"alt=""style="width: 500px;"id="img">
    <script>
        var sw = document.getElementById("switch");
        var img = document.getElementById("img");
        var tmp = 0 ;///设置tmp为一个标志这样可以点击多次，实现两种效果的交互；
        sw.onclick = function() {
            if(tmp === 0){
                img.style.display = 'none';
                tmp=1;
            }
            else{
                img.style.display = 'block';
                tmp =0;
            }
        }
    </script>
</body>

3.下拉菜单（js实现，定义tmp实现一个按钮多种效果）

<body>
    <buttonid="love"><h2>我的爱人</h2></button>
    <div id="menu">
        <a href="www.baidu.com">XXX</a>
        <a href="wwww.baidu.com">YYY</a>
        <a href="www.baidu.com">ZZZ</a>
    </div>
    <script>
        var love = document.getElementById("love");
        varmenu = document.getElementById("menu");
        var  tmp = 1;
        love.onclick = function() {
            if(tmp === 0){
                menu.style.display = 'none';
                tmp=1;
            }
            else{
                menu.style.display = 'block';
                tmp=0;
            }
        }
    </script>
</body>

4.开关灯案例（classname--可以更改元素的类）

<bodyid="day"class="daytime">
    <buttonid="switch">开/关灯</button>
    <script>
        varsw = document.getElementById("switch");
        varday = document.getElementById("day");
        vartmp = 0;
        sw.onclick = function() {
            if(tmp === 0){
                day.className = 'night';
/注意classname的用法
                tmp = 1;
            }
            else{
                day.className = 'daytime';
                tmp = 0;
            }
        }
    </script>
</body>

5.百度换肤（js改变图片的路径，多次引用更加精准定位）

<body>
    <ulclass="baidu">
        <li><imgsrc="images/1.jpg"></li>
        <li><imgsrc="images/2.jpg"></li>
        <li><imgsrc="images/3.jpg"></li>
        <li><imgsrc="images/4.jpg"></li>
    </ul>
    <script>
        // 1. 获取元素 
        varimgs = document.querySelector('.baidu').querySelectorAll('img');
/注意，用多次可以更加精准定位
        // console.log(imgs);
        // 2. 循环注册事件 
        for (vari = 0; i < imgs.length; i++) {
            imgs[i].onclick = function() {
                // this.src 就是我们点击图片的路径   images/2.jpg
                // console.log(this.src);
                // 把这个路径 this.src 给body 就可以了
                document.body.style.backgroundImage = 'url(' + this.src + ')';
///注意这个对路径改变的用法；
            }
        }
    </script>
</body>

6.隔行变色（鼠标经过事件 onmouseover，鼠标离开事件 onmouseout）

this.className = ' '

    <script>
        // 1.获取元素 获取的是 tbody 里面所有的行
        vartrs = document.querySelector('tbody').querySelectorAll('tr');
        // 2. 利用循环绑定注册事件
        for (vari = 0; i < trs.length; i++) {
            // 3. 鼠标经过事件 onmouseover
            trs[i].onmouseover = function() {
                    // console.log(11);
                    this.className = 'bg';
                }
                // 4. 鼠标离开事件 onmouseout
            trs[i].onmouseout = function() {
                this.className = '';
            }
        }
    </script>

7.表单的全选与取消全选（两成循环可定义为同一个变量‘i’，表单中的选项被选中之后checked=‘ture’，var可定义任意类型的变量）

<script>
  // 1. 全选和取消全选做法：  让下面所有复选框的checked属性（选中状态） 跟随 全选按钮即可
  // 获取元素
  var j_cbAll = document.getElementById('j_cbAll'); // 全选按钮
var j_tbs = document.getElementById('j_tb').getElementsByTagName('input'); // 下面所有的复选框
// 注册事件
j_cbAll.onclick = function() {
  // this.checked 它可以得到当前复选框的选中状态如果是true 就是选中，如果是false 就是未选中
  console.log(this.checked);
  for (var i = 0; i < j_tbs.length; i++) {
    j_tbs[i].checked = this.checked;//这里的this指代j_cbAll
  }
}
// 2. 下面复选框需要全部选中， 上面全选才能选中做法： 给下面所有复选框绑定点击事件，每次点击，都要循环查看下面所有的复选框是否有没选中的，如果有一个没选中的， 上面全选就不选中。
for (var i = 0; i < j_tbs.length; i++) {
  j_tbs[i].onclick = function() {
    // flag 控制全选按钮是否选中
    var flag = true;///---------------一定要注意这个变量定义的位置；
    // 每次点击下面的复选框都要循环检查者4个小按钮是否全被选中
    for (var i = 0; i < j_tbs.length; i++) {///两次可以都定义i因为这一层循环在funcion中；
      if (!j_tbs[i].checked) {
        flag = false;
        break; // 退出for循环 这样可以提高执行效率 因为只要有一个没有选中，剩下的就无需循环判断了
      }
    }
    j_cbAll.checked = flag;
  }
}
    </script>

8.getAttribute-获取属性----主要针对自定义属性

element.getAttribute('属性') get得到获取 attribute 属性的意思我们程序员自己添加的属性我们称为自定义属性 index

setAttribute-设置属性值---主要针对自定义属性

element.setAttribute('属性', '值'); 主要针对于自定义属性

removeAttribute--删除属性值

element.removeAttribute(attributename)------移除属性

<script>
        var div = document.querySelector('div');
        // 1. 获取元素的属性值
        // (1) element.属性
        console.log(div.id);
        //(2) element.getAttribute('属性')  get得到获取 attribute 属性的意思 我们程序员自己添加的属性我们称为自定义属性 index
        console.log(div.getAttribute('id'));
        console.log(div.getAttribute('index'));
        // 2. 设置元素属性值
        // (1) element.属性= '值'
        div.id = 'test