DOM中document对象的常用属性方法

时间:2022-09-01 14:48:39

每个载入浏览器的 HTML 文档都会成为 Document 对象。

Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。

属性

1  document.anchors  返回对文档中所有 Anchor 对象的引用。还有document.links/document.forms/document.images等

2  document.URL       返回当前文档的url

3  document.title       返回当前文档的标题

4  document.body    返回body元素节点

方法

1  document.close()     关闭用 document.open() 方法打开的输出流,并显示选定的数据。

<!DOCTYPE html>
<html>
<head>
<script>
function createDoc()
{
var w=window.open();
w.document.open();
w.document.write("<h1>Hello World!</h1>");
w.document.close();
}
</script>
</head> <body>
<input type="button" value="New document in a new window" onclick="createDoc()">
</body>
</html>

2  document.createElement()     创建元素节点。

<!DOCTYPE html>
<html lang="en">
<!DOCTYPE html>
<head>
</head>
<body>
<p>hello world</p> <script>
var a = document.createElement('hr');
document.body.appendChild(a) </script>
</body>
</html>

3  document.createAttribute()   创建属性节点。

<!DOCTYPE html>
<html>
<body> <p id="demo">Click the button to make a BUTTON element.</p> <button onclick="myFunction()">Try it</button> <script> function myFunction()
{
var btn=document.createElement("BUTTON");
document.body.appendChild(btn);
}; </script> </body>
</html>

4  document.createTextNode()  创建文本节点。

<!DOCTYPE html>
<html lang="en">
<!DOCTYPE html>
<head>
</head>
<body>
<p>hello world</p> <script>
var a = document.createTextNode('hahahah');
document.body.appendChild(a) </script>
</body>
</html>

5  document. getElementsByClassName()   返回文档中所有指定类名的元素集合,作为 NodeList 对象集合。所谓NodeList对象集合,是一个类似于数组的数据格式,仅仅提供了length属性,像数组中的push  pop方法等都未提供

6  document.getElementById() 返回对拥有指定 id 的第一个对象的引用。

7  document.getElementsByName() 返回带有指定名称的对象集合。

8  document.getElementsByTagName() 返回带有指定标签名的对象集合

9  document.write() 向文档写 HTML 表达式 或 JavaScript 代码。注意:当html文档加载完后再使用write方法,会导致write内容覆盖掉原本的html文档。

<!DOCTYPE html>
<html lang="en">
<!DOCTYPE html>
<head>
</head>
<body>
<p>hello world</p> <script>
document.write('hahahh') </script>
</body>
</html>

DOM中document对象的常用属性方法的更多相关文章

  1. js基础之DOM中document对象的常用属性方法

    -----引入 每个载入浏览器的 HTML 文档都会成为 Document 对象. Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问. 属性 1  document.an ...

  2. JavaScript BOM-11-BOM的核心-window对象&semi; window对象的控制&comma;弹出窗口方法&semi; 超时调用&semi; 间歇调用&semi; location对象常用属性&semi; 位置操作--location&period;reaplace&comma;location&period;reload&lpar;&rpar;&semi; BOM中的history对象&semi; Screen对象及其常用属性&semi; Navigator对象&semi;

    JavaScript BOM 学习目标 1.掌握什么是BOM 2.掌握BOM的核心-window对象 3.掌握window对象的控制.弹出窗口方法 什么是bom BOM(browser object ...

  3. express模块中的req,res参数的常用属性方法

    express模块中的req,res参数的常用属性方法 const express = require('express'); const router = express.Router() rout ...

  4. Delphi中TStringList类常用属性方法详解

    TStrings是一个抽象类,在实际开发中,是除了基本类型外,应用得最多的. 常规的用法大家都知道,现在来讨论它的一些高级的用法. 先把要讨论的几个属性列出来: 1.CommaText 2.Delim ...

  5. WebBrowser常用属性方法介绍

    WebBrowser 常用属性方法 ■■方法 ==============================  ▲GoBack    相当于IE的"后退"按钮,使你在当前历史列表中后 ...

  6. DOM中Event 对象如何使用

    DOM中Event 对象如何使用 一.总结 一句话总结: 1.将event作为参数传递进来,然后就可以调用event对象的各种属性和方法了. <body onmousedown="wh ...

  7. javascript之DOM&lpar;二Document对象&rpar;

    javascript通过Document类型来表示文档.在浏览器中document是HTMLDocument对象(继承自Document)的一个实例,表示整个html页面.而且在浏览器中documen ...

  8. 【JavaScript】DOM之Document对象

    JS(JavaScript) 一.Document对象 1.Document对象是什么 Document对象 是DOM的基本规范也是重要的对象之一,以访问,更新页面内容的属性和方法通过conslie. ...

  9. jquery ajax中支持哪些返回类型以及js中判断一个类型常用的方法?

    1 jquery ajax中支持哪些返回类型在JQuery中,AJAX有三种实现方式:$.ajax() , $.post , $.get(). 预期服务器返回的数据类型.如果不指定,jQuery 将自 ...

随机推荐

  1. PHP实现文件上传

    一.关于全局变量$_FILES $_FILES包含有所有上传的文件信息.假设文件上传字段的名称为 img.则 $_FILES['img']['name']:客户端上传的文件的原名称. $_FILES[ ...

  2. 关于Excel导入的HDR&equals;YES&semi; IMEX&equals;1详解

    于Excel导入的HDR=YES; IMEX=1详解2011年12月27日 星期二 11:17 参数HDR的值:HDR=Yes,这代表第一行是标题,不做为数据使用 ,如果用HDR=NO,则表示第一行不 ...

  3. leetcode&commat; &lbrack;315&sol;215&rsqb; Count of Smaller Numbers After Self &sol; Kth Largest Element in an Array &lpar;BST&rpar;

    https://leetcode.com/problems/count-of-smaller-numbers-after-self/ You are given an integer array nu ...

  4. maven java&period;lang&period;OutOfMemoryError&colon;PermGEn space

    配置环境变量: JAVA_OPTS-Xms512m -Xmx1024m -XX:PermSize=256m -XX:MaxPermSize=512m   MAVEN_OPTS-Xms256m -Xmx ...

  5. J - 今年暑假不AC

    J - 今年暑假不AC Time Limit:1000MS     Memory Limit:32768KB     64bit IO Format:%I64d & %I64u Submit  ...

  6. 浙大pat 1059 题解

    1059. Prime Factors (25) 时间限制 50 ms 内存限制 32000 kB 代码长度限制 16000 B 判题程序 Standard 作者 HE, Qinming Given ...

  7. jQuery &equals;&equals;&equals; 面条式代码?

    自从React/Vue等框架流行之后,jQuery被打上了面条式代码的标签,甚至成了"过街老鼠",好像谁还在用jQuery,谁就还活在旧时代,很多人都争先恐后地拥抱新框架,各大博客 ...

  8. 在github上创建新的分支(包括管理分支)

    考虑到前面的项目在master分支上,这个不是太友好,下面在只有master分支的基础上,新建一个dev分支 一:查看 1.查看本地分支 git branch 2.查看远程分支 git branch ...

  9. How to use CAR FANS C800 Diagnostic Scan Tool to do diagnosis operation

    How to use Heavy Duty Diagnostic CAR FANS C800 Diagnostic Scan Tool to do diagnosis operation Here i ...

  10. Ansible Tower系列 四(使用tower执行一个命令)【转】

    在主机清单页面中,选择一个主机清单,进入后,选择hosts里的主机 Paste_Image.png 点击 RUN COMMANDS MODULE 选择 commandARGUMENTS 填写 ifco ...