DOM 元素属性操作

最新推荐文章于 2023-02-22 07:16:04 发布

阿雾a

最新推荐文章于 2023-02-22 07:16:04 发布

阅读量305

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/weixin_58526727/article/details/118496355

版权

js 专栏收录该内容

41 篇文章 1 订阅

订阅专栏

元素属性操作

非表单元素的属性

例如：href、title、id、src 等。
调用方式：元素对象打点调用属性名，例如 obj.href。

//获取元素
var link=document.getElementById("link");
var pic=document.getElementById("pic");
//调用并打印出元素对象的属性
console.log(link.href);
console.log(link.title);
console.log(link.id);
console.log(pic.src);
console.log(pic.alt);

注意：部分的属性名跟关键字和保留字冲突，会更换写法。
class → className for → htmlFor rowspan → rowSpan
属性赋值：给元素属性赋值,等号右侧的赋值都是字符串格式。
id属性不允许进行更改

区分不同函数内部的this 的指向

普通函数—指向window 对象
构造函数—指向生成的实例对象
对象的方法—指向对象本身
事件函数—指向事件源

案例

点击按钮显示隐藏 div

<body>
    <input type="button" value="点击隐藏" id="btn">
    <div id="box">1</div>
    <script>
        var btn =document.getElementById("btn");
        var box =document.getElementById("box");
        //点击按钮让div显示或隐藏
        btn.onclick=function(){
            if (btn.value==="点击隐藏") {
                box.className = "hide";
                btn.value = "点击显示";
            }else{
                box.className = "show";
                btn.value = "点击隐藏";
            }
        }
        //在事件函数内部有this关键字，指向事件源，可以用this替代写成如下这样，功能都是相同的
       btn.onclick = function () {
           if (this.value === "点击隐藏") {
               box.className = "hide";
               this.value = "点击显示";
           } else {
               box.className = "show";
               this.value = "点击隐藏";
           }
       }
    </script>
</body>

获取标签内部内容的属性

获取标签内部内容的属性有两个：innerHTML 和 innerText
innerHTML属性，在获取标签内部内容时，如果包含标签，获取的内容会包含标签，获取的内容包括空白换行等。
innerText属性，在获取标签内部内容时，如果包含标签，获取的内容会过滤标签，获取的内容会去掉换行和缩进等空白

更改标签内容

还可以通过两个属性给双标签内部去更改内容：

innerHTML 设置属性值，有标签的字符串，会按照 HTML 语法中的标签加载。
box.innerHTML="<h2>hello JS</h2>";
h2不会显示在内容之中，会把文字按照h2的默认样式进行加载
innerText 设置属性值，有标签的字符串，会按照普通的字符加载。
box.innerText="<h2>hello JS</h2>";
h2会被当成文字加载到内容中，不会按照h2的样式来加载。

对比使用场景

innerText：在设置纯字符串时使用。
innerHTML：在设置有内部子标签结构时使用。

表单元素属性

value 用于大部分表单元素的内容获取(option除外，因为option是双标签)
type 可以获取input标签的类型(输入框或复选框等)

在 DOM 中元素对象的属性值只有一个时，会被转成布尔值显示。例如：
btn.disabled = true;

disabled 禁用属性
checked 复选框选中属性
selected 下拉菜单选中属性
下拉选项中下标为1的项被选中
opts[1].selected=true;

上面三个都是一个属性值的，设置方法相同。

表单属性案例

检测用户名是否是3-6位，密码是否是6-8位，如果不满足要求高亮显示文本框

<style>
    .bg {
        background-color: yellow;
    }
</style>
<body>
    <!-- 名字尽量不要用name,可能会引起冲突 -->
    <input type="text" id="uname"><br>
    <input type="text" id="pw"><br>
    <input type="button" id="btn" value="提交"><br>
    <script>
        var btn = document.getElementById("btn");
        var uname = document.getElementById("uname");
        var pw = document.getElementById("pw");
        //2.给按钮添加点击事件，判断位数是否正确
        btn.onclick=function(){
            // 用户名是否在3-6位，不满足则高亮显示
            if(uname.value.length<3||uname.value.length>6){
                uname.className="bg"
            }else{
                uname.className="";
            }
            // 密码位数6-8位
            if (pw.value.length < 6 || pw.value.length > 8) {
                pw.className = "bg"
            } else {
                pw.className = ""
            }
        };
    </script>
</body>

设置下拉框中的选中项

<body>
    <input type="button" value="选择" id="btn">
    <br>
    <select name="" id="food">
        <option value="">烤肉</option>
        <option value="">拉面</option>
        <option value="">麻辣烫</option>
        <option value="">小龙虾</option>
        <option value="">火锅</option>
        <option value="">炒饭</option>
    </select>
    <script>
        // 1.获取元素
        var btn = document.getElementById("btn");
        var food = document.getElementById("food");
        var opts = food.getElementsByTagName("option");
        // 2.给按钮添加点击事件
        btn.onclick = function () {
            // 3.随机选择一个option
            // 每次点击需要或区一个opts数组的随机下标
            // Math.random(),方法可以获取【0-1）之间的小数
            var n = Math.floor(Math.random() * opts.length);
            // console.log(n);
            // 设置对应的随机项的属性
            opts[n].selected = true;
        };
    </script>
</body>

搜索文本框

    <style>
        .gray {
            color: gray;
        }
        .black {
            color: black;
        }
    </style>
<body>
    <input type="text" class="gray" value="请输入搜索关键词" id="txtSearch">
    <input type="button" value="搜索" id="btnSearch">
    <script>
        //获取元素
        var txtSearch = document.getElementById("txtSearch");
        //得到焦点时可以用.onfocus
        txtSearch.onfocus = function () {
            if (this.value === "请输入搜索关键词") {
                this.value = "";
                this.className = "black";
            }
        };
        //失去焦点用.onblur
        txtSearch.onblur = function () {
            //如果用户输入的和默认内容相同，也会重置成默认样式
            if (this.value === ""|| this.value === "请输入搜索关键词") {
                this.value = "请输入搜索关键词";
                this.className = "gray";
            }
        };
    </script>
</body>

全选反选

自定义属性操作

getAttribute(name) 获取标签行内属性
setAttribute(name，value) 设置标签行内属性
box.setAttribute("class","demo");
这里的class是字符串格式的，不是标识符，所以不会与关键字冲突，不需要改成className
removeAttribute(name) 移除标签行内属性
括号内为字符串格式的属性名
与element.属性的区别: 上述三个方法用于获取任意的行内属性，包括自有属性和自定义的属性。

style 样式属性操作

使用 style 属性方式设置的样式显示在标签行内，也只能获取到行内的样式。
element.style 属性的值，是所有行内样式组成的一个样式对象，对象内部封装了所有的行内样式属性及属性值，样式对象可以继续点语法调用或更改 css 的行内样式属性，例如 width、height 等属性。
box.style.width
box.style.width="200px"
注意1：类似 background-color 这种复合属性的单一属性写法，是由多个单词组成的，要修改为驼峰命名方式书写 backgroundColor。(js中不允许使用 - 命名)
注意2：通过样式属性设置宽高、位置的属性类型是字符串，需要加上 px 等单位。

className 类名属性操作

修改元素的 className 属性相当于直接修改标签的类名。
如果需要修改多条 css 样式，可以提前将修改后的样式设置到一个类选择器中，后续通过修改类名的方式，批量修改 css 样式（如果需要修改的样式只要一条，可以使用style属性修改）
添加的类名权重要比原来的大才能覆盖掉原本样式，所以如果原本的样式类名之前有祖先级选择器，那么在css中新类名之前也要加上祖先级选择器。

阿雾a

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
DOM 元素属性操作

元素属性操作非表单元素的属性例如：href、title、id、src 等。调用方式：元素对象打点调用属性名，例如 obj.href。//获取元素var link=document.getElementById("link");var pic=document.getElementById("pic");//调用并打印出元素对象的属性console.log(link.href);console.log(link.title);console.log(link.id);console.
复制链接

扫一扫

专栏目录