自学内容网 自学内容网
自学内容网 > 正文

【JavaScript】万字整理 JS 内置对象和 DOM 对象 操作节点【全！】

🕗 发布于 2024-10-11 02:57 前端  javascript  

文章目录

JS 内置对象

JavaScript 内置对象是 JavaScript 语言自带的对象，它们提供了基本的功能和数据结构用于处理各种编程任务。常见的内置对象包括：

​ Array：用于在单独的变量名中存储一系列的值

​ String：用于支持对字符串的处理

​ Math：用于执行常用的数学任务，它包含了若干个数字常量和函数

​ Date：用于操作日期和时间

Date

处理日期和时间的对象，提供日期和时间操作的方法。

语法格式：var 日期对象 = new Date(参数)

参数格式：MM DD,YYYY,hh:mm:ss

var today = new Date();   // 返回当前日期和时间
var tdate = new Date("september 3,2024,17:09:12");

常用方法

方法描述
getDate()返回 Date 对象的一个月中的每一天，其值介于1～31之间
getDay()返回 Date 对象的星期中的每一天，其值介于0～6之间
getHours()返回 Date 对象的小时数，其值介于0～23之间
getMinutes()返回 Date 对象的分钟数，其值介于0～59之间
getSeconds()返回 Date 对象的秒数，其值介于0～59之间
getMonth()返回 Date 对象的月份，其值介于0～11之间
getFullYear()返回 Date 对象的年份，其值为4位数
getTime()返回自某一时刻（1970年1月1日）以来的毫秒数

制作显示年、月、日、星期几，并且显示上午（AM）和下午（PM）的十二进制的时钟

<body>
    <h3 id="myClock"></h3>
    <script>
        function updateTime() {
            var today = new Date();
            var YYYY = today.getFullYear();
            var MM = today.getMonth() + 1;
            var DD = today.getDate();
            var hh = today.getHours();
            var mm = today.getMinutes();
            var ss = today.getSeconds();
            var dayNames = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
            var day = dayNames[today.getDay()];
            var pmam = "";

            if (hh >= 12) {
                pmam = "PM";
                if (hh > 12) hh -= 12;
            } else {
                pmam = "AM";
                if (hh === 0) hh = 12;
            }

            document.getElementById("myClock").innerHTML =
                YYYY + "年" + (MM < 10 ? '0' + MM : MM) + "月" +
                (DD < 10 ? '0' + DD : DD) + "日" + "   " +
                (hh < 10 ? '0' + hh : hh) + " : " + (mm < 10 ? '0' + mm : mm) +
                " : " + (ss < 10 ? '0' + ss : ss) + "   " + pmam + "   " + day;
        }

        window.onload = function() {
            updateTime();
            setInterval(updateTime, 1000);
        };
    </script>
</body>

制作一个定时时钟 可以暂停开始时间

<body>
    <div id="clock"></div>
    <button onclick="stop()">暂停</button>
    <button onclick="start()">开始</button>
</body>
<script>
    var clock = document.getElementById("clock");
    var timeInterval;
    function create() {
        var date = new Date();
        var time = date.getFullYear() + "年" +
                   (date.getMonth() + 1) + "月" +
                   date.getDate() + "日 " +
                   padZero(date.getHours()) + ":" +
                   padZero(date.getMinutes()) + ":" +
                   padZero(date.getSeconds());
        clock.innerHTML = time;
    }
    function start() {
        if (!timeInterval) {
            timeInterval = setInterval(create, 1000);
        }
    }
    function stop() {
        clearInterval(timeInterval);
        timeInterval = null;
    }
    function padZero(num) {
        return num < 10 ? '0' + num : num;
    }
    // 页面加载后自动开始时钟
    window.onload = start;
</script>

Math

方法描述示例
ceil()对数进行上舍入Math.ceil(25.5); // 26
Math.ceil(-25.5); // -25
floor()对数进行下舍入Math.floor(25.5); // 25
Math.floor(-25.5); // -26
round()把数四舍五入为最接近的数Math.round(25.5); // 26
Math.round(-25.5); // -26
random()返回0~1之间的随机数Math.random();

如何实现返回的整数范围为2~99？

var iNum = Math.floor(Math.random() * 98 + 2);

随机选择颜色

function selColor(){
    var color = Array("红色","黄色","蓝色","绿色","橙色","青色","紫色");
    var num = Math.ceil(Math.random() * 7) - 1;
    document.getElementById("color").innerHTML = color[num];
}

定时器

JavaScript 中的定时器用于在一定时间后执行特定的代码或在指定的时间间隔内重复执行代码。

方法描述
setTimeout()设置一个定时器，该定时器在定时器到期后执行一个函数或指定的一段代码
setInterval()重复调用一个函数或执行一个代码段，在每次调用之间具有固定的时间延迟
clearInterval()清除先前通过调用 setInterval() 建立的定时器
clearTimeout()清除先前通过调用 setTimeout() 建立的定时器

setTimeout 用于在指定的延迟时间后执行一次代码。

语法：setTimeout(callback, delay, [arg1, arg2, ...])

  • callback: 必需。要执行的函数。
  • delay: 必需。延迟的时间，单位是毫秒（1秒 = 1000毫秒）。如果设置为0，callback 将在所有其他脚本执行完毕后立即执行。
  • [arg1, arg2, ...]: 可选。传递给 callback 的参数。
function greet(name) {
  console.log(`Hello, ${name}!`);
}

// 使用 setTimeout 延迟 2 秒后执行 greet 函数，并传递 'Alice' 作为参数
const timerId = setTimeout(greet, 2000, 'Alice');

// 清除定时器（如果需要）
clearTimeout(timerId);

setInterval 用于在指定的时间间隔内重复执行代码。

语法：setInterval(callback, interval, [arg1, arg2, ...])

  • callback: 必需。要执行的函数。
  • interval: 必需。时间间隔，单位是毫秒（1秒 = 1000毫秒）。这是执行 callback 的频率。
  • [arg1, arg2, ...]: 可选。传递给 callback 的参数。
function logTime() {
  console.log(`当前时间: ${new Date().toLocaleTimeString()}`);
}

// 每 1000 毫秒（即 1 秒）执行一次 logTime 函数
const intervalId = setInterval(logTime, 1000);

// 清除定时器（例如，在 10 秒后停止重复执行）
setTimeout(() => {
  clearInterval(intervalId);
  console.log('停止执行...');
}, 10000);

clearTimeout() 和 clearInterval() 应用场景

  • clearTimeout() 用于取消由 setTimeout() 设置的单次定时任务
  • clearInterval() 用于取消由 setInterval() 设置的重复定时任务
  • 需要取消单次任务时用 clearTimeout()，需要取消周期性任务时用 clearInterval()。

DOM 对象

Document Object Model（文档对象模型）

DOM 是针对 HTML 文档的一个 API (应用程序编程接口 Application Programming Interface)，描绘了一个层次化的节点树，允许开发人员添加、移除和修改页面元素。

DOM 分类：DOM Core、HTML-DOM、CSS-DOM

DOM 操作

在 DOM 中，文档被视作一个树形结构，其中每一个部分（标签、文本、属性等）都被表示为一个节点。其中每个节点都是一个特定类型的对象。节点是 DOM 树的基本组成部分，它们具有层级结构和父子关系。

创建元素、删除元素、查询元素、修改元素

操作元素的属性，样式，内容

节点关系

<div>
    <p>One</p>
    <p>Two</p>
</div>

父节点：一个节点的直接上级节点。上例中 <div> 是 <p> 的父节点

子节点：一个节点直接包含的下级节点。上例中 <p> 是 <div> 的子节点

兄弟节点：具有相同父节点的节点。上例中 两个 <p> 节点是兄弟节点

根节点：DOM 树的顶级节点。在整个 HTML 文档中，document 对象代表根节点。

叶子节点：没有任何子节点的节点。在 <p>One</p> 中，"One" 的Text节点是叶子节点

访问节点

1、使用 getElement 系列方法访问指定节点

getElementById()、getElementsByName()、getElementsByTagName()、getElementByClassName()

2、根据层次关系访问节点

在DOM（文档对象模型）中，firstChild, lastChild, nextSibling, 和 previousSibling 与 firstElementChild, lastElementChild, nextElementSibling, 和 previousElementSibling 是两组属性，它们用于访问节点之间的关系。但是这两组属性之间有一个关键的区别：前者可以返回任何类型的节点（包括文本节点、注释节点等），而后者只返回元素节点（即标签节点）。

节点属性（返回值包括文本节点和元素节点等）

属性名称描述
parentNode返回节点的父节点
childNodes返回子节点集合，childNodes[i] 包含文本和元素
firstChild返回元素的第一个子节点，这个子节点可以是任何类型的节点，比如文本节点或注释节点。
lastChild返回元素的最后一个子节点，同样这个节点可以是非元素节点。
nextSibling返回紧跟在当前节点之后的下一个兄弟节点，这可能是一个文本节点或其他非元素节点。
previousSibling返回位于当前节点之前的上一个兄弟节点，这也可能是非元素节点。

element 属性（有兼容性问题，IE9以上才支持）

属性名称描述
firstElementChild返回元素的第一个子元素节点，忽略所有其他类型的节点（如文本节点、注释节点）。
lastElementChild返回元素的最后一个子元素节点，同样忽略了非元素节点。
nextElementSibling返回紧跟在当前元素之后的下一个兄弟元素节点，跳过所有非元素节点。
previousElementSibling返回位于当前元素之前的上一个兄弟元素节点，也跳过了非元素节点。
oNext  = oParent.nextElementSibling     ||  oParent.nextSibling   
oPre   = oParent.previousElementSibling ||  oParent.previousSibling  
oFirst = oParent.firstElementChild      ||  oParent.firstChild   
oLast  = oParent.lastElementChild       ||  oParent.lastChild

如果想处理的是HTML元素节点而不是文本或注释等其他类型节点时，应该使用带有 Element 前缀的属性。

parentNode 和 childNodes 用于访问和操作节点之间的关系。

<body>
    <div id="parent">
        <!-- 这是一个注释 -->
        <p id="firstPara">第一个段落</p>
        <span>中间的内容</span>
        <p id="secondPara">第二个段落</p>
    </div>

    <script>
        // 获取父元素
        var parentDiv = document.getElementById('parent');
        // 打印父元素的子节点
        console.log("父元素的子节点: ");
        for (var i = 0; i < parentDiv.childNodes.length; i++) {
            var child = parentDiv.childNodes[i];
            console.log(`- Type: ${child.nodeType}, Value: ${child.nodeValue || child.outerHTML}`);
        }
        // 获取特定子元素并打印其父节点
        var firstPara = document.getElementById('firstPara');
        console.log("\n第一个子元素的父节点: ");
        console.log(firstPara.parentNode.outerHTML);
    </script>
</body>

父元素的子节点: 
- Type: 3, Value: 
    
- Type: 8, Value:  这是一个注释 
- Type: 3, Value: 
    
- Type: 1, Value: <p id="firstPara">第一个段落</p>
- Type: 3, Value: 
    
- Type: 1, Value: <span>中间的内容</span>
- Type: 3, Value: 
    
- Type: 1, Value: <p id="secondPara">第二个段落</p>
- Type: 3, Value: 
  
第一个子元素的父节点: 
<div id="parent">
    <!-- 这是一个注释 -->
    <p id="firstPara">第一个段落</p>
    <span>中间的内容</span>
    <p id="secondPara">第二个段落</p>
  </div>

节点信息

nodeName：节点名称

nodeValue：节点值

nodeType：节点类型

节点类型描述NodeType值
元素节点（Element）代表 HTML 或 XML 文档中的一个元素。例如，<div>、<p>、<a> 等都是元素节点1
文本节点（Text）代表元素的属性。例如，<a href="https://example.com"> 中的 href 是一个属性节点。注意：在现代 DOM API 中，属性节点不再单独存在，属性通常直接作为元素的属性处理2
属性节点（Attribute）代表元素中的文本内容。例如，<p>Hello World</p> 中的 “Hello World”3
注释节点（Comment）代表文档中的注释。例如，<!-- This is a comment --> 是一个注释节点8
文档节点（Document）代表整个文档。它是 DOM 树的根节点9

操作节点

操作属性

Element 接口方法

操作描述
getAttribute(“属性名”)根据指定属性名称，获得元素属性值
setAttribute(“属性名”,“属性值”)设置元素某个属性的值
removeAttribute(“属性名”)移除指定属性

合法属性：id、class、src、value、type、name

<!-- 获取属性 -->
<div id="box"></div>
<script>
    var box = document.getElementById("box");
    console.log(box.getAttribute("id")); // 输出:box
</script>

// 设置自定义属性
box.setAttribute("mycolor", "red");
console.log(box.getAttribute("mycolor")); // 输出:red

//移除自定义属性
box.removeAttribute("mycolor")
box.style.background = box.getAttribute("mycolor") // null

操作内容

innerHTML 和 innerText 适合于动态地更新页面上的特定部分，而 document.write 一般仅在页面初始化时使用

innerHTML 属性 用来获取或设置指定元素的HTML内容。

// 获取元素的HTML内容
var content = element.innerHTML;

// 设置元素的HTML内容
element.innerHTML = '<p>这是一个段落。</p>';

innerText 属性 用来获取或设置指定元素的文本内容（不包括HTML标签）。

// 获取元素的纯文本内容
var textContent = element.innerText;

// 设置元素的纯文本内容
element.innerText = '这是一些文本。';

创建插入节点

名称描述
createElement(tagName)创建一个标签名为tagName的新元素节点
A.appendChild(B)把B节点追加至A节点的末尾
insertBefore(A,B)把A节点插入到B节点之前
cloneNode(deep)复制某个指定的节点
<body>
    <div id="container">
        <p>原始段落</p>
    </div>
    <script>
        // 创建一个新的 <div> 元素
        let newDiv = document.createElement('div');
        newDiv.textContent = '这是一个新创建的 div';

        // 获取现有的容器 <div>
        let container = document.getElementById('container');

        // 将新的 <div> 添加到容器中
        container.appendChild(newDiv);

        // 创建一个新的 <p> 元素
        let newParagraph = document.createElement('p');
        newParagraph.textContent = '这是一个新段落';

        // 在现有的段落之前插入新的段落
        container.insertBefore(newParagraph, container.children[0]);

        // 克隆现有的 <div> 元素
        let clonedDiv = container.cloneNode(true);

        // 将克隆的 <div> 元素添加到页面中
        document.body.appendChild(clonedDiv);
    </script>
</body>

这是一个新段落
原始段落
这是一个新创建的 div
这是一个新段落
原始段落
这是一个新创建的 div

删除替换节点

名称描述
removeChild( node)删除指定的节点
replaceChild( newNode, oldNode)属性attr用其他的节点替换指定的节点
var delNode = document.getElementById("first");
delNode.parentNode.removeChild(delNode);

先获取 ID 为 "first" 的元素并获取该元素的父节点。然后从父节点删除 delNode 元素

var oldNode = document.getElementById("second");
var newNode = document.createElement("img");
newNode.setAttribute("src", "images/f03.jpg");
oldNode.parentNode.replaceChild(newNode, oldNode);

先获取 ID 为 "second" 的元素，接着创建一个新的 <img> 元素，设置新元素的 src 属性为 "images/f03.jpg"，用新创建的 <img> 元素替换了原有的 oldNode 元素

操作样式

style 属性

HTML元素.style.样式属性 = "值"

访问或设置内联样式（即直接写在HTML标签中的style属性）

读取一个元素的内联样式值

var element = document.getElementById("myElement");
console.log(element.style.color); // 假设 myElement 有一个内联样式 color: red;

改变一个元素的内联样式

<div id="myElement" style="width:100px;height:100px;background-color:blue;"></div>
<script>
    var element = document.getElementById("myElement");
    // 改变背景颜色
    element.style.backgroundColor = "red";
    // 改变宽度
    element.style.width = "200px";
    // 添加边框
    element.style.border = "2px solid black";
    // 修改字体大小
    element.style.fontSize = "16px";
</script>

注意事项

  • 使用 element.style 只能访问和修改内联样式。对于通过外部样式表或内部样式表应用到元素上的样式需要使用 window.getComputedStyle 来获取。

  • 当设置CSS属性时，JavaScript 中的属性名通常需要遵循驼峰命名法。例如，CSS中的background-color在JavaScript中应写作backgroundColor，font-size应写作fontSize等。

  • 如果你想同时设置多个样式属性，可以考虑使用style.cssText属性设置整个内联样式的文本内容。例：

    element.style.cssText = "width: 200px; height: 200px; background-color: green;";

className 属性

HTML元素.className = "样式名称"

获取或设置 HTML 元素的 class 属性值

将一个元素的类名设置为单一的值

<div id="myElement" class="oldClass">这是一个div元素</div>
<script>
    var element = document.getElementById("myElement");
    // 将类名设置为 "newClass"
    element.className = "newClass";
</script>

结合使用 classList API 根据条件动态地添加或移除类名

<div id="myElement" class="initialClass">这是一个div元素</div>
<button onclick="toggleClass()">点击切换类名</button>
<script>
    function toggleClass() {
        var element = document.getElementById("myElement");
        // 检查是否已经有 'active' 类名
        if (element.classList.contains('active')) { // 如果有，就移除它
            element.classList.remove('active');
        } else { // 如果没有，就添加它
            element.classList.add('active');
        }
    }
</script>

value 属性

value 属性是属于 HTMLInputElement、HTMLSelectElement 和 HTMLTextAreaElement 等表单元素接口的属性。它用于获取或设置这些表单控件的当前值。

Element 接口是最基础的接口，定义了所有HTML和XML元素的基本属性和方法。例如：id、className、getAttribute、setAttribute、innerHTML、innerText 等。HTMLElement 继承自 Element，提供了更多特定于HTML元素的属性和方法，例如：title、lang、hidden、contentEditable、dataset 等。表单元素接口（如 HTMLInputElement、HTMLSelectElement、HTMLTextAreaElement 等）都继承自 HTMLElement 接口。这些接口进一步扩展了 HTMLElement 接口，提供了与特定表单控件相关的属性和方法。例如：HTMLInputElement 提供了 value、type、checked（对于复选框和单选按钮）、disabled 等属性。HTMLSelectElement 提供了 value、options（包含所有选项的 HTMLOptionsCollection）、selectedIndex 等属性。HTMLTextAreaElement 提供了 value 属性来获取或设置多行文本框的内容。

文本输入框或密码输入框

<input type="text" id="myInput" value="默认值">
<script>
    // 获取值
    var inputValue = document.getElementById("myInput").value;
    // 设置值
    document.getElementById("myInput").value = "新值";
</script>

单选按钮

<input type="radio" name="myRadio" id="option1" value="选项1" checked>
<input type="radio" name="myRadio" id="option2" value="选项2">
<script>
    // 获取选中的单选按钮的值
    var selectedValue = document.querySelector('input[name="myRadio"]:checked').value;
</script>

复选框

<input type="checkbox" id="myCheckbox" value="选项">
<script>
    // 获取值（注意：对于复选框，通常检查的是 checked 属性）
    var isChecked = document.getElementById("myCheckbox").checked;

    // 设置值（通常是设置 checked 属性）
    document.getElementById("myCheckbox").checked = true; // 或 false
</script>

下拉列表

<select id="mySelect">
    <option value="选项1">选项1</option>
    <option value="选项2">选项2</option>
</select>
<script>
    // 获取选中的选项的值
    var selectedOptionValue = document.getElementById("mySelect").value;

    // 设置选中的选项
    document.getElementById("mySelect").value = "选项2";
</script>

多行文本域

<textarea id="myTextarea" rows="4" cols="50">默认文本</textarea>
<script>
    // 获取值
    var textareaValue = document.getElementById("myTextarea").value;

    // 设置值
    document.getElementById("myTextarea").value = "新文本";
</script>

获取元素位置

HTML 中元素属性应用

属性描述
offsetLeft返回当前元素左边界到它上级元素的左边界的距离，只读属性
offsetTop返回当前元素上边界到它上级元素的上边界的距离，只读属性
offsetHeight返回元素的高度
offsetWidth返回元素的宽度
offsetParent返回元素的偏移容器，即对最近的动态定位的包含元素的引用
scrollTop返回匹配元素的滚动条的垂直位置
scrollLeft返回匹配元素的滚动条的水平位置
clientWidth返回元素的可见宽度
clientHeight返回元素的可见高度
document.documentElement.scrollTop;   ||  document.body.scrollTop;
document.documentElement.scrollLeft;  ||  document.body.scrollLeft;

原文地址：https://blog.csdn.net/m0_66584716/article/details/142826043

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

相关文章

自学内容网
Copyright © 2015-2024