0024 js的 修改标签的属性

目录

1、dom 标签属性查询

1  js对于盒子内的文本标签查询时innerHTML 获取文本内容  innerText也可以获取文本信息
2   innerText 取当前标签下子标签的文本内容时，要使用innerText 只获取标签的文本，嵌套多个标签时 拼接多个标签文本信息
3  innerHTML 只取当前标签下的文本内容，如果是嵌套标签的话，也是被当做文本数据显示，不会被游览器所执行。
4 innerText 替换文本时 是把标签对象的文本数据整体替换掉,但是替换成a标签的语法时，会那真个a标签的语法作为文本展示
5 innerHTML 替换文本为a标签时,游览器可以执行a标签的语法
6innerText 获取当前标签及其子孙文本内容,替换的内容不被游览器执行.
 innerHTML 获取当前标签文本以及子孙标签的语法, 替换的内容可以被游览器/* input标签的value值的更改 也是修改的是标签的value的属性

7 在js中通过不同的选择器包括直接选择器或者导航选择器获取到要修改的标签对象，并对属性进行赋值，完成标签value值的修改


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="c2" > <span><span>c1 value</span>123</span> </div>
<div class="c1" ><a href="#">a标签</a></div>
<script>

    var ele1 = document.querySelector('.c1')
       // 文本取值
    console.log(ele1.innerHTML)
   // 文本赋值
    // ele1.onclick = function () {
    //     this.innerText= "123"
    // }
    
    // 文本赋值
    ele1.onclick = function () {
        this.innerHTML= "<a href='#'>替换标签</a>"
        // this.innerText= "<a href='#'>a标签</a>"
    }
</script>

</body>
</html>

2、select textarea input标签的value的修改

input
1.select textarea input 标签的 可以设置默认value，使用js代码获取标签的value值，
同样的方式就是用js获取到标签的对象，打印对象的属性，或者赋值对象的属性。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<input type="text" class="c1" value="版本:v1.10">

<button class="c2">更新</button>
<script>
    var btn = document.getElementsByClassName('c2')[0]
    btn.onclick = function () {
        // 导航查找 兄弟查找
        this.previousElementSibling.value = '版本:v2.00'
    }

    /* input标签的value值的更改 也是修改的是标签的value的属性
    * 在js中通过不同的选择器包括直接选择器或者导航选择器获取到要修改的标签对象，并对属性进行赋值，完成标签value值的修改
     */
</script>


</body>
</html>
select
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<select name="pro" id="D1">
    <option value="ShangDong" >山东</option>
    <option value="ShangHai" selected="selected">上海</option>
    <option value="BeiJing" >北京</option>

</select>
<button class="btn">更新</button>

<script>
    var ele = document.getElementById('D1')
    console.log(ele.value)
    // 打印默认的select的默认值  上海

    var btn = document.getElementsByClassName('btn')[0]
    btn.onclick = function () {
        ele.value = 'BeiJing'
        // 赋值的的value要和selete的value 一致才行，不匹配的话就显示空
    }


</script>
</body>
</html>
image-20230314134046519
textarea

image-20230314134624846

posted @ 2023-03-14 13:49  mmszxc  阅读(386)  评论(0)    收藏  举报