JavaScript-DOM

最新推荐文章于 2024-06-01 00:00:00 发布
最新推荐文章于 2024-06-01 00:00:00 发布
阅读量307 收藏
点赞数
分类专栏： javaScript 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40678222/article/details/102594385
版权

目录

 

1.0 概述

2.0获取DOM元素

1.0 通过id获取指定元素

2.0通过class名称获取

3.0通过name名称获取

4.0 通过标签名称获取

5.0 通过选择器获取

6.0 通过选择器获取全部

7.0 创建节点

8.0 添加节点

9.0 节点插入

10.0 删除节点

11.0 克隆节点

3.0元素属性操作

4.0 元素内容的操作

5.0 DOM事件

6.0 定时器

1.0 概述

1.0 什么是Window?

window:是一个全局对象,代表浏览器中打开的窗口,每个窗口都是一个Window对象

2.0 什么是document?

document:是Window的一个属性,这个属性是一个对象.它代表当前窗口中的整个网页,

通过document对象我们可以操作整个网页上的所有内容

3.0 什么是DOM?

DOM:定义了访问和操作 HTML文档(网页)的标准方法,全称为:Document Object Model 文档模型对象

注:在JavaScript中的HTML标签也叫做DOM元素,使用document的时候前面不用加window

2.0获取DOM元素

1.0 通过id获取指定元素

document.getElementById("id名称")

注:由于id不可以重复,所以找到了就会将找到的标签包装成一个对象返回给我们,找不到就返回Null

DOM操作返回的是一个对象,这个对象是宿主类型对象(由浏览器提供对象)

2.0通过class名称获取

document.getElementsByClassName("类名");

 

3.0通过name名称获取

document.getElementsByName("name名称");

4.0 通过标签名称获取

document.getElementsByTagName("div");

5.0 通过选择器获取

注: querySelector只会返回根据指定选择器找到的第一个元素

document.querySelector("选择器名称");

6.0 通过选择器获取全部

document.querySelectorAll("选择器名称");

1.0获取指定元素所有子元素

语法: 元素名.children   获取到的是指定元素中所有的子元素

          元素名.childNodes  获取到指定元素中所有的节点

节点:DOM对象(document),这个对象以树的形式保存了界面上的所有内容,HTMl页面每一部分都是由节点(标签(元素),文本,属性)

常量值描述
Node.ELEMENT_NODE1一个 元素 节点，例如 <p> 和 <div>。
Node.TEXT_NODE3Element 或者 Attr 中实际的  文字
Node.CDATA_SECTION_NODE4一个 CDATASection，例如 <!CDATA[[ … ]]>。
Node.PROCESSING_INSTRUCTION_NODE7一个用于XML文档的 ProcessingInstruction ，例如 <?xml-stylesheet ... ?> 声明。
Node.COMMENT_NODE8一个 Comment 节点。
Node.DOCUMENT_NODE9一个 Document 节点。
Node.DOCUMENT_TYPE_NODE10描述文档类型的 DocumentType 节点。例如 <!DOCTYPE html>  就是用于 HTML5 的。
Node.DOCUMENT_FRAGMENT_NODE11一个 DocumentFragment 节点
let Div = document.querySelector("div");
    console.log(Div.children);
    console.log(Div.childNodes);

    for(let node of Div.childNodes){
        console.log(node.nodeType); //文本节点输出3 其它节点输出1
    }

2.0 节点

获取指定元素的所有子元素 let  oDiv = document.querySelector("div");

                                             let item = document.querySelector(".item")   

 

获取指定节点中的第一个子节点oDiv.firstChild 
获取指定元素中的第一个子元素oDiv.firstElementChild 
获取指定节点中最后一个子节点oDiv.lastChild 
获取指定元素中的最后一个子元素oDiv.lastElementChild 
通过主元素获取父元素item.parentElement

结果相同

企业开发中的兼容性写法

parentEle = item.parentElement | |  item.parentNode

 

通过主元素获取父节点item.parentNode
获取相邻的上一个节点item.previousSibling 
获取相邻的上一个元素item.previousElementSibling 
获取相邻的下一个节点item.nextSibling 
获取相邻的下一个元素item.nextElementSibling 

7.0 创建节点

创建节点: document.createElement("标签名称");

将标签添加到某一个标签中 : oDiv.appendChild(oSpan);

let oSpan = document.createElement("span"); //创建一个span标签
    let oA = document.createElement("a");  //创建一个a标签
    let oDiv = document.querySelector("div");
    oDiv.appendChild(oSpan); // 将创建的span标签添加到第一个div标签中
    oDiv.appendChild(oA);

8.0 添加节点

Node.appendChild() 方法将一个节点添加到指定父节点的子节点列表末尾。

语法:

var child = node.appendChild(child);
  • node 是要插入子节点的父节点.
  • child 即是参数又是这个方法的返回值.

注意点: appendChild方法会将指定的元素添加到最后

9.0 节点插入

Node.insertBefore() 方法在参考节点之前插入一个拥有指定父节点的子节点。

语法:

var insertedNode = parentNode.insertBefore(newNode, referenceNode);

  • insertedNode 已经经过插入newNode的新的节点
  • parentNode 新插入节点的父节点
  • newNode 用于插入的节点
  • referenceNode newNode将要插在这个节点之前

如果referenceElement为null则newNode将被插入到子节点的末尾。

let oSpan = document.createElement("span"); //创建一个span标签
    let oDiv = document.querySelector("div");
    let oform = document.querySelector("form");
    oDiv.insertBefore(oSpan,oform); // 将新创建的span标签添加到form标签的前面

10.0 删除节点

注:在JavaScript中如果想要删除某一个元素,只能通过对应的父元素来删除,不能自己删除自己.

 let oDiv = document.querySelector("div");
    oDiv.parentNode.removeChild(oDiv); //获取div标签的父节点,将div标签删除掉

11.0 克隆节点

Node.cloneNode() 方法返回调用该方法的节点的一个副本.

语法:
var dupNode = node.cloneNode(deep);

node

将要被克隆的节点

dupNode

克隆生成的副本节点

deep 可选

是否采用深度克隆,如果为true,则该节点的所有后代节点也都会被克隆,如果为false,则只克隆该节点本身.

注: cloneNode方法默认不会克隆标签中的子元素,如果想克隆主元素需要传递一个true

et oDiv = document.querySelector("div");
    //let newDiv = oDiv.cloneNode(); // 克隆后的div不包含原div中的元素
    let newDiv = oDiv.cloneNode(true); // 克隆后的div包含原div中的元素

    console.log(newDiv);

3.0元素属性操作

无论是通过document创建还是查询出来的标签,系统都会将元素包装成一个对象返回给我们,系统在包装这个对象的时候会自动将元素的属性都包装到这个对象中,所以只要拿到这个对象就可以拿到标签属性,操作标签属性.

获取元素属性

语法:

元素对象名称.属性名称  该方法无法显示自定义属性

元素对象名称.getAttribute("属性名称")   该方法可以显示自定义属性

<img src="../images/timg.jpg" alt="无法显示图片" title="图片名称" kk="显示自定义属性">
<script>
    let oImg = document.querySelector("img");
    console.log(oImg.src, oImg.alt, oImg.title);
    // http://localhost:63342/%E7%BD%91%E9%A1%B5%E5%BC%80%E5%8F%91%E7%BB%83%E4%B9%A0/images/timg.jpg 无法显示图片 图片名称
    console.log(oImg.kk);  //undefined 无法显示自定义属性
    console.log(oImg.getAttribute("alt"));  //无法显示图片
    console.log(oImg.getAttribute("kk"));  //显示自定义属性

修改元素属性

语法:

元素对象名称.属性名称 = "新的值";

元素对象名称.setAttribute("属性名称","新的值") ;

 let oImg = document.querySelector("img");
    oImg.setAttribute("title","修改title名称");

新增元素属性

语法:

元素对象名称.setAttribute("属性名称","值") ;

注:setAttribute方法如果属性不存在则新增加,如果属性存在则修改

删除元素属性

语法:

元素对象名称.属性名称 = "";  赋值空字符串    注:无法清空自定义属性

元素对象名称.removeAttribute("属性名称","新的值") ;    注:可以清空自定义属性

<img src="../images/timg.jpg" alt="无法显示图片" title="图片名称" kk="显示自定义属性">
<script>
    let oImg = document.querySelector("img");
    oImg.alt = "";
    oImg.removeAttribute("title");

4.0 元素内容的操作

1.0 获取元素内容

let oDiv = document.querySelector("div");

获取元素内容
oDiv.innerHTML获取的内容包含标签,获取的内容不会去掉两端的空格
oDiv.innerText获取的内容不包含标签,获取的内容会去掉两端的空格
oDiv.textContent获取的内容不包含标签,获取的内容不会去掉两端的空格

2.0 设置元素内容

设置元素内容
oDiv.innerHTML = "想要设置的内容"新内容都会覆盖原有的内容,通过innerHTML设置数据,数据中包含标签时,会转换成标签之后再添加 
oDiv.innerText = "想要设置的内容"新内容都会覆盖原有的内容,通过innerText设置数据,数据中包含标签时,不会转换为标签,会当做一个字符串直接设置

在浏览器中存在兼容性问题

 function setTEXT(obj,text) {
        if("textContent" in obj){
            obj.textContent = text;
        }else {
            obj.innerText = text;
        }
    }

    setTEXT(oDiv,"www.baidu.com");

 

oDiv.textContent = "想要设置的内容"新内容都会覆盖原有的内容,通过textContent设置数据,数据中包含标签时,不会转换为标签,会当做一个字符串直接设置

3.0 设置元素样式

let oDiv = document.querySelector("div");

第一种方法

oDiv.className = "bodx";  给标签设置class名称,引用CSS样式

第二种方法

oDiv.style.width = "300px";
oDiv.style.height = "300px";
oDiv.style.backgroundColor = "green";

注:过去CSS中通过 - 连接的样式,在JS中都是驼峰命名法.在通过JS添加的样式是内联样式,会覆盖掉同名的CSS样式

4.0 获取元素样式

let oDiv = document.querySelector("div");

方法一:

oDiv.style.width = "300px";
console.log(oDiv.style.width);

注:通过style属性只能获取到行内样式的属性值,不能获取到CSS设置的属性值

方法二:

let style = window.getComputedStyle(oDiv);
 console.log(style.width);

注:要想获取到CSS设置的属性值,必须通过getComputedStyle方法来获取,getComputedStyle接收一个参数,这个参数就是要获取的元素对象,该方法返回一个对象,这个对象保存了CSS设置的样式和属性.

5.0 DOM事件

1.0 事件:用户和浏览器之间的交互行为,我们称之为事件,如:点击,移入,移出.

2.0 如何绑定事件

在JavaScript中所有的HTML标签都可以添加事件

元素.事件名称 = function(){};

当对应事件被触发时候就会自动执行function中的代码

注:如果给元素添加了和系统同名的事件,我们添加的事件不会覆盖系统添加的事件,若要覆盖,在函数末尾添加 return false;

<body>
<a href="https://www.baidu.com/">打开百度首页</a>

<script>
    let oA = document.querySelector("a");
    oA.onclick = function () {
        alert("打开百度");
        return false;  //用我们添加的属性覆盖掉系统同名的事件
    }
</script>

6.0 定时器

1.0 重复执行的计时器  setInterval()   clearInterval();

<button id="start">开始</button>
<button id="end">结束</button>

<script>
    let startButton = document.querySelector("#start");
    let endButton = document.querySelector("#end");
    let id = null;

    startButton.onclick = function () {
        id = setInterval(function () {
            console.log("定义");
        },1000)
    }

    endButton.onclick = function () {
        clearInterval(id);
    }
</script>

2.0 只执行一次的定时器  setTimeout()   clearTimeout();

<button id="start">开始</button>
<button id="end">结束</button>

<script>
    let startButton = document.querySelector("#start");
    let endButton = document.querySelector("#end");
    let id = null;

    startButton.onclick = function () {
        id = setTimeout(function () {
            console.log("定义");
        },5000)
    };

    endButton.onclick = function () {
        clearTimeout(id);
    };

 

九天小牛
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Javascript-DOM
03-26
JavaScript DOM（Document Object Model）是Web开发中的一个关键概念，它是一种标准的编程接口，用于HTML和...在`Javascript-DOM-main`这个项目中，可能包含了练习代码和示例，可以帮助你更好地理解和应用DOM相关知识。
javaScript-dom
03-17
JavaScript DOM（Document Object Model）是Web开发中的一个关键概念，它允许我们通过编程方式与HTML、XML或SVG等文档...在项目"javaScript-dom-master"中，可能包含了一些示例代码或教程，用于实践和学习这些DOM操作。
javaScript---DOM操作
平安喜乐
10-11 618
html-DOM操作与一些案例
JS dom节点实现移上、移下的效果（表格）
@宝藏男孩
03-23 1321
如何用DOM节点去实现表格内容移上 移下的效果，我们这里需要了解两个知识点！ previousSibling 属性返回选定节点的上一个同级节点（在相同树层级中的前一个节点） 返回节点以节点对象返回 语法：document.getElementById("tr").previousSibling 注意：如果不存在这样的节点，则该属性返回 null Exp: previoussibling获取的兄...
javascript DOM 属性详解：读取、修改、移除
最新发布
大剑师兰特的GIS世界
06-01 1969
在JavaScript中，DOM（Document Object Model，文档对象模型）属性操作允许你读取、修改或删除HTML元素的属性，从而动态地改变页面内容或样式。以下是关于DOM属性操作的详细说明、示例代码以及注意事项。
js中dom节点操作
军火库
01-09 360
最近还整理一份JavaScript与ES的笔记，一共25个重要的知识点，对每个知识点都进行了讲解和分析。能帮你快速掌握JavaScript与ES的相关知识，提升工作效率。
一文透析js节点操作（吐血整理）
qq_52372698的博客
02-02 815
利用节点层级关系获取元素 利用父子兄节点关系获取元素 逻辑性强，但是兼容性稍差 一般地，节点至少拥有nodeType（节点类型）、nodeName（节点名称）和nodeValue（节点值）这三个基本属性
js节点操作
qq_74315744的博客
10-19 63
（3）parentNode.append(element)：把指定的元素添加到指定的父元素的子节点最后，没有返回值；（2）parentNode.insertBefore(child)：把指定节点添加到指定的父节点的指定子节点前面；（4）parentNode.prepend(element)：把指定的元素添加到指定的父元素的最前面，没有返回值。（1）parentNode.appendChild(child)：把指定节点添加到指定的父节点的子节点最后；浅拷贝只会复制节点元素，不会复制节点内容。
Javascript-DOM编程艺术研究.docx
11-17
在实际应用中，JavaScript-DOM编程的艺术不仅包括理解和掌握DOM的基本概念，还包括优化DOM操作以提高性能，比如减少DOM遍历，利用文档碎片（DocumentFragment）进行批量操作，以及使用事件委托等技术。学习DOM编程...
JavaScript-DOM实战案例
09-18
在JavaScript中，我们可以利用DOM API来创建、删除、修改或者查找这些节点，从而实现对网页内容的动态操作。 在这个"JavaScript-DOM实战案例"中，包含了两个主要的资源部分：`css`和`img`。 1. **CSS（Cascading ...
判断滚动条到底部的JS代码
12-12
判断滚动条到底部，需要用到DOM的三个属性值，即scrollTop、clientHeight、scrollHeight。 scrollTop为滚动条在Y轴上的滚动距离。 clientHeight为内容可视区域的高度。 scrollHeight为内容可视区域的高度加上溢出（滚动）的距离。 从这个三个属性的介绍就可以看出来，滚动条到底部的条件即为scrollTop + clientHeight == scrollHeight。 废话不多少说，赶紧上代码（兼容不同的浏览器）。   代码如下://滚动条在Y轴上的滚动距离 function getScrollTop(){　　var scrollTop
JS之把节点插在另一个节点之后
_JS的博客
09-08 769
DOM编程艺术第七章动态创建标记 当HTML文件中有元素仅仅是为了一个函数脚本服务，那么用DOM方法来创建它们才是最合适的选择。 因为当有的浏览器不支持或禁用DOM，则可以平稳退化。 当然具体原因具体分析。 insertAfter insertAfter|由于DOM没有提供这种方法，所以可以自己编写。 // 把节点插在另一个节点之后 function insertAfter(newElement, targetElement) { var parent = targetElement.parentN
JavaScript 在末尾添加节点 案例
刘伟佳的博客
04-17 851
页面描述： 单击add按钮，在下方的无序列表中添加新的条目 **new** ，每点击一次，添加一条 **new** 。
JS移动DOM节点，将某节点下所有子节点移动（剪切）到另一个节点下。新手很容易踩的坑！
Lanerxx的博客
07-23 5079
JS移动DOM节点，将某节点下所有子节点移动（剪切）到另一个节点下。新手很容易踩的坑！题目(新手练习题)BUG第一种错误第二种错误解决方案第一种解决方案（无循环）第二种解决方案第三种解决方案（推荐）总结 重点：移动完一个非尾部节点之后，后面的节点会依次部位上来，并且节点数据的长度会实时变化！！ 题目(新手练习题) 将上方绿色实线框中的两个列表移动（剪切）到下方绿色虚线框中。 ps： 1、绿色实线框被一个div包裹，绿色虚线框被一个div包裹； 2、绿色实线框中的子节点有两个，分别是圆点样式的列表和圆圈样式的
18DOM之节点操作
CurryCoder的个人博客
02-22 367
技术交流QQ群:1027579432，欢迎你的加入！ 1.为什么学习节点操作 获取元素通常使用两种方式： (1).利用DOM提供的方法获取元素document.getElementById() document.getElementsByTagName() document.querySeletor()等 缺点：逻辑性不强、繁琐 (2).利用节点层次关系获取元素 利用父子兄节点关系获取元...
怎么获取某一个dom元素滚动到底部
i_kun的博客
07-27 1081
该元素的scrollHeight约等于scrollTop和clientHeight。这个1应该是边框误差导致的。所以就用了（b+c>=a-1）来判断改容器的滚动条滚动到了底部
JavaScript DOM 利用样式实现元素移动位置
ios0213的专栏
05-21 2167
无标题文档 #demo1{ width:300px; height:200px; border:3px solid #F00; position:absolute; top:0; left:0; } function ceh1(element) { element.style.color="#0f0"; element.style.backgroundColor="#a4c
JavaScript-DOM之 querySelect() 和 querySelectAll()方法简述
09-01
querySelect() 和 querySelectAll() 是 JavaScript 中用于操作 DOM 的方法。 - querySelect() 方法返回文档中与指定选择器或选择器组匹配的第一个元素。如果没有匹配的元素，则返回 null。 - querySelectAll() 方法返回文档中与指定选择器或选择器组匹配的所有元素，返回的结果是一个 NodeList 对象。 这两个方法都是通过 CSS 选择器来查找元素。CSS 选择器是一种强大的选择元素的方式，可以按照元素的标签、类名、ID、属性等进行选择。 使用示例： ```javascript // querySelect() 示例 const element = document.querySelector('.my-class'); // 通过类名选择元素 const element = document.querySelector('#my-id'); // 通过 ID 选择元素 const element = document.querySelector('div'); // 通过标签名选择元素 // querySelectAll() 示例 const elements = document.querySelectorAll('.my-class'); // 通过类名选择所有匹配的元素 const elements = document.querySelectorAll('div'); // 通过标签名选择所有匹配的元素 ``` 需要注意的是，querySelect() 方法只返回匹配的第一个元素，而 querySelectAll() 方法返回 NodeList 对象，需要通过遍历来访问其中的每个元素。此外，querySelectAll() 方法返回的 NodeList 是一个静态集合，不会随着文档的改变而更新。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值