DOM-js复习（未写完版）

Dan want to learn

已于 2024-06-12 15:06:06 修改

阅读量179

点赞数 7

文章标签： javascript 前端开发语言

于 2024-05-07 18:01:53 首次发布

本文链接：https://blog.csdn.net/m0_58777269/article/details/138534283

版权

DOM-js复习（未写完版）

简介

DOM(Document Object Model——文档对象模型)是用来呈现以及与任意 HTML 或 XML文档交互的API

白话文:DOM是浏览器提供的一套专门用来操作网页内容的功能

document的具体实现过程

注释：个人觉得document是因为在js里面不能直接利用html的p，title这些标签来进行使用，很不方便，因此需要借助别的syntax来实现这些规则

//这个body就是有点类似于<p>标签
document.body.innerHTML = 'hello';
//这个就是有点类似于head里面的<title>标签
document.title = 'good job!';
//如果先js外面的html里面body已经声明了需要直接说明使用展示
console.log(document.title);

innerHTML是直接将所有的body里面内容清空，然后替换为括号里面的内容。
[本质上这个就是获取内容，使用的时候就是判定是否相等于某个字符串,但是需要注意这个也是包含换行符那些信息，例如内容本身换行的话，这个innerHTML是可以读取到这个换行信息并且存储的，如果只想提取出内容的文案，那就需要innerText]
querySelector（'button'）：就是读取并且返回对应body的button标签对应的。
ps：如果里面对应的button有很多，又只想调用其中一个，最好直接采用class来命名对应的button,格式：“.class-name”
```
`document.querySelector('.js-score')`
```

document.getElementById( *id* ) 这个是在访问某一个Html元素的方法，集合对应的innerhtml就是进行修改元素

<body>
  <p id="demo">我的第一个段落展示。</p>
<script>
   document.getElementById("demo").innerHTML="段落已经修改。"
</script>
</body>

在这里插入图片描述

如果是想要调用函数的话是：

<script>
   document.getElementById("demo").innerHTML=myFunction(3,4);
</script>

想要直接不借助任何对应的原有html元素来进行输入元素，请使用document.wrtie()
例如：

   <script>
   document.write(Date());
   </script>

结合function和一些基本的功能console.log展示如下：

<button onclick="Click()">我的第一个段落。</button>
<script>
function Click(){
document.write(Date());	}
</script>

ps：一定要注意onclick调用函数的时候需要有"Click()"
不可以丢失括号！

Dan want to learn

关注

7
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
DOM-js复习（未写完版）

DOM(Document Object Model——文档对象模型)是用来呈现以及与任意 HTML 或 XML文档交互的API白话文:DOM是浏览器提供的一套专门用来操作网页内容的功能。
复制链接

扫一扫

DOM-js复习（未写完版）

DOM-js复习（未写完版）

简介

document的具体实现过程

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