原生js获取document

document 对象是 JavaScript 中的一个全局对象，它代表了当前页面的 DOM（Document Object Model，文档对象模型）。通过 document 对象，你可以访问和操作 HTML 页面中的所有元素。

基础概念

DOM（文档对象模型）：DOM 是一种编程接口，它表示 HTML 和 XML 文档的结构，并允许程序和脚本动态地访问和更新文档的内容、结构和样式。
document 对象：它是 DOM 的入口点，提供了访问页面元素的方法和属性。

优势

动态交互：允许开发者通过脚本实时修改页面内容和结构。
跨平台兼容性：几乎所有现代浏览器都支持 DOM 标准。
丰富的 API：提供了大量的方法和属性来处理页面元素。

类型

document 对象本身没有类型，但它是多种 DOM 接口的根对象，例如 Element, Node, EventTarget 等。

应用场景

表单验证：在用户提交表单前，使用 JavaScript 检查输入是否有效。
动态内容更新：根据用户的操作实时更新页面上的某些部分。
动画效果：通过改变元素的样式属性来实现动画效果。
事件处理：监听用户的点击、滚动等事件并作出响应。

示例代码

以下是一些使用原生 JavaScript 获取 document 对象并进行操作的简单示例：

获取页面元素

// 获取页面中的第一个 <p> 元素
var firstParagraph = document.querySelector('p');

// 获取所有 <a> 元素的列表
var links = document.querySelectorAll('a');

修改元素内容

// 改变第一个 <p> 元素的文本内容
firstParagraph.textContent = '新的段落内容';

// 改变所有 <a> 元素的 href 属性
links.forEach(function(link) {
    link.href = 'https://example.com';
});

添加事件监听器

// 当用户点击按钮时弹出一个警告框
document.getElementById('myButton').addEventListener('click', function() {
    alert('按钮被点击了！');
});

可能遇到的问题及解决方法

问题：获取不到元素

原因：可能是选择器错误，或者元素还未加载到 DOM 中。

解决方法：

确保选择器正确无误。
使用 window.onload 或 document.addEventListener('DOMContentLoaded', ...) 确保在 DOM 完全加载后再执行脚本。

window.onload = function() {
    var element = document.getElementById('myElement');
    // 现在可以安全地操作 element
};

问题：脚本执行顺序问题

原因：脚本可能在 DOM 元素之前执行。

解决方法：

将脚本标签放在 HTML 页面的底部，紧接在所有内容之后。
使用异步加载脚本或动态创建脚本标签。

<!-- 将脚本放在 body 标签的底部 -->
<body>
    <!-- 页面内容 -->
    <script src="path/to/script.js"></script>
</body>

通过以上方法，你可以有效地使用原生 JavaScript 来获取和操作 document 对象。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

js获取元素相对于document的坐标

el => { const { left, top } = el.getBoundingClientRect() const { scrollTop, scrollLeft } = document.body...content="IE=edge"> Document...const { left, top } = el.getBoundingClientRect() const { scrollTop, scrollLeft } = document.body...left + scrollLeft } }; window.onresize = e => { console.table(getOffset(document.getElementById

6.9K6 0

js中获取html元素之document.documentElement

document.documentElement Document.documentElement 是一个会返回文档对象（document）的根元素的只读属性（如HTML文档的元素）。...对于任何非空 HTML 文档，调用 document.documentElement 总是会返回一个元素，且它一定是该文档的根元素。借助这个只读属性，能方便地获取到任意文档的根元素。...参考文档 html中document.body 与 document.documentElement的区别如下： 1. document.body 返回html dom中的body节点即...2. document.documentElement 返回html dom中的root根节点即页面指定了 DOCTYPE 时，使用 document.documentElement，...否则，使用 document.body。

6.9K3 0

JavaScript 技术篇-js获取document的几种方式，js获取dom元素的常用方法。

方法主要分为两大类第一类：通过属性获取。通过 document.getElementById("fash") 获取到p页签。 ?...第二类：通过css选择器获取通过 document.querySelector(".fash") 获取到p页签。

6.8K1 0

input获取焦点原生js_原生js的input事件

1.onfocus 当input 获取到焦点时触发 2.onblur 当input失去焦点时触发，注意：这个事件触发的前提是已经获取了焦点再失去焦点的时候才会触发该事件，用于判断标签为空。...oninput 当input的value值发生变化时就会触发，(与onchange的区别是不用等到失去焦点就可以触发了) 使用方法：以上事件可以直接放到input的属性里，例如： 1 ，可以通过js...给input dom元素添加相应的事件， 2 document.getElementByTagName(‘input’).onfocus = function(); 3 事件监听。

25.8K6 0

js原生ajax请求获取数据

(function(response) { return response.json(); }) .then(function(myJson) { console.log(myJson); }); js...原生ajax请求fetch https://developer.mozilla.org/zh-CN/docs/Web/API/Fetch_API/Using_Fetch

11.9K2 0

原生JS | 通过类名获取标签

HTML5学堂（码匠）：在原生JavaScript当中，存在默认的getElementsByClassName()方法，在不支持该方法的浏览器中，又应该怎么实现“通过类名获取标签”呢？...原生JS通过类名获取标签 getElementsByClassName()是原生JavaScript提供的方法，但是并不是所有的浏览器都支持，在ie早期版本的浏览器是不允许通过这个方法获取标签的，因此...JS功能代码 1....构建函数使用工厂模式创建函数，用户向“工厂（函数）”中传入类名，使用if语句，判断document是否存在getElementsByClassName方法，如果存在，则直接获取；如果不存在，则先获取所有标签...此外，为了让第二个参数可以是缺省的，需要再添加一个if语句，在没有指定第二参数时，在document元素下进行查找。 ? 3.

13.1K6 0

原生js本地存储、获取、删除、清空

title> 存储获取...页面刷新不丢失 // session---5M local---20M // 存进去是字符串 // sessionStoragr(key,value)---关闭页面消失 var ipt = document.querySelector...('input') var set = document.querySelector('.set') set.addEventListener('click',function(){ // 点击储存...var val = ipt.value; sessionStorage.setItem('uname',val) }) // 获取 var get = document.querySelector...remove.addEventListener('click',function(){ sessionStorage.removeItem('uname') }) // 全删 var del = document.querySelector

5.9K2 0

js原生如何获取网页元素

javascript需要掌握的常见方法有：1、getElementById：是指根据指定的 id 属性获取指定的元素。...示例：var phone= document.getElementById("phone");2、getElementsByClassName：是指通过元素的class属性获取指定元素集合。...示例：var x = document.getElementsByClassName("example");3、getElementsByTagName：通过标签名获取指定的元素集合。...示例代码：var tr= document.getElementsByTagName("tr");var op=document.getElementsByTagName("p")[0];4、querySelector...示例代码：var div = document.querySelector("div");5、querySelectorAll:通过CSS选择器获取所有符合条件的元素集合。

1051 0

JS篇(001)-document load 和 document ready 的区别

答案：页面加载完成有两种事件 1.load是当页面所有资源全部加载完成后（包括DOM文档树，css文件，js文件，图片资源等），执行一个函数问题：如果图片资源较多，加载时间较长，onload后等待执行的函数需要等待较长时间...$(document).ready()是当DOM文档树加载完成后执行一个函数（不包含图片，css等）所以会比load较快执行在原生的js中不包括ready()这个方法，只有load方法也就是onload

1.8K2 0

JS示例06-document.getElementsByTagName

window.onload = function() { var div1 = document.getElementsByTagName

1.5K2 0

原生JS获取input上传的图片返回的地址

点击上传后，读取上传的文件 // 点击上传图片 function uploadImg(){ let file = document.getElementById('uploadFile').files...reader.readAsDataURL(file); reader.onload = function(result){ let showUploadFile = document.getElementById

22.3K1 0

js获取元素到文档区域document的(横向、纵向)坐标的两种方法

获取页面中元素到文档区域document的横向、纵向坐标的两种方法及其比较在js控制元素运动的过程中，对于页面元素坐标位置的获取是经常用到的，这里主要总结下两种方法：一：通过叠加元素对象和它的offsetParent...js代码： // 获取元素到文档区域的坐标 function getPosition(element) { var actualLeft = element.offsetLeft, actualTop...js代码： // 获取元素到文档区域的坐标 function getPosition(element){ var dc = document, rec = element.getBoundingClientRect...(), _x = rec.left, // 获取元素相对浏览器视窗window的左、上坐标 _y = rec.top; // 与html或body元素的滚动距离相加就是元素相对于文档区域document...结语：上文已对如何获取元素相对于文档区域document的坐标位置做出了阐述，如遇到相关问题，可联系本人或直接发表评论，另外，对于右坐标right以及下坐标bottom的获取只需把left、top坐标的大小和元素本身的宽度

2.7K3 0

document.onreadystatechange_js转json格式

w3c.png” onreadystatechange=”OnStateChangeImage (this)” /> js...’)); document.body.appendChild(divElement); } domImage.src = url; document.getElementsByTagName(‘head...(‘head’)[0].appendChild(domLink);} window.onload=function (){ //执行动态加载外部 JS 文件 loadJS(‘http://code.jquery.com.../jquery-1.4.js’); //执行动态加载图片文件 loadIMG(‘w3c.png’); //执行动态加载css文件 loadCSS(‘http://www.cnblogs.com/http...如果使用 onreadystatechange 是为了处理脚本加载（回调）的问题，请参考 BX9013: 动态引入的外部 JS 文件在各浏览器中的加载顺序不一致一文“解决方案”中的内容。

2.9K1 0

js里面的document.cookie详解

获取cookie的值下面介绍如何获取cookie的值。...由此可见，只能够一次获取所有的cookie值，而不能指定cookie名称来获得指定的值，这正是处理cookie值最麻烦的一部分。...用户必须自己分析这个字符串，来获取指定的cookie值，例如，要获取userId的值，可以这样实现： <script language=”JavaScript” type=”text/javascript...– //设置两个cookie document.cookie=”userId=828″; document.cookie=”userName=hulk”; //获取cookie字符串 var...– //获取当前时间 var date=new Date(); var expireDays=10; //将date设置为10天以后的时间 date.setTime(date.getTime(

3.3K3 0

js书写原生ajax,JS 原生ajax写法

原生ajax 原文链接:http://caibaojian.com/ajax-jsonp.html 一.JS原生ajax ajax:一种请求数据的方式,不需要刷新整个页面: ajax的技术核心是 XMLHttpRe...… JS原生ajax与Jquery插件ajax深入学习序言: 近来随着项目的上线实施,稍微有点空闲,闲暇之时偶然发现之前写的关于javascript原生xmlHttpRequest ajax方法以及后来...jquery插件ajax方法,于是就行了一些总结,因 … js原生Ajax的封装与使用一.原生Ajax代码的封装如下: (function() { var XHR = { createStandardXHR...原生ajax 主要复习了php的pdo数据库操作,和js的ajax,真麻烦,希望jquery的ajax简单点. index.php: 1 2 [代码]JS原生Ajax&comma...;GET和POST javascript/js的ajax的GET请求: Jquery学习笔记(10)–ajax删除用户，使用了js原生ajax 主要复习了php的pdo数据库操作,和js的ajax,真麻烦

15.3K4 0

解决document.cookie无法获取到cookie问题

一、前言在进行前后端联调的时候，由于想实现一个登出操作，前端自动删除浏览器存储的cookie，想通过document.cookie来获取进而进行删除操作，但是发现浏览器有cookie；但是无法获取到情况遂记录...二、场景复现首先登录后，浏览器中是有记录cookie的，如图然后我代码层执行documen.cookie发现获取不到，浏览器控制台也同样后面去研究了一下application中存放的...throw new RuntimeException(var6.getMessage()); } } 后面我将HttpOnly设置false状态后，documen.cookie就能够获取到

4.8K2 0

原生JS TitleTip

What How Why 原生JS TitleTip 为了实现对特定的A标签Title的美化，使其可以按照我们想要的样式显示。...document.getElementById(id) : id; }, getTextSize: function(text) { var span = document.createElement...("TitleTipDiv")) { document.body.removeChild(document.getElementById("TitleTipDiv")); } div...= document.createElement("div"); div.id = "TitleTipDiv"; // div.style.cssText = "text-align: center...: function(param) { var linkArr = document.getElementsByTagName("a"); if (!

6.2K4 0

JS原生复制

textarea> copy var text = document.getElementById...("text").innerText; var input = document.getElementById("input"); input.value = text; //...修改文本框的内容 input.select(); // 选中文本 document.execCommand("copy"); // 执行浏览器复制命令 alert("

16.9K3 0

原生JS拖拽

content="IE=edge"> 原生...JS拖拽 * { margin: 0; padding: 0; }...class="box" id="drag"> window.onload = function () { // 获取拖拽的节点...，用drag对象，move和up是全局区域， // 也就是整个文档通用，应该使用document对象而不是drag对象。...// console.log(event); // 获取window对象 var event = event || window.event;

13.1K4 0

js中document.getElementById()用法「建议收藏」

dom标准里面的获取当前文档中指定id的元素 if (document.getElementById(“regjm”).value !...= document.getElementById(“regjm1”).value ) { alert(“提示：请输入有效的认证码”); document.getElementById...(“link”).target; document.getElementById(“img”).src; document.getElementById(“img”).width; document.getElementById...返回具有指定 ID 属性值的第一个比如说有个网页中有个text框的id叫text1 getElementById(text1)就能得到这个text1框的对象,并使用text框的所有属性和方法这个是JS...这个是JS的一个方法，意思是通过控件ID取得元素的值，如一个form里包函text、label等，他们都是FORM的元素，有一个分配的ID，getElementById()是取得这些元素的text值的。

3.2K2 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云