DOM2详解

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

目录

一、Document类型

1、属性

1.1、document.documentElement

1.2、document.body

1.3、document.title

1.4、document.URL

1.5、document.domain

2、方法

2.1、文档写入

2.2、创建元素

二、属性方法

1、setAttribute()

2、removeAttribute()

3、getAttribute()

三、元素大小

1、offset

1.1、offsetLeft   

1.2、offsetTop   

1.3、offsetHeight   

1.4、offsetWidth  

2、client

2.1、clientHeight  

2.2、clientWidth  

3、scroll

3.1、scrollHeight  

3.2、scrollWidth   

3.3、scrollLeft   

3.4、scrollTop   

一、Document类型

1、属性

1.1、document.documentElement

指向<html>元素

    var a = document.documentElement
    console.log(a)

1.2、document.body

指向body元素

    var a = document.body
    console.log(a)

1.3、document.title

返回title元素中的文本，该属性可写

1.4、document.URL

返回当前页面的网址

1.5、document.domain

返回当前文档的域名

2、方法

2.1、文档写入

document.write()

    var btn = document.querySelector("button");
    btn.onclick=function(){
        document.write("这是一个练习")
    }

点击按钮变成下面内容

2.2、创建元素

document.createElement()

var P=document.createElement("p")

二、属性方法

1、setAttribute()

作用 ：为元素新增属性，或设置当前属性，接收两个参数：属性和值

    Div1.setAttribute("title","练习")
    var a = Div1.getAttribute("title")
    console.log(a);

2、removeAttribute()

作用：删除元素属性

    Div1.removeAttribute("title")

3、getAttribute()

作用：获取元素属性值，不存在则返回null

    Div1.setAttribute("title","练习")
    Div1.removeAttribute("title")
    var a = Div1.getAttribute("title")
    console.log(a);

三、元素大小

1、offset

1.1、offsetLeft   

元素左外边框距离左边的距离

    var Div1 = document.querySelector(".div1")
    var a = Div1.offsetLeft;
    console.log(a);

 

1.2、offsetTop   

元素上外边框距离上边的距离

    var Div1 = document.querySelector(".div1")
    var a = Div1.offsetTop;
    console.log(a);

1.3、offsetHeight   

元素垂直方向所占空间height+padding+border和子元素无关

                  

    var Div1 = document.querySelector(".div1")
    var a = Div1.offsetHeight;
    console.log(a);

 

1.4、offsetWidth   

元素水平方向所占空间width+padding+border和子元素大小无关

     

    var Div1 = document.querySelector(".div1")
    var a = Div1.offsetWidth;
    console.log(a);

2、client

2.1、clientHeight   

元素垂直方向所占空间height+padding和子元素大小无关

        

    var Div1 = document.querySelector(".div1")
    var a = Div1.clientHeight
    console.log(a);

2.2、clientWidth   

元素水平方向所占空间width+padding和子元素大小无关

       

    var Div1 = document.querySelector(".div1")
    var a = Div1.clientWidth
    console.log(a);

3、scroll

3.1、scrollHeight   

子元素不大于父元素情况下和client相同。
如果子元素大于父元素，大小为：子元素大小+padding+border+margin

                   

 scrollHeight = 150(子元素高度) + 5（父元素下padding） + 10（子元素上margin） + 2 * 2 (子元素上下border) + 10 * 2（子元素上下padding）

    var Div1 = document.querySelector(".div1")
    var a = Div1.scrollHeight
    console.log(a);

 

3.2、scrollWidth   

子元素不大于父元素情况下和client相同。
如果子元素大于父元素，大小为：子元素大小+padding+border+margin

 scrollHeight = 150(子元素宽度) + 5（父元素右padding） + 10（子元素左margin） + 2 * 2 (子元素左右border)+ 10 * 2（子元素左右padding）

            

    var Div1 = document.querySelector(".div1")
    var a = Div1.scrollWidth
    console.log(a);

3.3、scrollLeft   

有滚动条的情况设置或者获取向左滚动的距离

3.4、scrollTop   

有滚动条的情况设置或者获取向上滚动的距离

辰辰辰辰宸
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Dom2(页面加载事件,标签样式,刷新)
xbc1213的博客
01-21 638
主要有3种: 第一种:onload 页面加载完毕时触发,浏览器是一边下载文档,一边解析执行,可能会出现会出现JavaScript执行时需要操作的参数还没有加载.如果这样,就要把操作的文档放到body的onload事件中,或者把JavaScript放到元素之后.元素的onload事件是元素自己加载完毕时触发,body onload才是全部加载完成. 案例:onload=function(){
JavaScript中DOM详解
10-24
主要介绍了jQuery 中DOM 操作详解,以及在火狐和IE之间的13点JavaScript差异，需要的朋友可以参考下
DOM2
wdzhszyq的博客
04-24 230
1.创建节点输出内容 html> head> meta charset="UTF-8"> title>title> head> body> input type="text" name="" id="" value="" /> input type="button" name="" id="" value=
jQuery 中DOM 操作详解
10-24
主要介绍了jQuery 中DOM 操作详解,需要的朋友可以参考下
DOM 事件流详解
09-03
主要详细介绍了DOM中的事件流，包括冒泡型事件、事件监听、标准DOM事件监听这三个方面，十分详细，推荐给大家。
js学习总结之dom2级事件基础知识详解
10-19
DOM2级事件是JavaScript中处理用户交互和页面动态更新的关键部分。在DOM2级事件模型中，事件处理有了更高级别的灵活性和控制力，相比于早期的DOM0级事件绑定方式。DOM0级事件绑定简单直观，但存在一些限制，比如只能...
js常用DOM方法详解
10-20
本文主要介绍了js常用的DOM方法，具有很好的参考价值，下面跟着小编一起来看下吧
DOM2.1.0 jar （真-免费）
06-12
不想隔壁的妖艳jian货，DOM4j jar包，点击下载！ 其实我也想免费的，但是好像最低就1积分，不知道怎么设置，知道的告诉我一下。
dom2
JASMINECJC的博客
02-29 436
事件冒泡：即事件最开始由最具体的元素接受然后逐级向上传播至最不具体的那个节点（比较主要） 事件捕获：不太具体的事件更早接收到事件，最具体的节点最后接收到事件 html事件的缺点：html和js紧密的耦合在一起 dom0级事件处理程序：document.getElementById（'btn'）.onclick=function(){}; dom2级事件处理程序 ：
DOM2与DOM3
最新发布
m0_61773971的博客
03-16 196
之前详细讲解了DOM1的内容,DOM2和DOM3在这些结构上加入了更多的交互能力.DOM2与DOM3是按照模块化的思路来制定标准的,每个模块之间有一定关联,但分别针对某个DOM子集.DOM Core :在DOM核心部分的基础上,为节点增加方法和属性.DOM Views :定义基于样式信息的不同视图.DOM Events :定义通过事件实现DOM文档交互.DOM Style :定义以编程方式访问和修改CSS样式的接口。
浅谈JavaScript中DOM2
欧唯薇
04-06 430
浅谈JavaScript中DOM2 DOM2级分成了以下六个模块： 1、DOM2级核心：为节点添加了方法和属性 2、DOM2级视图 3、DOM2级事件：说明了如何使用事件与DOM文档交互 4、DOM2级样式：CSS 5、DOM2级遍历和范围 6、DOM2级HTML 一、样式 在THML中，为网页设置样式有三种方法，而DOM2则围绕这三种方法提供了一套API，可以使用下列代...
DOM2（获取元素）
lzyPM的博客
02-21 291
获取元素 （常用/不常用） 获取节点 （常用/不常用） 节点属性定义 兼容 获取元素（常用） 1.document.querySelector（"#btn"） （1）根据任意选择器取元素（返回符合条件第一个） （2）ID选择器/类选择器/等任何选择器（基础选择器4种）例如：#id，.lzy ， div等 2.document.querySelectorAll（".lzy"） （1）根据任意选...
js DOM(2)
Casablanca
03-08 138
获取当前元素节点下的所有子元素节点对象 &lt;!DOCTYPE html&gt; &lt;!-- childNodes：获取当前元素节点的所有子节点 --&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="description"
DOM2和DOM3
qq_42770988的博客
05-22 299
一、DOM的变化 DOM2级核心 DOM2级视图 DOM2级事件 DOM2级样式 DOM2级遍历和范围 DOM2级的HTML
DOM2级样式
Blog
08-21 297
一、常用方法 1.确定文档的归属窗口： varparentWindow=document.defaultView||document.parentWindow//IE 2.用于确定当前节点具有什么能力（建议使用能力检测） Document.body.isSupported(); Document.implementation.hasFeature(); 接收两个参数：特性名和版本号
038HTML-DOM对象.doc
11-30
1. HTML DOM 对象详解 - **Table对象**：HTML表格的核心代表，每当文档中出现一个标签，都会对应创建一个Table对象。Table对象提供了关键属性如`cells`（存储所有单元格）和`rows`（存储所有行），以及方法如`...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值