DOM1知识

最新推荐文章于 2022-10-03 21:37:53 发布
最新推荐文章于 2022-10-03 21:37:53 发布
阅读量156 收藏
点赞数 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>

运行结果：

 

傻乎乎的小不点
关注
js的Web API笔记1:DOM介绍、获取元素(根据id,标签名、class、queryselector、queryselectorAll、body、html)、事件基础、操作元素
小黄呀呀呀的博客
09-17 233
1.1. Web API介绍 1.1.1 API的概念 API（Application Programming Interface，应用程序编程接口）是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，无需理解其内部工作机制细节，只需直接调用使用即可。 举例解释什么是API。 例如， ​ C语言中有一个函数 fopen()可以打开硬盘上的文件，这个函数对于我们来说，就是一个C语言提供的打开文件的工具。 ​ javascript中有一个函数alert(
DOM基础知识（五）
01-08
在本篇【DOM基础知识（五）】中，我们将重点探讨日期对象Date()以及与时间相关的定时器。 日期对象Date()是JavaScript内置的一个对象，它的计算机纪元年始于1970年1月1日0时0分0秒（UTC）。每次创建一个新的Date...
DOM1
qq_49657886的博客
07-17 499
DOM1
DOM知识总结
12-02
史上最详细的DOM笔记，最全DOM操作详解。
javascript DOM 操作基础知识小结
12-11
1. DOM基础 DOM树中的节点类型包括： - Document：文档的根节点，所有其他节点都隶属于它。 - DocumentType：用于表示<!DOCTYPE>声明的对象。 - DocumentFragment：临时存储其他节点的容器。 - Element：表示HTML...
javascript DOM详解之DOM1
seacean2000的专栏
12-06 3032
DOM是针对HTML和XML文档的一个API。DOM描述了一个层次化的节点树，允许开发人员添加、移除和修改页面的一部分。 DOM可以将任何的HTML或者XML描述成为一个由多层次节点构成的结构。节点分为几种不同的类型，每种类型分别表示文档中不同的信息或者标记。每个节点都拥有各自的特点、数据和方法，另外也与其他节点存在特定的关系。节点之间构成了层次，而所有的页面标记则表现为一个以特定节点为
JavaScript基础之DOM1
weixin_47551467的博客
09-22 280
什么是DOM？ DOM—文档对象模型，是w3c阻止推荐的处理可扩展标记语言（HTML或XML）的标准编程接口。 DOM 将 HTML 文档表达为树结构，如下图所示： 文档：一个页面就是一个文档，DOM中用document； 元素：页面中所有标签都是元素，element； 节点：网页中的所有内容（标签、文本…），node； 1.1怎么获取操作页面元素 DOM在我们实际开发中主要用来操作元素。 要想操作页面元素就要先获取过来相关的页面元素，除了使用DOM自带的方法，还可以使用HTML5新增的方法。 ①根据
DOM1（定义）
lzyPM的博客
02-21 2684
1.DOM定义（1）使用（2）理论 2.API定义 DOM定义：1.使用 2.理论 1.使用 通过dom方式获取的html元素，变成了dom对象，具有（属性，方法，可读写） this：事件处理函数中处理的元素如果是获取元素，那么此获取元素可以用this表达 所有获取的dom数组都是伪数组，不能用基本数组方法和替换数组内容 根据js代码执行顺序，需要将script写到body最下面 2.理论...
DOM1详解
weixin_43765641的博客
10-03 1740
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：简介
menglong0329的博客
05-15 1332
JavaScriptHTML DOM 通过 HTML DOM，可访问 JavaScript HTML 文档的所有元素。 HTML DOM (文档对象模型) 当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。 HTML DOM模型被构造为对象的树： 通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。 JavaScript 能够改变页面中的所有 HTML 元素 JavaScript 能够改变页面中的所有 HTML..
javascript基础：DOM1简介
gongwutianya的博客
07-02 1162
一、DOM介绍 DOM(Document Object Model)即文档对象模型 ，主要是用来操作整个网页页面上的文档的。 DOM 中的三个字母： D(文档)可以理解为整个 Web加载的网页文档; O(对象)可以理解为类似 window 对象之类的东西,可以调用属性和方法,这里我们说的是 document对象; M(模型)可以理解为
关于DOM级别的一些问题
C860_zy的专栏
03-11 873
原文地址：http://blog.segmentfault.com/gothic/1190000000366311 之前看书没太注意这个问题，直到我今天看书看到一个DOM0级，于是我就在群里问了下各个级别的意思区别.. 首先我们的确定标准了是没有DOM0级的。在平时阅读的时候可能会读到DOM0级(DOM Level0)的字眼。实际上，DOM0级标准是不存在的，所谓的DOM0级是DOM历史坐
DOM总结一：HTML相关的DOM1级总结
不睡觉的怪叔叔的博客
09-12 1152
目录 一、DOM概念 二、节点层次 三、Node类型 四、Document类型 五、Element类型 六、Text类型 七、Comment类型 八、CDATASection类型 九、DocumentType类型 十、DocumentFragment类型 十一、Attr类型 十二、表格DOM 十三、总结中的小结 一、DOM概念     DOM（文档对象模型）是针对HT...
Javascript基础——DOM
灿灿大王搭建的黄金屋
05-21 1031
Javascript基础——DOMDOM学习要点DOM介绍1、节点2、节点种类查找元素DOM节点1、node节点属性2、层次节点的属性 DOM学习要点 DOM（ Document Object Model）即文档对象模型， 针对 HTML和 XML文档的 API（ 应用程序接口）。 DOM描绘了一个层次化的节点树，运行开发人员添加、移除和修改页面的某一部分。 DOM脱胎于 Netscape及微软...
JavaScript DOM操作与基本知识点解析
"这篇资源主要介绍了JavaScript的基本操作，特别是与DOM（Document Object Model）相关的知识，包括节点操作、元素选择以及窗口加载事件的处理。通过示例代码解析了DOM节点的层次结构，以及如何通过JavaScript获取和...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值