DOM

最新推荐文章于 2022-07-04 20:19:44 发布
最新推荐文章于 2022-07-04 20:19:44 发布
阅读量170 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yangpurong/article/details/49402913
版权
# dom对象 #
<h6>1.属性：document.title 返回一个标题<h6>


    例如： window.οnlοad=function(){  
             console.log(document.title);  
             document.title="123456";  
         }      
 2.属性：document.URL 返回一个完整的URL；
   
   例如：window.οnlοad=function(){  
           console.log(document.url);  
            document.url="1.html"
  
}  
 3.属性：document.bgColor:背景色 
 
   例如：window.οnlοad=function(){  
             console.log(document.bgColor);  
             document.bgColor="red";  
         }   
 4.属性：FGCOLOR:前景色；  
    例如：  
           window.οnlοad=function(){    
             console.log(document.fgColor);    
             document.bgColor="green";  
二、对象集合：  
   1.表单 ： 
    在浏览器下找到表单里面的name和它对应的值  
     例如：  
       window.οnlοad=function(){  
           var form1=document.getElementById("form1");  
           console.log(document.form1.name11[0].value);  
       };  
   2.通过下标获取表单的元素；  
  
     例如： <script>  
           window.οnlοad=function(){  
           var form1=document.getElementById("form1");  
           console.log(document.form1.name11[0].value);  
       }; //获取表单1 id为name11,的值   
          console.log(document.[form1]) //获取form信息  
           console.log(document.forms.length);获取表单个数 
          </script>
          <body>  
           <form id="form1" name="form1">  
   <input  type="text" name="name11" value="11">  
   <input  type="text" name="name11" value="11">
   <input  type="text" name="name11" value="11">
   <input  type="text" name="name11" value="11">


          </form>


          </body>
   3.属性操作：利用JS改变元素的属性；  
         
     例如：
         
         <script>
          window.οnlοad=function(){
          var a1=document.getElementById("a1");
          a1.style.width="100px";
          a1.style.height="100px";
          a1.style.backgroundColor="red";
          a1.style.boder="1px,solid";
         a1.style.color="green";
         a1.style.textAlign="center";
         a1.style.display="block";
         a1.style.lineHeight="100px";
         a1.style.fontSize="30px";
         a1.style.textDecoration="none";
          </script>
     BODY：<a id="a1"href="#">111111</a>
    
  4.伪类：  
      例如： 例如：
         
         <script>
          window.οnlοad=function(){
          var a1=document.getElementById("a1");
          a1.style.width="100px";
          a1.style.height="100px";
          a1.style.backgroundColor="red";
          a1.style.boder="1px,solid";
         a1.style.color="green";
         a1.style.textAlign="center";
         a1.style.display="block";
         a1.style.lineHeight="100px";
         a1.style.fontSize="30px";
         a1.style.textDecoration="none";  


             a1.οnmοuseοver=function(){
             this.style.backgroundColor="gray";
             this.style.color="pink";


         };




         a1.οnmοuseοut=function(){
             this.style.backgroundColor="red";
         };
          </script>
     BODY：<a id="a1"href="#">111111</a>   
  5.叠层样式表：  
  
    例如： <script>
            function getBackgroundColor(){
                var oCSSRules=document.styleSheets[0].cssRules||
                document.styleSheets[0].rules;
                console.log(oCSSRules[0].style.backgroundColor);


            }
      
          </script> 
         <body>
 <div id="div1" class="special"></div>
<input type="button" value="得到背景色" οnclick="getBackgroundColor()"/>
         </body>
     


  6.获取元素尺寸：如果有padding值就+  
    例如：  
    CSS{ #one{width: 200px;  
            height: 100px;  
            background: red;  
            padding: 10px;}}   


     <script>
     window.οnlοad=function(){
        var one=document.getElementById("one");
        console.log(one.clientWidth+""+one.clientHeight);
        console.log(one.offsetHeight+""+one.offsetWidth);
    }
    </script>
  
    <div id="one"></div>
 7.最终样式：
    例如:
     css: #one{width: 100px;  
            height: 100px;  
        background: saddlebrown;}  
    <script>
              window.οnlοad=function(){
                var one=document.getElementById("one");
                //console.log(one.currentStyle.width);
                console.log(window.getComputedStyle(one, null).width)
    </script>
     <div id="one"></div>
  
yangpurong
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
虚拟DOM
小王的博客
08-24 1471
虚拟DOM相关知识
DOM介绍
weixin_45116146的博客
09-23 2618
DOM是JS操作网页的接口，全称为“文档对象模型”（Document Object Model）。它的作用是将网页转为一个JS对象，从而可以用脚本进行各种操作（比如增删内容）。 DOM提供了一种表述形式将文档作为一个结构化的节点组以及包含属性和方法的对象。从本质上说，它将web页面和脚本或编程语言连接起来了。 DOM可以理解成网页的编程接口。 1.节点 DOM最小的单位叫做节点。文档的树形结构（DOM树），就是各种不同类型的节点组成的。 节点类型有七种：Document、DocumentTyp..
DOM详解
m0_48224507的博客
06-10 4764
文章目录一、什么是DOM1. 什么是DOM2. 为什么学习DOM3. 何时会用到DOM4. DOM标准5. DOM能做的5件事二、DOM树1. 什么是DOM树2. 何时会生成DOM树三、查找1. 不需要查找就可直接获得的4种节点对象:2. 按节点间关系查找3. 示例: 输出指定元素，并用节点间关系查找想要的元素4. 按HTML特征查找: 4个函数5.查找指定的元素，并修改元素的样式总结 一、什么是DOM 1. 什么是DOM 一套专门操作网页内容的对象和方法的集合。 2. 为什么学习DOM ECM
DOM概述
qq_44177679的博客
09-01 1537
DOM概述 什么是 DOM? DOM 和 JavaScript 如何访问 DOM? 重要的数据类型 DOM核心接口 什么是 DOM? 文档对象模型 (DOM) 是HTML和XML文档的编程接口。 它提供了对文档的结构化的表述，并定义了一种方式可以使从程序中对该结构进行访问，从而改变文档的结构，样式和内容。DOM 将文档解析为一个由节点和对象（包含属性和方法的对象）组成的结构集合。简言之，它会将web页面和脚本或程序语言连接起来。 一个web页面是一个文档。这个文档可以在浏览器窗口或作为HTML源码显示
vue 3.0 使用ref获取dom元素
热门推荐
好巧的博客
09-24 13万+
答：检查是在哪里进行的console.log，setup函数相当于vue2中的beforeCreate, created阶段，如果直接在setup中直接使用console.log获取ref，返回的自然是null。当然，如果你觉得文章有什么让你觉得不合理、或者有更简单的实现方法又或者有理解不来的地方，希望你在看到之后能够在评论里指出来，我会在看到之后尽快的回复你。最后，希望在提出疑问前请创建一个新项目，将文章中的示例代码完完整整的拷贝到新项目的app.vue中，运行后可直接查看效果。// 存储dom数组。
DOM基本流程
weixin_45290168的博客
08-15 1499
# DOM基本流程 写的有点不好，没有写全，大概就是这个意思，看不懂的话可以来问我 先进行导入dom4j包 1.构建解析工厂 ​ 使用：DocumentBuilderFactory.newDefaultInstance(); 2.创建解析对象 ​ 使用：factory.newDocumentBuilder(); 3.进行解析xml 文档树已经生成 ​ 使用：documentBuilder.parse 4.获取根节点 ​ 使用：document.getElement...
虚拟dom
weixin_52972239的博客
06-14 1836
1、虚拟DOM（virtual DOM）简称vdom，是一个普通的js对象，用来描述真实dom结构，因为它不是真实的DOM，所以称为虚拟DOM 2、属性：vdom具有三个属性 （1）tag：标签名 （2）attrs：属性 （3）children：子元素对象3、虚拟DOM的设计思想 （1）提供一种方便的工具，使开发效率得到保证； （2）保证最小化的DOM操作，使得执行效率得到保证1、原因一：真实的DOM运行是很慢的，其元素非常庞大，页面的性能问题，大部分都是由DOM操作引起的，真实的DOM节点，哪怕一个最简单
为什么需要虚拟DOM？
夕山雨的博客
08-30 4458
目录1. 真实DOM操作的性能问题2. 虚拟DOM的作用总结 我们知道，虚拟DOM的概念是由Facebook的React团队最早提出来的，也是React框架的核心概念之一。它的作用是以js的形式在内存中描述真实的DOM结构，这样当页面内容需要发生变动时，React可以通过对前后虚拟DOM的比对，计算出如何以最小的代价操作真实DOM。 1. 真实DOM操作的性能问题 在虚拟DOM出现之前，前端开发者最常用的方式是用jQuery直接操作真实DOM，像下面这样： <body> <div id
DOM入门基础
ange997的博客
08-01 3072
天道酬勤，地道酬精，人道酬善，商道酬诚，业道酬精。 DOM身为 JavaScript 三大内容之一，虽然在真正的开发中用的不多，但是也是JS学习中不可或缺的一部分，DOM的学习相对来说比较简单，分享一下我之前的部分DOM笔记。能力有限，水平一般，不足之处，多多包涵。 DOM简介 DOM，全称Document Object Model，文档对象模型。 DOM是一组用来描述 js 代码怎样与 html 文档进行交互和访问的 web 标准，它定义了一系列对象、方法和属性，用于访问、操作和创建文档中的内容、结构、样
浅谈shadow dom
TwInkle
07-04 2207
什么是shadow dom？有什么特点？有什么用？为什么需要 shadow-dom?怎么创建shadow dom？如何修改shadow dom的样式? shadow-dom 的未来
Dom
03-09
**DOM（Document Object Model）详解** DOM，全称为文档对象模型（Document Object Model），是W3C组织制定的一种标准，它提供了一种结构化的表示XML或HTML文档的方式，并且允许程序和脚本动态地访问和更新文档的...
dom
02-24
DOM，全称为“Document Object Model”，中文译为“文档对象模型”，是Web开发中的一个核心概念，尤其是在JavaScript中。它是一种标准，定义了如何表示HTML或XML文档，并提供了与这些文档交互的API（应用程序编程...
常用DOM整理
09-03
js在操作DOM中存在着许多跨浏览器方面的坑，本文花了我将近一周的时间整理，我将根据实例整理那些大大小小的“坑”。
dom4j_dom4j1.6.1安装包_
10-03
DOM4J是一个强大的Java库，专门用于处理XML文档。它提供了灵活、高效的API，使得XML的解析、创建、查询和修改变得更为简单。在本文中，我们将深入探讨DOM4J 1.6.1版本的安装及其在Maven项目中的应用。 首先，DOM4J...
dom4j解析xml文件的压缩包
11-23
DOM4J是一个强大的Java库，专门用于处理XML文档。它提供了灵活且高效的API，使得XML的解析、创建、查询和修改变得简单。这个压缩包包含了DOM4J的完整版本，适用于那些希望在Java项目中使用DOM4J进行XML操作的开发者...
Dom.rar_DOM
最新发布
09-23
8. **DOM2级和DOM3级**：DOM的后续版本增加了更多的功能，如样式操作、XML支持、事件接口等。 9. **性能优化**：频繁的DOM操作会降低页面性能，因此应尽量减少不必要的操作，使用文档碎片（`document....
dom.rar_DOM
09-22
在本案例中，“dom.rar_DOM”是一个关于将DOM影像数据导入ArcSDE数据库的程序或脚本。 ArcSDE，全称ArcSDE for GIS，是由Esri公司开发的一款空间数据引擎，用于支持大型地理数据库的管理和分发。它能够连接多种...
基本DOM节点操作
11-26
1、获取元素节点 getElementById()：获取指定唯一id的元素。 getElementByTagName()：获取指定元素标签名的元素数组。 getElementByName()：获取具有指定属性name的元素数组。 2、子节点 element.childNodes：返回该...
JavaScript DOM 高级编程指南
"JavaScript DOM 高级程序设计（加）桑贝斯" JavaScript DOM（Document Object Model）高级程序设计是Web开发中的重要主题，它涉及到如何使用JavaScript与网页的结构进行交互，包括创建、修改和操作HTML和XML文档的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值