dom-标签查找、属性文本操作、class\style操作、事件、标签增删改查

最新推荐文章于 2024-03-30 11:42:57 发布

易辰_

最新推荐文章于 2024-03-30 11:42:57 发布

阅读量1.4k

点赞数

分类专栏： Jquery\Js\Ajax

本文链接：https://blog.csdn.net/u013210620/article/details/78922974

版权

Jquery\Js\Ajax 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

window对象

alert()            显示带有一段消息和一个确认按钮的警告框。
setInterval()      按照指定的周期（以毫秒计）来调用函数或计算表达式。
clearInterval()    取消由 setInterval() 设置的 timeout。
setTimeout()       在指定的毫秒数后调用函数或计算表达式。
clearTimeout()     取消由 setTimeout() 方法设置的 timeout。
scrollTo()         把内容滚动到指定的坐标。

confirm()          显示带有一段消息以及确认按钮和取消按钮的对话框。
prompt()           显示可提示用户输入的对话框。
open()             打开一个新的浏览器窗口或查找一个已命名的窗口。
close()            关闭浏览器窗口。

跑马灯效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>跑马灯示例</title>
    <script>
        function run() {
            // 找到id值为i1的标签
            var ele = document.getElementById("i1");
            // 获取标签的文本内容，存到str变量
            var str = ele.innerText;
            // 把字符串第一位拿出来
            var firstStr = str.charAt(0);
            // 拼到最后组成新的字符串
            var newText = str.slice(1) + firstStr;
            // 赋值给标签的文本内容
            ele.innerText = newText;
        }
        var timmer = setInterval(run, 500);
        clearInterval(timmer);

    </script>
</head>
<body>

<h1 id="i1">课不翻车!哪吒老师讲</h1>
</body>
</html>

history对象

history.forward()  // 前进一页
history.back()  // 后退一页
history.go(n)  //  前进n页

location对象

location.href  获取URL
location.href="URL" // 跳转到指定页面
location.reload() 重新加载页面

dom标签查找

DOM标准规定HTML文档中的每个成分都是一个节点(node)：

文档节点(document对象)：代表整个文档
元素节点(element 对象)：代表一个元素（标签）
文本节点(text对象)：代表元素（标签）中的文本
属性节点(attribute对象)：代表一个属性，元素（标签）才有属性
注释是注释节点(comment对象)

查找标签

document.getElementById                根据ID获取一个标签
document.getElementsByName         根据name属性获取标签集合
document.getElementsByClassName 根据class属性获取
document.getElementsByTagName    根据标签名获取标签合集

间接查找

parentElement 父节点标签元素
children  所有子标签
firstElementChild  第一个子标签元素
lastElementChild  最后一个子标签元素
nextElementSibling  下一个兄弟标签元素
previousElementSibling  上一个兄弟标签元素
// 注意节点和标签的区别，主要记上面的
parentNode  父节点
childNodes  所有子节点
firstChild  第一个子节点
lastChild  最后一个子节点
nextSibling 下一个兄弟节点
previousSibling  上一个兄弟节点

属性-文本节点操作

属性节点

attributes  获取所有标签属性
getAttribute()  获取指定标签属性
setAttribute()  设置指定标签属
removeAttribute() 移除指定标签属

var s = document.createAttribute("age")
s.nodeValue = "18"
创建age属性，设置属性值为18

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style type="text/css">
        .democlass {
            color: red;
        }
    </style>
</head>
<body>

<h1>Hello World</h1>
<p id="demo">单击按钮来创建一个“类”属性值“democlass”插入到上面的H1元素。</p>
<button onclick="myFunction()">点我</button>
<script>
    function myFunction() {
        var h1 = document.getElementsByTagName("H1")[0];
        var att = document.createAttribute("class");
        att.nodeValue = "democlass"
        h1.setAttributeNode(att);
    }
</script>

</body>
</html>

文本节点
这里写图片描述

操作class和style

操作class类

className  获取所有样式类名(字符串)
.classList 获取所有样式类名
classList.remove(cls)  删除指定类
classList.add(cls)  添加类
classList.contains(cls)  存在返回true，否则返回false
classList.toggle(cls)  存在就删除，否则添加

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>class属性操作</title>
    <style>
        .c1 {
            height: 300px;
            width: 300px;
            border-radius: 150px;
            background-color: red;
        }

        .c2 {
            background-color: yellow;
        }
    </style>
    <script>
        function change() {

            // 找标签，改背景颜色
            var d1 = document.getElementById("d1");

            console.log(d1.className)

            d1.classList.toggle("c2");
        }

    </script>
</head>
<body>

<div id="d1" class="c1"></div>
<input type="button" value="切换" onclick="change();">

</body>
</html>

指定CSS操作
JS操作CSS属性的规律：

obj.style.backgroundColor="red"

1.对于没有中横线的CSS属性一般直接使用style.属性名即可。如：


obj.style.margin
obj.style.width
obj.style.left
obj.style.position

2.对含有中横线的CSS属性，将中横线后面的第一个字母换成大写即可。如：

obj.style.marginTop
obj.style.borderLeftWidth
obj.style.zIndex
obj.style.fontFamily

事件

onclick        当用户点击某个对象时调用的事件句柄。
ondblclick     当用户双击某个对象时调用的事件句柄。

onfocus        元素获得焦点。               //练习：输入框
onblur         元素失去焦点。               应用场景：用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证.
onchange       域的内容被改变。             应用场景：通常用于表单元素,当元素内容被改变时触发.（三级联动）

onkeydown      某个键盘按键被按下。          应用场景: 当用户在最后一个输入框按下回车按键时,表单提交.
onkeypress     某个键盘按键被按下并松开。
onkeyup        某个键盘按键被松开。
onload         一张页面或一幅图像完成加载。
onmousedown    鼠标按钮被按下。
onmousemove    鼠标被移动。
onmouseout     鼠标从某元素移开。
onmouseover    鼠标移到某元素之上。
onmouseleave   鼠标从元素离开

onselect      文本被选中。
onsubmit      确认按钮被点击。

文档节点的增删改查

增

createElement(name)  创建节点（标签）
appendChild() 末尾添加节点，并返回新增节点
insertBefore()  参照节点之前插入节点，两个参数：要插入的节点和参照节点
insertAfter()  参照节点之后插入节点，两个参数：要插入的节点和参照节点

删

查找到要删除的元素
获取它的父元素
使用removeChild()方法删除

改

第一种方式:

    使用上面增和删结合完成修改

第二种方式:

    使用setAttribute();方法修改属性          

    使用innerHTML属性修改元素的内容

查

使用之前介绍的方法.