DOM1知识

最新推荐文章于 2022-10-03 21:37:53 发布
最新推荐文章于 2022-10-03 21:37:53 发布
阅读量136 收藏
点赞数 4
文章标签： java servlet 数据库
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_62697897/article/details/127137563
版权

目录

1.Node类型

2.DOM扩展知识

1.Node类型

（1）属性

      <1>nodeName：返回节点名称

代码：

    // 1.返回节点名称  nodeName
    var ulList=document.querySelector('ul');
    var li=document.querySelector('.three');
    var ya=document.querySelector('.four');
    var btn=document.querySelector('button');
    var add=document.getElementsByClassName('btn')[0];
    console.log(ulList.nodeName);

运行结果：

      <2>parentNode：返回当前节点的父节点

代码：

    // 2.返回当前节点的父级节点  parentNode  
    var ulList=document.querySelector('ul');
    console.log(ulList.parentNode.parentNode);

运行结果：

      <3>childNodes：返回所有子节点，返回NodeList类数组对象

代码：

    // 3.***childNodes***   返回所有子节点  得到的是类数组
    var ulList=document.querySelector('ul');
    console.log(ulList.childNodes);

运行结果：

      <4>firstChild：返回第一个子节点，没有则返回null

代码：

    // 4.返回第一个子节点  firstChild      
    var ulList=document.querySelector('ul');
    console.log(ulList.firstChild);

运行结果：

      <5>lastChild：返回最后一个子节点，没有则返回null

代码：

    // 5.返回最后一个子节点  lastChild     
    var ulList=document.querySelector('ul');   
    console.log(ulList.lastChild);

运行结果：

      <6>previousSibling：返回上一个节点，没有则返回null

代码：

   // 6.返回上一个节点  previousSibling  
    var ulList=document.querySelector('ul');     
    console.log(li.previousSibling);

运行结果：

      <7>nextSibling：返回下一个节点，没有则返回null

代码：

    // 7.返回下一个节点  nextSibling  
    var ulList=document.querySelector('ul');     
    console.log(li.nextSibling);

运行结果：

（2）方法

      <1>hasChildNodes()：返回布尔值，表示是否有子节点

代码：

   // 判断是否有子节点   hasChildNoeds()    得到的是布尔值
    var li=document.querySelector('.three');
    console.log(li.hasChildNodes());

运行结果：

      <2>向当前节点末尾添加子节点

         1)document.createElement('节点名称')：创建节点

         2)appendChild(新节点)：向当前节点末尾添加子节点

代码：

  //1.向当前节点末尾添加子节点    appendChild()  父元素.appendChild(新节点)
    btn.onclick=function(){
        // 1.创建li标签
        var newLi=document.createElement('li');
        newLi.innerHTML=Math.random();
        // 2.向ul添加li标签
        ulList.appendChild(newLi);
    }

运行结果：

  

      <3>向指定位置添加节点

         1)document.createElement('节点名称')：创建节点

         2)insertBefore(新节点，参照节点 )

代码：

    // 2.向指定位置添加   insertBefore(新节点,参照节点)
    add.onclick=function(){
        // 1.创建li标签
        var newLi=document.createElement('li');
        // 1.1丰富li标签内容
        newLi.innerHTML=Math.round(Math.random());
        // 2.向ul添加li标签
        ulList.insertBefore(newLi,li);
    }

运行结果：

      

      <4>替换：replaceChild(新节点，替换节点)

代码：

       // 二：替换  父元素.replaceChild(新节点，替换节点)
        var newl=document.createElement('li');
        newl.innerHTML='烤鸡爪';
        ulList.replaceChild(newl,ya);

运行结果：

   

      <5>删除：removeChild(子节点)

代码：

        // 删除   父元素.removeChild(子节点)
        ulList.removeChild(li);

运行结果：

   

      <6>克隆：cloneNode(布尔值)：用于克隆节点

         （true是克隆子节点，默认flase是不克隆子节点）

代码：

        // 克隆   cloneNode(布尔值)   true克隆子节点  false不克隆子节点  默认是false
        var newThree=li.cloneNode(true);
        ulList.appendChild(newThree);

运行结果：

          

2.DOM扩展知识

（1）childElementCount：返回子元素的个数

代码：

   // childElementCount：返回子元素的个数
    console.log(ulList.childElementCount);

运行结果：

（2）children：返回元素子节点

代码：

    // children：返回元素子节点
    console.log(ulList.children);

运行结果：

（3）firstElementChild：指向第一个子元素

代码：

    // ***返回第一个子节点***   firstELementChild    
    console.log(ulList.firstElementChild);

运行结果：

（4）lastElementChild：指向最后一个子元素

代码：

  // ***返回最后一个子节点***   lastELementChild     
    console.log(ulList.lastElementChild);

运行结果：

（5）previousElementSibling：指向上一个同辈元素

代码：

   // ***返回上一个节点***   previousElementSibling    
    console.log(li.previousElementSibling);

运行结果：

（6）nextElementSibling：指向下一个同辈元素

代码：

    // ***返回下一个节点***   nextElementSibling   
    console.log(li.nextElementSibling);

运行结果：

（7）innerHTML：可读写，获取或替换元素所有子节点

（8）innerText：可读写，获取或替换元素所有文本

（9）outerHTML：可读写，获取或替换元素所有子节点（包含自身）

完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul>
        <li>烤羊腿</li>
        <li>烤猪蹄</li>
        <li class="three">烤五花肉</li>
        <li class="four">烤鸭</li>
    </ul>
    <button>添加li</button>
    <button class="btn">指定位置添加</button>
</body>
<script>
    // ***********************属性**********************
    // 1.返回节点名称  nodeName
    var ulList=document.querySelector('ul');
    var li=document.querySelector('.three');
    var ya=document.querySelector('.four');
    var btn=document.querySelector('button');
    var add=document.getElementsByClassName('btn')[0];
    console.log(ulList.nodeName);

    // 2.返回当前节点的父级节点  parentNode  
    console.log(ulList.parentNode.parentNode);

    // childElementCount：返回子元素的个数
    // console.log(ulList.childElementCount);

    // 3.***childNodes***   返回所有子节点  得到的是类数组
    console.log(ulList.childNodes);

    // children：返回元素子节点
    // console.log(ulList.children);

    // 4.返回第一个子节点  firstChild       
    console.log(ulList.firstChild);
    // ***返回第一个子节点***   firstELementChild    
    // console.log(ulList.firstElementChild);

    // 5.返回最后一个子节点  lastChild       
    console.log(ulList.lastChild);
    // ***返回最后一个子节点***   lastELementChild     
    // console.log(ulList.lastElementChild);

    // 6.返回上一个节点  previousSibling       
    console.log(li.previousSibling);
    // ***返回上一个节点***   previousElementSibling    
    // console.log(li.previousElementSibling);

    // 7.返回下一个节点  nextSibling       
    console.log(li.nextSibling);
    // ***返回下一个节点***   nextElementSibling   
    // console.log(li.nextElementSibling);


    // *********************方法*********************
    // 判断是否有子节点   hasChildNoeds()    得到的是布尔值
    console.log(li.hasChildNodes());
    // 创建节点   document.createElement('节点名称')
    // var newLi=document.createElement('li');

    // 一：添加
    //1.向当前节点末尾添加子节点    appendChild()  父元素.appendChild(新节点)
    // ulList.appendChild(newLi);
    btn.onclick=function(){
        // 1.创建li标签
        var newLi=document.createElement('li');
        newLi.innerHTML=Math.random();
        // 2.向ul添加li标签
        ulList.appendChild(newLi);
    }

    // 2.向指定位置添加   insertBefore(新节点,参照节点)
    add.onclick=function(){
        // 1.创建li标签
        var newLi=document.createElement('li');
        // 1.1丰富li标签内容
        newLi.innerHTML=Math.round(Math.random());
        // 2.向ul添加li标签
        ulList.insertBefore(newLi,li);
    }


        // 二：替换  父元素.replaceChild(新节点，替换节点)
        // var newl=document.createElement('li');
        // newl.innerHTML='烤鸡爪';
        // ulList.replaceChild(newl,ya);

        // 删除   父元素.removeChild(子节点)
        // ulList.removeChild(li);

        // 克隆   cloneNode(布尔值)   true克隆子节点  false不克隆子节点  默认是false
        // var newThree=li.cloneNode(true);
        // ulList.appendChild(newThree);
    
    
</script>
</html>

运行结果：

 

傻乎乎的小不点
关注
  • 4
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
DOM基础知识（五）
01-08
在本篇【DOM基础知识（五）】中，我们将重点探讨日期对象Date()以及与时间相关的定时器。 日期对象Date()是JavaScript内置的一个对象，它的计算机纪元年始于1970年1月1日0时0分0秒（UTC）。每次创建一个新的Date...
DOM 知识点汇总
01-18
以下是一些关键的DOM知识点： 1. **DOM元素选择**： - `getElementById()`：根据ID选取唯一的元素。 - `getElementsByClassName()`：根据类名选取所有元素。 - `getElementsByTagName()`：根据标签名选取所有...
详解DOM1级与节点类型
qq_39862865的博客
03-03 1889
DOM1 DOM1级于1998年10月成为W3C的推荐标准 DOM1级由两个模块组成：DOM核心（DOM Core）和DOM HTML DOM1级定义了一个Node接口，该接口将由DOM中的所有节点类型实现，这个Node接口在JavaScript中是作为Node类型实现的；除了IE之外，在其他所有浏览器中都可以访问到这个类型，JavaScript中的所有节点类型都继承自Node类型，因此所有节点类型都共享着相同的基本属性和方法 每个节点都有一个nodeType属性，用于表明节点的类型。节点类型由在N
Javascript基础——DOM
灿灿大王搭建的黄金屋
05-21 687
Javascript基础——DOMDOM学习要点DOM介绍1、节点2、节点种类查找元素DOM节点1、node节点属性2、层次节点的属性 DOM学习要点 DOM（ Document Object Model）即文档对象模型， 针对 HTML和 XML文档的 API（ 应用程序接口）。 DOM描绘了一个层次化的节点树，运行开发人员添加、移除和修改页面的某一部分。 DOM脱胎于 Netscape及微软...
DOM0、DOM1、DOM2、DOM3事件区别
不丶甜的博客
03-27 8808
DOM事件 DOM 0级事件具有极好的跨浏览器优势，会以最快的速度绑定。某一个元素的同一个行为绑定不同的方法在行内会分别执行。某一个元素的同一个行为绑定不同的方法在script标签中后面的方法会覆盖前面的方法。 <body> // 某一个元素的同一个行为绑定不同的方法在行内会分别执行 <div id="box" "fun1();fun2()">点我</...
谈谈DOM0，DOM1，DOM2，DOM3
Dax1_的博客
07-25 2717
在W3C协会制定的DOM标准中，DOM标准可以分为DOM1，DOM2，DOM3三个版本。事实上，DOM0级标准是不存在的，所谓DOM0只是DOM历史坐标中的一个参照点。
DOM1（定义）
lzyPM的博客
02-21 2642
1.DOM定义（1）使用（2）理论 2.API定义 DOM定义：1.使用 2.理论 1.使用 通过dom方式获取的html元素，变成了dom对象，具有（属性，方法，可读写） this：事件处理函数中处理的元素如果是获取元素，那么此获取元素可以用this表达 所有获取的dom数组都是伪数组，不能用基本数组方法和替换数组内容 根据js代码执行顺序，需要将script写到body最下面 2.理论...
Dom 结点创建 基础知识
09-05
Dom 结点创建基础知识 Dom 结点创建是 JavaScript 中的一种常见操作，用于创建新的 HTML 元素并将其添加到文档中。下面是关于 Dom 结点创建的基础知识回顾。 什么是 Dom 结点？ Dom 结点是文档对象模型（Document...
DOM知识点汇总
01-18
javascript DOM知识点汇总，（需要使用xmind打开），xmind软件下载地址:
DOM知识总结
12-02
史上最详细的DOM笔记，最全DOM操作详解。
DOM1详解
最新发布
weixin_43765641的博客
10-03 1180
2.6、克隆：cloneNode(布尔值)：用于克隆节点，true是克隆子节点，默认false是不克隆子节点。2.3、insertBefore(新节点，参照节点 )：向指定位置之前添加节点。1.4、firstChild：返回第一个子节点，没有则返回null。1.5、lastChild：返回最后一个子节点，没有则返回null。2.2、appendChild(新节点)：向当前节点末尾添加子节点。2.4、替换：replaceChild(新节点，替换节点)1.2、parentNode：返回当前节点的父节点。
DOM1
qq_36584352的博客
08-28 1034
DOM（文档对象模型）是针对HTML 和XML 文档的一个API（应用程序编程接口），DOM 定义了访问 HTML 和 XML 文档的标准。DOM描绘了一个层次化的节点树，允许开发人员添加、移除和修改页面的某一部分。此处主要讨论与浏览器中的HTML 页面相关的DOM1 级的特性和应用，以及JavaScript 对DOM1 级的实现。 注意，IE 中的所有DOM 对象都是以COM 对象的形式实现的...
关于DOM级别的一些问题
C860_zy的专栏
03-11 842
原文地址：http://blog.segmentfault.com/gothic/1190000000366311 之前看书没太注意这个问题，直到我今天看书看到一个DOM0级，于是我就在群里问了下各个级别的意思区别.. 首先我们的确定标准了是没有DOM0级的。在平时阅读的时候可能会读到DOM0级(DOM Level0)的字眼。实际上，DOM0级标准是不存在的，所谓的DOM0级是DOM历史坐
javascript DOM详解之DOM1
seacean2000的专栏
12-06 2999
DOM是针对HTML和XML文档的一个API。DOM描述了一个层次化的节点树，允许开发人员添加、移除和修改页面的一部分。 DOM可以将任何的HTML或者XML描述成为一个由多层次节点构成的结构。节点分为几种不同的类型，每种类型分别表示文档中不同的信息或者标记。每个节点都拥有各自的特点、数据和方法，另外也与其他节点存在特定的关系。节点之间构成了层次，而所有的页面标记则表现为一个以特定节点为
DOM0，DOM1，DOM2，DOM3级事件与event对象
HimBer的博客
09-06 2086
DOM事件级别 DOM 0 element.onclick = function(){} DOM 2 element.addEventListener(‘click’,function(){},false} DOM 3 element.addEventListener(‘keyup’,function(){},false}         因为DOM 1一般...
javascript基础：DOM1简介
gongwutianya的博客
07-02 1108
一、DOM介绍 DOM(Document Object Model)即文档对象模型 ，主要是用来操作整个网页页面上的文档的。 DOM 中的三个字母： D(文档)可以理解为整个 Web加载的网页文档; O(对象)可以理解为类似 window 对象之类的东西,可以调用属性和方法,这里我们说的是 document对象; M(模型)可以理解为
DOM1：简介
menglong0329的博客
05-15 1309
JavaScriptHTML DOM 通过 HTML DOM，可访问 JavaScript HTML 文档的所有元素。 HTML DOM (文档对象模型) 当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。 HTML DOM模型被构造为对象的树： 通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。 JavaScript 能够改变页面中的所有 HTML 元素 JavaScript 能够改变页面中的所有 HTML..
DOM0, DOM1, DOM2, DOM3
pxy_lele的专栏
11-10 3795
----------------------摘抄自他人笔记(http://itbilu.com/javascript/js/Vyxodm_1g.html)，感谢分享---------------------- JavaScript历经了从被人误解到现在的被万众瞩目的转变。随着一些JavaScript编程规范的推出（如：AMD、CMD），其应用范围也从前端一些小功能逐渐扩展到后端和一些大项目中
JavaScript DOM操作与基本知识点解析
"这篇资源主要介绍了JavaScript的基本操作，特别是与DOM（Document Object Model）相关的知识，包括节点操作、元素选择以及窗口加载事件的处理。通过示例代码解析了DOM节点的层次结构，以及如何通过JavaScript获取和...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值