JsWEB API中的DOM元素

prtyaa 2023-12-26 19:04:35  63213

分类专栏：资讯

一、获取页面元素

首先，我们想要页面上的某个部分显示/隐藏，动画，首先获取该部分对应的元素才可以继续进行操作。

1、根据id获取元素

方法：调用document对象的getElementById方法。

参数：字符串类型的id属性值。

注意：代码执行顺序，如果js在html结构之前，会导致结构未加载，不能获取对应id的元素。
```
<body>
    <p id="po">这是一个p标签</p>
    <p id="ps">这是一个p标签</p>
    <p>这是一个p标签</p>
    <p>这是一个p标签</p>
</body>
<script>
    var po = document.getElementById("po");
    //可以使用style设置指定id的样式
    po.style.background='red';
    console.log(po);
</script>
```
2、根据标签名获取元素

方法：调用document对象的getElementsByTagName方法

参数：字符串类型的标签名。

返回值：同名的元素对象组成的数组。

注意：方法内部获取的元素是动态增加的。
```
<body>
    <p>test1</p>
    <p>test2</p>
    <p>test3</p>
    <p>test4</p>
    <div>div1</div>
    <div>div2</div>
    <div>div3</div>
</body>
<script>
    console.log(divs);
    var ps = document.getElementsByTagName("p");
    console.log(ps);
    // 遍历数组
    for(var i = 0;i < ps.length;i++){
        console.log(ps[i]);
    }
</script>
```
元素对象内部获取元素
```
<body>
    <div id="box1">
        <p>test1</p>
        <p>test2</p>
        <p>test3</p>
    </div>
    <div id="box2">
        <p>test1</p>
        <p>test2</p>
        <p>test3</p>
    </div>
</body>
<script>script
//获取id为box1下面的p标签
    var divs = document.getElementById("box1");
//元素对象内部可以继续打点调用通过标签名获取元素的方法
    var ps = divs.getElementsByTagName("p");
    console.log(ps);
</script>
```
3、根据name获取元素

因为IE和opera兼容问题，它会多选中id属性值相同的部分，因此不建议使用。

方法：调用document对象的getElementsByName方法。

参数：字符串类型的name属性值。

返回值：返回name属性值相同的元素对象组成的数组。

4、根据类名获取元素

方法：调用document对象的getElementsByClassName方法。

参数：字符串类型的class属性值

返回值：class属性值相同的元素组成的数

5、根据选择器获取元素

方法1：调用document对象的querySelector方法

通过css中的选择器去选取第一个符合条件的标签元素

方法2：调用document对象的querySelectorAll方法

通过css中的选择器去选取全部符合条件的标签元素
```
<div id="box1">
        <p>text of box1</p>
        <p class="para">text2 of box1</p>
        <p class="para">text3 of box1</p>
    </div>
    <div id="box2">
        <p>text of box2</p>
        <p class="para">text2 of box2</p>
        <p class="para">text3 of box2</p>
    </div>
    <script>
        var para = document.querySelector("#box1 .para");
        console.log(para);    //<p class="para">text2 of box1</p>
        var paras = document.querySelectorAll("#box1 .para");
        console.log(paras);  //NodeList(2) [p.para, p.para]
    </script>
```
6、自定义标签属性

getAttribute(name)：获取标签行内属性

getAttribute(name,value)：设置标签行内属性

removeAttribute(name)：移出标签行内属性

与element属性区别：上述三个方法用于获取任意的行内属性，包括自定义属性。

7、style样式属性

使用style属性方式设置的样式显示在标签行内；如果像background-color这种复合属性，要修改为驼峰命名法background-color；

我们可以使用外部引用js的方式来提高代码的复用性：
```
function MyBtn(id){
            return document.getElementById(id);
        }
```
那么怎么调用呢?
```
 var btn = MyBtn("btn");
```
总结：

掌握，没有兼容问题：
- getElementById();
- getElementsByTagName();
了解：
- getElementsByName();
- getElementsByClassName();
- querySelector();
- querySelectorAll();
二、事件

表示：在某一时间做某事

1、绑定事件三要素：

1、事件源：给谁绑定事件
2、事件类型：绑定什么类型的事件click单击
3、事件函数：事件发生后执行什么内容，写在函数内部

2、事件监听方法：
1. 绑定HTML元素属性
2. 绑定DOM对象属性
如例：
```
<input type="button" id="btn" value="点击有惊喜">
    <script>
        var btn = document.getElementById("btn");
        console.log(btn);
        btn.onclick = function(){
            alert("你好");
        } 
    </script>
```
3、常用的鼠标事件类型：
- onclick 鼠标左键单击触发
- ondbclick 鼠标左键双击触发
- onmousedown 鼠标按键按下触发
- onmouseup 鼠标按键放开时触发
- onmousemove 鼠标在元素上移动触发
- onmouseover 鼠标移动到元素上触发
- onmouseout 鼠标移出元素边界触发
4、非表单元素的属性：

例如：href、title、id、src等

可以使用元素对象打点调用属性名。
```
<a href="http://www.baidu.com" title="跳转到百度" id="link">跳转</a>
    <img src="../a.jpg" alt="鸭子" class="pic" id="pic" style="width: 500px;">
    <script>
        var link = document.getElementById("link");
        var pic = document.getElementById("pic");
        console.log(link.href);
        console.log(pic.src);
        // 等号赋值，必须是字符串类型
        pic.src = "../b.jpg";
    </script>
```
注意：如果想要获取元素的class属性可以直接打点调用className。class作为保留字不可以被直接使用。

5、获取标签内部内容的属性

innerHTML和innerText

区别在于前者获取的是包含标签的，包括空白行，而后者会过滤标签，会去掉空白行和缩进。

使用场景：

innerText：用于设置纯字符串，会按照普通字符串进行加载。

innerHTML：内部有子标签时使用，并且会按照html语法进行加载。

6、不同函数内部的this：

普通函数 ---> window对象

构造函数 --->指向生成的实例对象

对象的方法 ---> 指向的是对象本身

事件函数 ---> 指向的是事件源

补充知识点：

1、在js循环中怎么取消a标签的跳转：

return false；

便可以让a标签不再跳转页面。

2、for循环内部添加绑定事件，内部的变量i可以用this关键字代替，它指向的是触发事件的真正事件源。

for循环内部添加绑定事件，在触发时，所有的批量添加事件已经成功，触发事件都是在循环结束之后。批量绑定事件的你函数内部如果有变量i，要注意，函数执行时已经是循环结束后。循环内部的i是全局变量，在循环后执行的i变量的值是i跳出循环后的值。

网站声明：如果转载，请联系本站管理员。否则一切后果自行承担。

本文链接：https://www.xckfsq.com/news/show.html?id=31083

赞同 0

评论 0 条

JsWEB API中的DOM元素

一、获取页面元素

1、根据id获取元素

2、根据标签名获取元素

3、根据name获取元素

4、根据类名获取元素

5、根据选择器获取元素

6、自定义标签属性

7、style样式属性

总结：

二、事件

1、绑定事件三要素：

2、事件监听方法：

3、常用的鼠标事件类型：

4、非表单元素的属性：

5、获取标签内部内容的属性

6、不同函数内部的this：

补充知识点：

关注我们

JsWEB API中的DOM元素

一、获取页面元素

1、根据id获取元素

2、根据标签名获取元素

3、根据name获取元素

4、根据类名获取元素

5、根据选择器获取元素

6、自定义标签属性

7、style样式属性

总结：

二、事件

1、绑定事件三要素：

2、事件监听方法：

3、常用的鼠标事件类型：

4、非表单元素的属性：

5、获取标签内部内容的属性

6、不同函数内部的this：

补充知识点：

相关文章

关注我们