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 ...

随机推荐

[Linux] deepin安装node
安装git sudo apt-get install git git安装安装node和npm 先下载node node下载下载完之后将node解压的desktop,然后将文件夹更改为node 之后 ...
JavaScript Date 对象的异常现象-new Date('0001-01-01 00:00:00')
Date 对象 Date 对象用于处理日期和时间. new Date() :Date 对象会自动把当前日期和时间保存为其初始值. 打开chrome的开发者工具,在Console敲下new Date() ...
C#集合。
集合命名空间: using system.collections. 非泛型集合 using system.collections.Generic. 泛型集合为什么要用集合: 1.数组一旦声明长度就 ...
java反射知识相关的文章
整理的反射相关的文章: (1).通俗理解反射(知乎):学习java应该如何理解反射? (2).关于反射比较深入的博文地址:深入解析Java反射(1) - 基础贴出我反射调用代码:(craw,dept ...
mybatis笔记02
目录 0. 文章目录 1. Mybatis映射文件 1.1 输入映射 1.2 输出映射 1.3 resultMap 2. 动态SQL 2.1 if和where 2.2 foreach循环 2.3 sq ...
JavaScript&Date对象
JavaScript Date对象 <script type="text/javascript"> var date = new Date(); document.wr ...
将Hexo博客部署到云主机
摘要: 在云主机上搭建一个git裸仓库,然后使用nginx作为网页服务器,就可以轻松将Hexo博客通过git部署到云主机上. 这是一个忧伤的故事我的博客KiwenLau之前部署在Coding Pag ...
angularjs-select2的使用
1.引入文件 '/select2.css', '/select2-bootstrap.css', '/select2.min.js', ‘/angular-select2.min.js’ 2.页面 3 ...
express 连接数据库
(1)创建项目 ,项目名cntMongodb express -e cntMongodbcd cntMonfodbnpm installnpm install mongoose --save //安装 ...
Html中的img标签加载失败
在Http请求时,有时会遇到img图片标签加载失败,不显示的情况: 解决方法,在重新给src属性赋值时,先将onerror事件清除掉,再赋值,这样就不会存在循环调用问题了,代码如下; <img ...

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

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

随机推荐

热门专题