JavaScript Document 对象实例讲解
JavaScript -- 知识点回顾篇(十一):DOM -- Document 对象
(1) document.activeElement: 返回文档中当前获得焦点的元素。
<!doctype html> <html> <head> <meta charset="UTF-8"> <script type="text/javascript"> function my_activeElement() { var x = document.activeElement.tagName; document.getElementById("myInfo").innerHTML = x; } </script> </head> <body> <div onclick="my_activeElement()"> <input type="button" value="按钮1"> <button>按钮2</button> </div> <div id='myInfo'></div> </body> </html>
(2) document.addEventListener(): 用于向文档添加事件句柄。
<!doctype html> <html> <head> <meta charset="UTF-8"> <script type="text/javascript"> document.addEventListener("click", function(){ document.getElementById("myInfo").innerHTML = "China"; }); </script> </head> <body> <div id='myInfo'>I come from </div> </body> </html>
(3) document.baseURI: 返回文档的绝对基础 URI
<!doctype html> <html> <head> <meta charset="UTF-8"> <script type="text/javascript"> function my_baseURI(){ var x=document.getElementById("myInfo").innerHTML=document.baseURI; } </script> </head> <body> <input type="button" value="按钮" onclick="my_baseURI()"> <div id='myInfo'></div> </body> </html>
(4) document.body: 返回文档的body元素
<!doctype html> <html> <head> <meta charset="UTF-8"> <script type="text/javascript"> function my_body() { document.body.style.backgroundColor = "yellow"; } </script> </head> <body> <input type="button" value="按钮" onclick="my_body()"> <div id='myInfo'></div> </body> </html>
(5) document.cookie: 设置或返回与当前文档有关的所有 cookie。
<!doctype html> <html> <head> <meta charset="UTF-8"> <script type="text/javascript"> document.write(document.cookie); </script> </head> <body> </body> </html>
(6) document.createAttribute(): 用于创建一个指定名称的属性,并返回Attr 对象属性
<!doctype html> <html> <head> <meta charset="UTF-8"> <script type="text/javascript"> function my_createAttribute(){ var att=document.createAttribute("class"); att.value="divclass"; document.getElementById("myInfo").setAttributeNode(att); } </script> <style type="text/css"> .divclass{ background-color:yellow; } </style> </head> <body> <input type="button" value="按钮" onclick="my_createAttribute()"> <div id='myInfo'>hello</div> </body> </html>
(7) document.createComment(): createComment() 方法可创建注释节点。
<!doctype html> <html> <head> <meta charset="UTF-8"> <script type="text/javascript"> function my_createComment(){ var c=document.createComment("这是我添加的注释"); document.body.appendChild(c); } </script> </head> <body> <input type="button" value="按钮" onclick="my_createComment()"> <div id='myInfo'>hello China</div> </body> </html>
(8) document.createDocumentFragment(): 创建空的 DocumentFragment 对象,并返回此对象。
<!doctype html> <html> <head> <meta charset="UTF-8"> <script type="text/javascript"> function my_createDocumentFragment(){ var d=document.createDocumentFragment(); d.appendChild(document.getElementsByTagName("LI")[0]); d.childNodes[0].childNodes[0].nodeValue="XXXX"; document.getElementsByTagName("UL")[0].appendChild(d); } </script> </head> <body> <ul><li>AAA</li><li>BBB</li></ul> <ul><li>CCC</li><li>DDD</li></ul> <input type="button" value="按钮" onclick="my_createDocumentFragment()"> </body> </html>
(9) document.createElement(): 通过指定名称创建一个元素。
document.createTextNode(): 创建文本节点。
<!doctype html> <html> <head> <meta charset="UTF-8"> <script type="text/javascript"> function my_create(){ var btn=document.createElement("BUTTON"); var t=document.createTextNode("新创建的按钮"); btn.appendChild(t); document.body.appendChild(btn); } </script> </head> <body> <input type="button" value="按钮" onclick=" my_create()"> </body> </html>
(10) document.doctype: 返回与文档相关的文档类型声明 (DTD)。
document.documentElement: 返回文档的根节点
document.documentMode: 返回用于通过浏览器渲染文档的模式
document.documentURI: 设置或返回文档的位置
document.domain: 返回当前文档的域名。
<!doctype html> <html> <head> <meta charset="UTF-8"> <script type="text/javascript"> function my_Test(){ document.getElementById('myInfo').innerHTML='doctype.name的值是: '+document.doctype.name+'<br/>'; document.getElementById('myInfo').innerHTML+='documentElement.nodeName的值是: '+document.documentElement.nodeName+'<br/>'; document.getElementById('myInfo').innerHTML+='document.documentMode的值是: '+document.documentMode+'<br/>'; document.getElementById('myInfo').innerHTML+='document.documentURI的值是: '+document.documentURI+'<br/>'; document.getElementById('myInfo').innerHTML+='document.domain的值是: '+document.domain+'<br/>'; } </script> </head> <body> <input type="button" value="按钮" onclick="my_Test()"> <div id='myInfo'></div> </body> </html>
(11) document.getElementsByClassName(): 返回文档中所有指定类名的元素集合,作为 NodeList 对象。
document.getElementById(): 返回对拥有指定 id 的第一个对象的引用。
document.getElementsByName(): 返回带有指定名称的对象集合。
document.getElementsByTagName(): 返回带有指定标签名的对象集合。
<!doctype html> <html> <head> <meta charset="UTF-8"> <script type="text/javascript"> function my_Test(){ document.getElementById('myInfo').innerHTML=document.getElementsByClassName("myclassName")[0].innerHTML+'<br/>'; document.getElementById('myInfo').innerHTML+=document.getElementById('myid').innerHTML+'<br/>'; document.getElementById('myInfo').innerHTML+=document.getElementsByName("myName")[0].value+'<br/>'; document.getElementById('myInfo').innerHTML+=document.getElementsByTagName("P")[0].innerHTML+'<br/>'; } </script> </head> <body> <div class="myclassName">myclassName</div> <div id='myid'>myid</div> <input type="button" name="myName" value="myName按钮" > <p>P元素</p> <hr/> <input type="button" value="按钮" onclick="my_Test()"> <div id='myInfo' style="background-color:yellow"></div> </body> </html>
(12) document.implementation: 返回处理该文档的 DOMImplementation 对象。
document.inputEncoding: 返回用于文档的编码方式(在解析时)。
document.lastModified: 返回文档被最后修改的日期和时间。
document.title: 返回当前文档的标题。
document.URL: 返回文档完整的URL
document.readyState: 返回文档状态
document.referrer: 返回载入当前文档的文档的 URL。
<!doctype html> <html> <head> <title>MyTest</title> <meta charset="UTF-8"> <script type="text/javascript"> function MyTest(){ document.getElementById("myInfo").innerHTML='是否有功能HTML DOM 1.0: '+document.implementation.hasFeature("HTML","1.0"); document.getElementById("myInfo").innerHTML+='<br/>inputEncoding: '+document.inputEncoding; document.getElementById("myInfo").innerHTML+='<br/>lastModified: '+document.lastModified; document.getElementById("myInfo").innerHTML+='<br/>readyState: '+document.readyState; document.getElementById("myInfo").innerHTML+='<br/>referrer: '+document.referrer; document.getElementById("myInfo").innerHTML+='<br/>URL: '+document.URL; document.getElementById("myInfo").innerHTML+='<br/>title: '+document.title; } </script> </head> <body> <input type="button" value="按钮" onclick="MyTest()"> <div id='myInfo' style="background-color:yellow"></div> </body> </html>
(13) document.normalize(): 删除空文本节点,并连接相邻节点
<!doctype html> <html> <head> <meta charset="UTF-8"> <script type="text/javascript"> function my_addTextNode(){ var y=document.createTextNode("新节点 "); document.getElementById("a").appendChild(y); document.getElementById("c").innerHTML=document.getElementById("a").childNodes.length; } function my_normalize(){ document.normalize(); document.getElementById("c").innerHTML=document.getElementById("a").childNodes.length; } </script> </head> <body> <div id='a'></div> <input type="button" value="添加节点" onclick="my_addTextNode()"> <input type="button" value="normalize" onclick="my_normalize()"> <div id='c'></
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 找找规律——LeetCode题目6:Z字形变换
- 给你点信心——LeetCode题目7:整数反转
- Python -二叉树 创建与遍历算法(很详细,转自国外教程)
- APP流量来源追踪方式——Android篇
- 从浏览器输入网址回车到看到页面过程到底经历了什么?
- Flutter Bloc 官方文档(BlocBuilder翻译)
- OpenGL ES 3.0 | 统一变量和属性的概念与(在程序中的)获取流程、统一变量缓冲区对象详解、std140块规范、用 命名统一变量块 建立 统一变量缓冲区对象 的流程 和 相关API 和...
- 深入浅出SVM(PART III)
- 高频原题——LeetCode题目8:字符串转换整数 (atoi)
- 不转字符串判断——LeetCode题目9:回文数
- 关于双指针的简单理解
- 面试题噩梦之一——LeetCode题目10:正则表达式匹配
- 什么时候触发GC
- 找找数学上的规律——LeetCode题目11:盛最多水的容器
- Java学习笔记, 不断更新