JavaScript -- 时光流逝（十一）：DOM -- 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'></div>

</body>

</html>

(14) document.querySelector(): 返回文档中匹配指定的CSS选择器的第一元素
　　 document.querySelectorAll(): 返回文档中匹配的CSS选择器的所有元素节点列表

<!doctype html>

<html>

<head>

<meta charset="UTF-8">

<script type="text/javascript">

    function my_Test(){

        document.querySelector("#a").innerHTML = "Hello World!";

        document.querySelectorAll(".b")[0].style.backgroundColor = "red";

    }

</script>

</head>

<body>

    <input type="button" value="点我" onclick="my_Test()"/>

    <div id='a'>Hello</div>

    <div class='b'>XXX</div>

    <div class='b'>XXXXXX</div>

</body>

</html>

(15) document.removeEventListener(): 移除文档中的事件句柄(由 addEventListener() 方法添加)

<!doctype html>

<html>

<head>

<meta charset="UTF-8">

<script type="text/javascript">

    document.addEventListener("mousemove", myTest);

    function myTest() {

        document.getElementById("a").innerHTML = Math.random();

    }

    function my_removeEventListener() {

        document.removeEventListener("mousemove", myTest);

    }

</script>

</head>

<body>

    <input type="button" value="点我" onclick="my_removeEventListener()"/>

    <div id='a'>Hello</div>

</body>

</html>

JavaScript -- 时光流逝（十一）：DOM -- Document 对象的更多相关文章

HTML DOM Document 对象
HTML DOM Document 对象 HTML DOM 节点在 HTML DOM (Document Object Model) 中 , 每一个元素都是节点: 文档是一个文档. 所有的HTML ...
浏览器端-W3School-JavaScript-HTML DOM：HTML DOM Document 对象
ylbtech-浏览器端-W3School-JavaScript-HTML DOM:HTML DOM Document 对象 1.返回顶部 1. HTML DOM Document 对象 Docume ...
HTML DOM Document对象元素对象属性对象事件对象
DOM Document对象 DOM 元素对象 DOM 属性对象 DOM 事件菜鸟教程上总结挺全的,就不多废话,链接点进去即可.. 后期对经常用到的会在此更新一些总结..... 开学了...自 ...
JavaScript -- 时光流逝（十三）：DOM -- Console 对象
JavaScript -- 知识点回顾篇(十三):DOM -- Console 对象 (1) assert() : 如果断言为 false,则在信息到控制台输出错误信息.(2) clear() : 清 ...
JavaScript -- 时光流逝（十二）：DOM -- Element 对象
JavaScript -- 知识点回顾篇(十二):DOM -- Element 对象 (1) element.accessKey: 设置或返回accesskey一个元素,使用 Alt + 指定快捷键 ...
javascript DOM document对象
document对象代表整个html文档用来访问页面所有元素最复杂的一个dom对象也是window对象的一个子对象. 对于dom编程中,一个html就会当成一个dom树dom会把所有的html元素 ...
JavaScript -- 时光流逝（九）：Window 对象、Navigator 对象
JavaScript -- 知识点回顾篇(九):Window 对象.Navigator 对象 1. Window 对象 1.1 Window 对象的属性 (1) closed: 返回窗口是否已被关闭. ...
JavaScript -- 时光流逝（四）：js中的 Math 对象的属性和方法
JavaScript -- 知识点回顾篇(四):js中的 Math 对象的属性和方法 1. Math 对象的属性 (1) E :返回算术常量 e,即自然对数的底数(约等于2.718). (2) LN2 ...
JavaScript -- 时光流逝（三）：js中的 String 对象的方法
JavaScript -- 知识点回顾篇(三):js中的 String 对象的方法 (1) anchor(): 创建 HTML 锚. <script type="text/javasc ...

随机推荐

Perl子程序引用和匿名子程序
子程序也有引用,也有匿名子程序.假设你已经具备了数组.hash的引用知识,所以这里简单介绍一下. $ref_sub = \&mysub; # 子程序引用,&符号必须不能少 &{ ...
Python with/as和contextlib上下文管理使用说明
with/as 使用open打开过文件的对with/as都已经非常熟悉,其实with/as是对try/finally的一种替代方案. 当某个对象支持一种称为"环境管理协议"的协议时 ...
翻译：window function(已提交到MariaDB官方手册)
本文为mariadb官方手册:window functions的译文. 原文:https://mariadb.com/kb/en/window-functions-overview/ 我提交到Mari ...
python - unittest 单元测试学习
单元测试单元测试是用来对一个模块.一个函数或者一个类进行正确性检验的测试工作比如对Python中的abs 的测试输入正数: 比如 1, 2, 3, 返回值不变输入负数: 比如 -1, -2, ...
数据库 'xxxx' 的事务日志已满。若要查明无法重用日志中的空间的原因
一.出现的背景: 在SQL server中执行SQL语句出现如下图: 二.出现的原因: 我到数据库的服务器看了一下硬盘空间发现此数据库所在的D盘空间几乎已经用尽.如图: 三.解决方法: 第一种方法:直 ...
UWP: 妙用自定义 Action 以简化并重用代码
相信每一位 App 开发者,在开发过程中,都会有一些代码被反复用到,比如:复制文本,打电话,发短信,发邮件,给应用添加评论等等.在项目之间复制这些代码段,实在不是一个好办法,所以大家可能会把这些代码放 ...
安装PyCharm
安装包下载本文以CentOS上PyCharm安装为例来介绍,安装包的下载地址:https://www.jetbrains.com/pycharm/download/ 官网提供了windows,mac ...
[算法总结] 13 道题搞定 BAT 面试——字符串
1. KMP 算法谈到字符串问题,不得不提的就是 KMP 算法,它是用来解决字符串查找的问题,可以在一个字符串(S)中查找一个子串(W)出现的位置.KMP 算法把字符匹配的时间复杂度缩小到 O(m+ ...
JAVA 多线程（4）
接着3说: 一.String常量池先回顾 java 的基本数据类型: 变量就是申请内存来存储值.也就是说,当创建变量的时候,需要在内存中申请空间. 内存管理系统根据变量的类型为变量分配存储空间,分配 ...
webpack+vue+vueRouter模块化构建完整项目实例详细步骤-入门篇
新建项目开始(确认已经安装node环境和npm包管理工具) 1.新建项目文件名为start_vuedemo 2.npm init -y 初始化项目,我的win7系统,工程在d盘的vue_test_p ...

JavaScript -- 时光流逝（十一）：DOM -- Document 对象

JavaScript -- 时光流逝（十一）：DOM -- Document 对象的更多相关文章

随机推荐

热门专题