JavaScript中DOM元素对象

最新推荐文章于 2023-07-16 23:21:02 发布
最新推荐文章于 2023-07-16 23:21:02 发布
阅读量591 收藏 4
点赞数 1
文章标签： javascript 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_52629158/article/details/130467742
版权

DOM document(html) object modle 。通过 HTML DOM，可访问 JavaScript HTML 文档的所有元素。当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。

document对象(DOM核心对象)

document 表示的是一个文档对象。

dom能用来干什么？

对html元素的样式(颜色、大小、位置等等)、内容、属性

来进行动态的改变和操作。

通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。

  • JavaScript 能够改变页面中的所有 HTML 元素

  • JavaScript 能够改变页面中的所有 HTML 属性

  • JavaScript 能够改变页面中的所有 CSS 样式

  • JavaScript 能够对页面中的所有事件做出反应

1.1.1 DOM元素对象

DOM 元素（节点）

1.1.1 .1 创建节点

createElement() 方法通过指定名称创建一个元素

document.createElement(nodename)

 参数

 var h1=document.createElement('h1')
    var p=document.createElement('p')
    
     document.body.appendChild(h1)
         document.body.appendChild(p)

 预览：

创建文本节点

语法

document.createTextNode(text)

 参数

 //创建dom节点
    var h1=document.createElement('h1')
    var p=document.createElement('p')
    //创建文本节点
    var ht1=document.createTextNode('小明同学')
    var pt1=document.createTextNode('下午好')
     //向body中添加dom节点
    document.body.appendChild(h1)
    h1.appendChild(ht1);
    document.body.appendChild(p)
    p.appendChild(pt1)

 预览：

1.1.1 .2 添加节点

appendChild() 方法可向节点的子节点列表的末尾添加新的子节点。

语法

node.appendChild(node)

 参数

编写一个函数，实现功能：单击按钮创建button元素

  //单击按钮创建button元素
        var btn=document.querySelector('#btn')
        console.log(btn);
        btn.onclick=function(){
            //创建dom节点
            var mybtn=document.createElement('button')
            var btntext=document.createTextNode('我是按钮')
            document.body.appendChild(mybtn)
            mybtn.appendChild(btntext)
           

        }

 预览：

通过遍历的形式，去 创建节点，添加节点

var ul=document.createElement('ul')
       //向无序列表中添加10个列表项
       for(var i=1;i<=10;i++){
           //在遍历的过程中，每次让其生成1个li并且把li追加到ul中
           var li=document.createElement('li')
           var litext=document.createTextNode(`我是第${i}列表项`)
           li.appendChild(litext)
           ul.appendChild(li)
       }
       document.body.appendChild(ul)

 预览：

向已有的子节点前插入新子节点

insertBefore() 方法可在已有的子节点前插入一个新的子节点。

语法

node.insertBefore(newnode,existingnode)

 参数

向已有的子节点前插入新子节点

//向已有的子节点前插入新的子节点
    //1抓取元素
    var box =document.querySelector('#box')
    var h1=document.querySelector("#h1")
    console.log(box,h1);
    //创建dom节点
    var para=document.createElement('p')
    var ptext=document.createTextNode('我是段落标签')
    para.appendChild(ptext)
    //添加节点
    box.insertBefore(para,h1)

 预览：

1.1.1.3 删除已有节点

removeChild() 方法可从子节点列表中删除某个节点。

如删除成功，此方法可返回被删除的节点，如失败，则返回 NULL。

语法

node.removeChild(node)

 参数

删除已有节点（已有html元素）

 <div id="box">
        <h1 id="h1">我是标题1</h1>
        <h2>我是标题2</h2>
    </div>
    <button id="btn">删除</button>

 

var btn=document.querySelector('#btn')
        btn.onclick=function(){
            //抓取元素
            var box=document.querySelector('#box')
            var h1=document.querySelector('#h1')
            //删除
            box.removeChild(h1)
        }

预览：

1.1.1.4 替换节点

replaceChild() 方法可将某个子节点替换为另一个。替换 节点HTML 元素

语法

node.replaceChild(newnode,oldnode)

 参数

把盒子中的h1标签，替换成我们动态创建的p段落标签

   <div id="box">
        <h1 id="h1">我是标题1</h1>
        <h2>我是标题2</h2>
    </div>
    <button id="btn">替换</button>

 

<script>
        var btn=document.querySelector('#btn')
        btn.onclick=function(){
            //抓取元素
            var box=document.querySelector('#box')
            var h1=document.querySelector('#h1')
             // 创建节点
        var para = document.createElement('p')
        var t = document.createTextNode('我是段落标签')
        para.appendChild(t)
            //替换节点
            box.replaceChild(para,h1)
        }

    </script>

 预览：

1.1.1.5 子节点集合

childNodes 属性返回包含被选节点的子节点的 NodeList。

语法

element.childNodes

 技术细节

获取 body 元素的子节点集合

var c=document.body.childNodes;
            console.log(c);

 

<div id="box"></div>

    <button id="btn" onclick="look()">点击，看一看</button>
<script>
   // 单击“按钮”获取有关身体元素的子节点的信息 (看节点名称)
        // 注意: 空格内元素看作是文本，文本是节点。
        var btn=document.querySelector('#btn')
        var box=document.getElementById('box')
        btn.onclick=function(){

            var c=document.body.childNodes;
            console.log(c);
            //定义临时变量
            var text='';
            //遍历
            for(var i=0;i<c.length;i++){
                  text +=c[i].nodeName+'<br>'
            }
            console.log(text);
            box.innerHTML=text;
           
        }
   
    </script>

 预览：

从子节点列表中删除某个节点 ,把无序列表中的第一项删掉。

 <ul id="myList"><li>Coffee</li><li>Tea</li><li>Milk</li></ul>
    <p id="demo">单击按钮移除列表的第一项</p>
    <button id="btn">删除</button>

 

 <script>
        //从子节点列表中删除某个节点 ,把无序列表中的第一项删掉。
       var btn=document.querySelector('#btn')
       btn.onclick=function(){
           var myList=document.querySelector('#myList')
           //移除节点
           myList.removeChild(myList.childNodes[0])
       }
    </script>

预览：

1.1.2 DOM对象的常用属性

HTML DOM 允许 JavaScript 改变 HTML 元素的样式。

style.property=新样式

改变 HTML 样式

如需改变 HTML 元素的样式，请使用这个语法：

document.getElementById(id).style.property=新样式

 改变文档主体的背景色，文本颜色，字体大小。

 <p id="pt">
        我是小鱼
    </p>
    <button id="btn">点击</button>

 

  <script>
        //改变文档主体的背景色，文本颜色，字体大小。
        var btn=document.querySelector('#btn')
        btn.onclick=function(){
         document.body.style.backgroundColor='black'
               document.body.style.color='yellow'

        }
          console.log(document.URL);
            //获取得到字符集
            console.log(document.charset);
           
           
           
    </script>

预览：

document.title 返回或设置当前文档的标题

  <title>document</title>
</head>
<body>
    <script>
        setTimeout(()=>{
            document.title = '小余的个人技术博客';
        },3000)
    </script>
</body>

 

 预览：

document.bgColor 设置页面背景色

document.fgColor设置前景色(文本颜色)

 <p>
        我是小鱼
    </p>
    <button id="btn">点击</button>

 

<script>
        //改变文档主体的背景色，文本颜色，字体大小。
        var btn=document.querySelector('#btn')
        btn.onclick=function(){
            document.bgColor='black'
            document.fgColor='yellow'
            document.body.style.fontSize='50px'
        }
            console.log(document.URL);
            //获取得到字符集
            console.log(document.charset);
           
           
    </script>

 预览：

document.URL 得到浏览器的地址，设置URL属性从而在同一窗口打开另一网页

URL 属性可返回当前文档的 URL。

注意：

//下面这种写法是错误的。
document.URL = "https://www.baidu.com";
//你可以把 当前 文档的URL 用这个属性拿到，给其他地方去使用。但是你不能给他赋新值
console.log(document.URL)

 

document 表示的是一个文档对象，windows 表示一个窗口对象。

一个窗口下面可以有很多的document对象。每个document 都有 一个URL。

document.charset得到字符集 例如 当前文档的字符编码集是 万国码UTF-8；或者是 简体中文gb2312

console.log(document.charset)

项目中常用的三个方法

classList .add() 在元素中添加一个或多个类名。

classList .remove() 移除元素中一个或多个类名。

classList.toggle() 在元素中切换类名。

document.getElementById("myDIV").classList.add("mystyle");

 

 <p id="pt">
        我是小鱼
    </p>
    <button id="btn">点击</button>
<style>
    .red{
        color:red;
    }
    .f30{
        font-size:30px;
    }
</style>

 

<script>
        //改变文档主体的背景色，文本颜色，字体大小。
        var btn=document.querySelector('#btn')
        btn.onclick=function(){
         var pt=document.querySelector('#pt');
         pt.classList.add('red')

        }
           
           
           
    </script>

预览：

 <script>
        //改变文档主体的背景色，文本颜色，字体大小。
        var btn=document.querySelector('#btn')
        btn.onclick=function(){
         var pt=document.querySelector('#pt');
         pt.classList.add('f30')

        }
           
           
           
    </script>

 预览：

 

 <script>
        //改变文档主体的背景色，文本颜色，字体大小。
        var btn=document.querySelector('#btn')
        btn.onclick=function(){
         var pt=document.querySelector('#pt');
          pt.classList.toggle('red');

        }
           
           
           
    </script>

预览：

 

仙鹤__
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
1.dom元素——dom元素获取
ling_xy的博客
12-02 7555
什么是dom？ dom，即document object model(文本对象模型)。整个页面元素统称dom。 本质上是一种接口（API)，是专门操作网页内容的API标准 dom树 dom操作： 1.dom元素获取 2.dom元素属性操作（常规属性操作） 3.dom元素节点操作（子父节点之类的） 4.dom元素的事件（行为） 5.dom元素的方法操作 前提：要注意获取的元素是否已经初始化（需要考虑获取的元素存在还是不存在），根据页面的加载顺序来考虑 js里面如何获取dom元素 js里面dom..
dom元素
Gananldo04的博客
05-19 2999
如何获取dom元素 dom 全称是document object model 文本对象模型 简称dom元素，dom就是html元素 获取dom元素的时候需要注意什么，注意dom元素是否初始化（是否已经存在） 一.四种动态获取dom的方法 1.通过class 类名称获取元素 返回的是一个HTMLCollection集合 document.getElementsByClassName() var btn=document.getElementsByClassName("list");cons
JavaScript中的DOM对象
qq_44971635的博客
03-23 2368
文章目录 前言 一、DOM是什么？ 二、获取元素节点的方法 1.获取body和head节点 2.通过ID获取元素节点 3.通过class获取元素节点 4.通过name属性获取元素节点 5.通过标签名获取元素节点 6.通过css选择器获取元素节点 三、操作元素的属性 四、操作元素的样式属性 五、节点操作 六、节点的属性 六、其他 前言 提示：DOM DOM树理解。 一、DOM是什么？ 示例：DOM（document object mod...
DOM简介、HelloWorld、文档节点、获取元素节点、元素的属性和方法——DOM
weixin_70320000的博客
11-26 2274
DOM简介、HelloWorld、文档节点、获取元素节点、元素的属性和方法
1、DOM 获取元素
hzg_hou的博客
05-12 634
标签自定义属性,特指程序员自己给标签添加的自定义属性自定义属性两种格式H5规范要求所有自定义属性必须以data-**开始完全自己定义属性,没有任何的格式要求备注:标签本身自带的属性叫内置属性或标准属性 例如: class , id, name …自定义属性本质上也是一个键值对,用来保存数据通用方式标签设置自定义属性/标准属性// 1. 设置自定义属性 div . setAttribute('myage' , 18);
javascript实现dom元素可拖动
10-22
HTML DOM 是 W3C 标准（是 HTML 文档对象模型的英文缩写，Document Object Model for HTML）。通过 DOM，可以访问所有的 HTML 元素，连同它们所包含的文本和属性。可以对其中的内容进行修改和删除，同时也可以创建新...
JavaScript HTML DOM元素 节点操作汇总
10-16
JavaScript HTML DOM元素节点操作是网页动态交互的核心技术之一，它允许我们通过JavaScript代码来操作页面上的HTML元素。本文将深入探讨DOM中的节点操作，包括添加、删除、替换和查找节点等基本操作。 首先，理解...
用JavaScript获取DOM元素位置和尺寸大小的方法
10-27
在JavaScript中，DOM元素的位置和尺寸大小是网页动态交互中不可或缺的部分。DOM（Document Object Model）是HTML和XML文档的结构化表示，它允许我们通过编程方式操作文档的各个元素。本文将深入探讨如何利用...
JavaScript变量Dom对象的所有属性
10-15
在标题和描述中提到的“JavaScript变量Dom对象的所有属性”是指通过JavaScript获取和操作DOM元素时涉及到的各种属性。以下是一些重要的DOM对象属性： 1. **id** - 这个属性对应于HTML元素中的`id`属性，它是唯一...
javascript 动态添加dom元素，添加类名，添加自定义属性，添加点击事件，
最新发布
weixin_57666779的博客
07-16 1505
【代码】javascript 动态添加dom元素，添加类名，添加自定义属性，添加点击事件，
DOM对象
weixin_45649686的博客
01-27 4856
1.Html DOM 1.DOM是Document Object Model文档对象（网页中的标签）模型的缩写。 2.通过html DOM，可用javaScript操作html文档的所有标签。 3.DOM对象：指的是一类对象的总称。 4.DOM：在js对网页进行操作时，认为网页中的每个标签就是一个对象，使用面向对象的思想来操作，js中提供了一个document对象，表示整个html文档对象，网页加载后会自动生成表示此文档的document对象，通过document提供的方法精确获得网页中要操作的标签。 2.
什么是DOM对象？如何获取DOM对象？
zy1992As的博客
06-13 2250
DOM对象本质上是浏览器根据html标签生成的 JS对象，它的所有的标签属性都可以在这个 JS对象上面找到，修改这个对象的属性会自动映射到标签身上。DOM的核心思想是把网页内容当做对象来处理。其中document 对象是DOM 里提供的一个对象，所以它提供的属性和方法都是用来访问和操作网页内容的，网页中所有的内容在document里面。document与其他网页中各个节点元素关系如下：将 HTML 文档以树状结构直观的表现出来，我们称之为文档树或 DOM 树。文档树模型直观的体现了标签与标签之间的关系。
JavaScript基础
aneyjie的博客
07-17 95
3.JavaScript流程控制 什么是流程？ 程序中的三种基本流程结构： 顺序结构 分支结构 循环结构 顺序结构：按照顺序一条一条的执行代码，从上到下。 分支结构：执行代码的时候，可以根据条件进行选择，条件越多对应的结果越多，分支也就越多。例如if…else…语句,switch语句 循环语句：用来重复不断的做一件事,for循环，while循环，do…while循环 3.1 if…else 语句 1.if...else语句是在指定的条件成立时执行代码，在条件不成立时执行else后的代码。
Javascript中的DOM对象
码农米格的博客
03-07 240
Javascript中的DOM对象 DOM及其作用 （1）文档对象模型DOM（Document Object Model），根据W3C DOM规范，DOM是HTML与XML的应用编程接口（API），DOM将整个页面映射为一个由层次节点组成的文件。 （2）它给文档提供了一种结构化的表示方法，可以改变文档的内容和呈现方式 。 （3）DOM把网页和脚本以及其他的编程语言联系了起来。 以下内容均是针对HT...
Dom元素对象的学习
Smallwhitestrive的博客
05-07 126
1、childNodes 属性返回包含被选节点的子节点的 NodeList 语法：element.childNodes 2、 children 属性返回元素的子元素的集合，是一个 HTMLCollection 对象 语法：element.children 3、children 属性与 childNodes 属性的差别：childNodes 属性返回所有的节点，包括文本节点、注释节点；children 属性只返回元素节点； 4、classLis...
JavaScript--DOM对象
huijie_0716的博客
04-22 763
一、获取对象 1、getElementById() 按元素的ID名称来访问 2、getElementsByTagName() 通过标签名获取元素对象 集合 3、 getElementsByClassName（） getElementsByClassName（“类名”）通过类名来获取元素对象 集合 4、 getElementsByName（） getElementsByName（“name值”）通过name值获取元素对象 集合 5、 querySelector（） que
JS-DOM对象--节点--添加图片的操作
wei_Bug的博客
04-17 4722
JS-DOM对象 DOM：Document Object Model 文档对象模型 要实现页面的动态交互效果，bom 操作远远不够，需要操作 html 才是核心。如何操作htm，就是 DOM。简单的说，dom 提供了用程序动态控制 html 接口。DOM即文档对象模型描绘了一个层次化的节点树，运行开发人员添加、移除和修改页面的某一部分。dom 处于javascript 的核心地位上。 每个载入浏览...
js中的Dom对象
wujj5_ttc的博客
07-28 2362
js的dom对象         *dom:document object model:文档对象模型         **文档:             超文本文档(超文本标记文档)  html ' xml         **对象             提供了属性和方法         **模型 使用属性和方法 操作超文本标记型文档          ***可以使用js里面dom提供的对象,使...
js的dom对象
qq_41833165的博客
05-23 571
Javascript中DOM
03-31
DOM（Document Object Model）是JavaScript中的一个重要概念，它是指浏览器将HTML或XML文档解析成一个树形结构的对象模型，提供了访问和操作文档的接口。 在JavaScript中，可以使用DOM API来访问和操作文档的各个...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值