首页 > 编程语言 >【JavaScript】44_DOM编程初步

【JavaScript】44_DOM编程初步

时间:2023-03-14 10:32:16浏览次数:62  
标签:document console log DOM -- 44 JavaScript 对象 btn

1、初识

要使用DOM来操作网页,我们需要浏览器至少得先给我一个对象

才能去完成各种操作

所以浏览器已经为我们提供了一个document对象,它是一个全局变量可以直接使用

document代表的是整个的网页

<body>
<button id="btn">点我一下</button>
<script>
console.log(document)
//获取btn对象
const btn = document.getElementById('btn')
console.log(btn)
//修改btn中的文字
btn.innerText = 'Click ME'
</script>
</body>

2、document对象

document对象

document对象表示的是整个网页

document对象的原型链

HTMLDocument -> Document -> Node -> EventTarget -> Object.prototype -> null

凡是在原型链上存在的对象的属性和方法都可以通过Document去调用

部分属性:

document.documentElement --> html根元素 document.head --> head元素 document.title --> title元素 document.body --> body元素 document.links --> 获取页面中所有的超链接 ...

<body>
<a href="#">hhh</a>
<script>
console.log(document.links)
</script>
</body>

【JavaScript】44_DOM编程初步_超链接

标签:document,console,log,DOM,--,44,JavaScript,对象,btn
From: https://blog.51cto.com/wujianrenn/6120076

相关文章

  • JavaScript
    变量:区分大小写,不把一个值保存到新的变量,这个变量就是一次性的(就是丢了这个数据地址)//驼峰命名var变量名;常量:不可改变的值用常量//全部单词大写,用_分割单词 数......
  • 【洛谷】P4457 [BJOI2018]治疗之雨(期望+高斯消元)
    原题链接题意初始时玩家有\(p\)滴血,满血\(n\)滴,每个回合会进行如下操作:若当前还没有满血,则以\(\frac{1}{m+1}\)的概率增加一滴血;\(k\)次判定,每次以\(\frac......
  • JavaScript作用域闭包(你不知道的JavaScript)
    JavaScript闭包,是JS开发工程师必须深入了解的知识。3月份自己曾撰写博客《​​JavaScript闭包​​》,博客中只是简单阐述了闭包的工作过程和列举了几个示例,并没有去刨根问底,......
  • JavaScript词法作用域(你不知道的JavaScript)
    JavaScript并不是传统的块级作用域,而是函数作用域!一、作用域1.JavaScript引擎在代码执行前会对其进行编译,在这个过程中,像vara=2这样的声明会被分解成两个独立的步骤:......
  • 1.javaScript日期格式化转换
    //(newDate()).Format("yyyy-MM-ddhh:mm:ss.S")==>2006-07-0208:09:04.423Date.prototype.Format=function(fmt){varo={"M+":this.getMonth()+1,//mont......
  • JavaScript事件代理,减少开销提高效率
    JavaScript事件代理(事件委托),即把原本需要绑定的事件委托给父元素,让父元素担当事件监听的职务。众所周知,DOM操作是十分消耗性能的。所以重复的事件绑定简直是性能杀手。而事......
  • JavaScript回调函数
    JavaScriptAPI里这样解释:Acallbackisafunctionthatispassedasanargumenttoanotherfunctionandisexecutedafteritsparentfunctionhascompleted.(回调......
  • React渲染元素DOM
    1<!DOCTYPEhtml>2<htmllang="en">34<head>5<metacharset="UTF-8">6<metahttp-equiv="X-UA-Compatible"content="IE=edge">7<metan......
  • 华普物联EAIO版本4路网络IO控制器 HP-EAIO-244关于智慧畜牧养殖应用场景解决方案
    随着现代畜牧养殖业的发展,行业数据资源分散,畜产品质量安全管理等诸多问题。这严重阻碍了现代畜牧业快速发展的步伐。伴随着畜牧业的快速发展,畜牧业的规模化、专业化水平不......
  • Python随机数(random)
    需要导入的库:importrandomimportstring(一)随机整数1.包含上下限:[a,b]random.randint(a,b)在python中的random.randint(a,b)用于生成一个指定范围内的整数。其......