JavaScript -- 时光流逝（十二）：DOM -- Element 对象

JavaScript -- 知识点回顾篇（十二）：DOM -- Element 对象

(1) element.accessKey: 设置或返回accesskey一个元素,使用 Alt + 指定快捷键为元素赋予焦点

<!doctype html>

<html>

<head>

<meta charset="UTF-8">

<script type="text/javascript">

    function my_accesskey(){

      document.getElementById('a1').accessKey="B"; //按ALt+B，id是a1的元素获得焦点

      document.getElementById('a2').accessKey="H"; //按ALt+H，id是a1的元素获得焦点

    }

</script>

</head>

<body>

    <a id="a1" href="https://www.baidu.com/">百度</a><br/>

    <a id="a2" href="https://www.hao123.com/">Hao123</a><br/>

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

</body>

</html>

(2) element.addEventListener(): 向指定元素添加事件句柄

<!doctype html>

<html>

<head>

<meta charset="UTF-8">

</head>

<body>

    <input type="button" id='myBtn' value="点我" />

    <div id='myInfo'></div>

    <script type="text/javascript">

        document.getElementById("myBtn").addEventListener("click", function(){

            document.getElementById("myInfo").innerHTML = "Hello World";

        });

    </script>

</body>

</html>

(3) element.appendChild(): 为元素添加一个新的子元素

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title></title>

    <meta charset="utf-8" />

    <script type="text/javascript">

        function my_appendChild() {

            var node = document.createElement("LI");

            var textnode = document.createTextNode("CCC");

            node.appendChild(textnode);

            document.getElementById("myList").appendChild(node);

        }

    </script>

    </head>

<body>

    <ul id="myList"><li>AAA</li><li>BBB</li></ul>

    <input type="button" value="按钮" onclick="my_appendChild()" />

</body>

</html>

(4) element.attributes: 返回一个元素的属性数组

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title></title>

    <meta charset="utf-8" />

    <script type="text/javascript">

        function my_attributes() {

            var btn = document.getElementsByTagName("BUTTON")[0];

            document.getElementById("myInfo").innerHTML = btn.attributes.length;

        }

    </script>

    </head>

<body>

    <button id="btn1" onclick="my_attributes()">点我</button>

    <div id="myInfo"></div>

</body>

</html>

(5) element.childNodes: 返回元素的一个子节点的数组

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title></title>

    <meta charset="utf-8" />

    <script type="text/javascript">

        function my_achildNodes() {

            var txt = "";

            var c = document.body.childNodes;

            for (i = 0; i < c.length; i++) {

                txt = txt + c[i].nodeName + "<br/>";

            };

            document.getElementById("myInfo").innerHTML = txt;

        }

    </script>

    </head>

<body>

    <button id="btn1" onclick="my_achildNodes()">点我</button>

    <div id="myInfo"></div>

</body>

</html>

(6) element.children: 返回元素的子元素的集合

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title></title>

    <meta charset="utf-8" />

    <script type="text/javascript">

        function my_children() {

            var c = document.body.children;

            var txt = "";

            var i;

            for (i = 0; i < c.length; i++) {

                txt = txt + c[i].tagName + "<br/>";

            }

            document.getElementById("myInfo").innerHTML = txt;

        }

    </script>

    </head>

<body>

    <button id="btn1" onclick="my_children()">点我</button>

    <div id="myInfo"></div>

</body>

</html>

(7) element.classList: 返回元素的类名。
element.className: 设置或返回元素的class属性

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title>myTest</title>

    <style>

        .mystyle {

            background-color: red;

        }

    </style>

    <meta charset="utf-8" />

    <script type="text/javascript">

        function my_classList() {

            document.getElementById("div1").classList.add("mystyle");

            document.getElementById("myInfo").innerHTML = document.getElementById('div1').className;

        }

    </script>

    </head>

<body>

    <button id="btn1" onclick="my_classList()">点我</button>

    <div id="div1">Hello</div>

    <div id="myInfo"></div>

</body>

</html>

(8) element.cloneNode(): 克隆某个元素

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title>myTest</title>

    <style>

        .mystyle {

            background-color: red;

        }

    </style>

    <meta charset="utf-8" />

    <script type="text/javascript">

        function my_cloneNode() {

            var itm = document.getElementById("myList2").lastChild;

            var cln = itm.cloneNode(true);

            document.getElementById("myList1").appendChild(cln);

        }

    </script>

    </head>

<body>

    <ul id="myList1"><li>AAA</li><li>BBB</li></ul>

    <ul id="myList2"><li>CCC</li><li>DDD</li></ul>

    <button id="btn1" onclick="my_cloneNode()">点我</button>

</body>

</html>

(9) element.compareDocumentPosition(): 比较两个元素的文档位置。返回值可能是：

　　　　1：没有关系，这两个节点不属于同一个文档。

　　　　2：第一节点（P1）位于第二个节点后（P2）。

　　　　4：第一节点（P1）定位在第二节点（P2）前。

　　　　8：第一节点（P1）位于第二节点内（P2）。

　　　　16：第二节点（P2）位于第一节点内（P1）。

　　　 32:没有关系的，或是两个节点在同一元素的两个属性。
element.contentEditable: 设置或返回元素的内容是否可编辑。

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title>myTest</title>

    <style>

        .mystyle {

            background-color: red;

        }

    </style>

    <meta charset="utf-8" />

    <script type="text/javascript">

        function my_compareDocumentPosition() {

            var p1 = document.getElementById("p1").lastChild;

            var p2 = document.getElementById("p2").lastChild;

            document.getElementById("myInfo").innerHTML = p1.compareDocumentPosition(p2) + '<br/>';

            document.getElementById("myInfo").innerHTML += p2.compareDocumentPosition(p1) + '<br/>';

        }

        function my_contentEditable() {

            document.getElementById("p1").contentEditable = true;

        }

    </script>

    </head>

<body>

    <p id="p1">122</p>

    <p id="p2">133</p>

    <button id="btn1" onclick="my_compareDocumentPosition()">按钮1</button>

    <button id="btn2" onclick="my_contentEditable()">按钮2</button>

    <div id="myInfo"></div>

</body>

</html>

(10) element.dir: 设置或返回一个元素中的文本方向
　　 element.firstChild: 返回元素的第一个子节点
　　 element.getAttribute(): 返回指定元素的属性值
　　 element.getAttributeNode(): 返回指定属性节点

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title>myTest</title>

    <meta charset="utf-8" />

    <script type="text/javascript">

        function my_Test() {

            document.getElementById("myInfo").innerHTML = document.getElementById('p1').dir + '<br/>';

            document.getElementById("myInfo").innerHTML += document.getElementById('p2').dir + '<br/>';

            document.getElementById("myInfo").innerHTML += document.firstChild.nodeName + '<br/>';

            document.getElementById("myInfo").innerHTML += document.getElementById('p1').getAttribute("dir")+ '<br/>';

            document.getElementById("myInfo").innerHTML += document.getElementById('p2').getAttributeNode("dir").value + '<br/>';

        }

    </script>

    </head>

<body>

    <p id="p1" dir="rtl">Hello A</p>

    <p id="p2" dir="ltr">Hello B</p>

    <button id="btn1" onclick="my_Test()">按钮</button>

    <div id="myInfo"></div>

</body>

</html>

(11) element.hasAttribute(): 如果元素中存在指定的属性返回 true，否则返回false。
　　 element.hasAttributes(): 如果元素有任何属性返回true，否则返回false。
　　element.hasChildNodes(): 返回一个元素是否具有任何子元素
　　element.hasFocus(): 返回布尔值，检测文档或元素是否获取焦点

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title>myTest</title>

    <meta charset="utf-8" />

    <script type="text/javascript">

        function my_Test() {

            document.getElementById("myInfo").innerHTML = document.getElementById('btn1').hasAttribute("onclick") + '<br/>';

            document.getElementById("myInfo").innerHTML += document.getElementById('btn1').hasAttributes() + '<br/>';

            document.getElementById("myInfo").innerHTML += document.getElementById('p1').hasChildNodes() + '<br/>';

            document.getElementById("myInfo").innerHTML += document.hasFocus() + '<br/>';

        }

    </script>

    </head>

<body>

    <p id="p1"></p>

    <button id="btn1" onclick="my_Test()">按钮</button>

    <div id="myInfo"></div>

</body>

</html>

(12) element.insertBefore(): 现有的子元素之前插入一个新的子元素

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title>myTest</title>

    <meta charset="utf-8" />

    <script type="text/javascript">

        function my_Test(){

            var newItem=document.createElement("LI");

            var textnode=document.createTextNode("XXX");

            newItem.appendChild(textnode);

            var list=document.getElementById("myList")

            list.insertBefore(newItem,list.childNodes[0]);

        }

    </script>

    </head>

<body>

    <ul id="myList"><li>AAA</li><li>BBB</li></ul>

    <button id="btn1" onclick="my_Test()">按钮</button>

</body>

</html>

(13) element.isEqualNode(): 检查两个元素是否相等
　 element.isSameNode(): 检查两个元素所有有相同节点。

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title>myTest</title>

    <meta charset="utf-8" />

    <script type="text/javascript">

        function my_isEqualNode(){

            var item1=document.getElementById("myList1").firstChild;

            var item2=document.getElementById("myList2").firstChild;

            document.getElementById("myInfo").innerHTML=item1.isEqualNode(item2);

        }

        function my_isSameNode(){

            var item3=document.getElementById("myList1");

            var item4=document.getElementsByTagName("UL")[0];

            document.getElementById("myInfo").innerHTML=item3.isSameNode(item4);

        }

    </script>

    </head>

<body>

    <ul id="myList1"><li>AAA</li><li>BBB</li></ul>

    <ul id="myList2"><li>AAA</li><li>CCC</li></ul>

    <button id="btn1" onclick="my_isEqualNode()">按钮1</button>

    <button id="btn2" onclick="my_isSameNode()">按钮2</button>

    <div id='myInfo'></div>

</body>

</html>

(14) element.isContentEditable: 如果元素内容可编辑返回 true，否则返回false
　　element.isDefaultNamespace(): 如果指定了namespaceURI 返回 true，否则返回 false。
　　element.isSupported(): 如果在元素中支持指定特征返回 true。
　　element.lang: 设置或者返回一个元素的语言。
　　element.lastChild: 返回的最后一个子元素
　　element.namespaceURI: 返回命名空间的 URI。
　　element.nextSibling: 返回该元素紧跟的一个节点
　　element.nextElementSibling: 返回指定元素之后的下一个兄弟元素（相同节点树层中的下一个元素节点）。
　　element.nodeName: 返回元素的标记名（大写）
　　element.nodeType: 返回元素的节点类型
　　element.nodeValue: 返回元素的节点值
　　element.ownerDocument: 返回元素的根元素（文档对象）
　　element.parentNode: 返回元素的父节点
　　element.previousSibling: 返回某个元素紧接之前元素
　　element.previousElementSibling: 返回指定元素的前一个兄弟元素（相同节点树层中的前一个元素节点）。
　　element.tagName: 作为一个字符串返回某个元素的标记名（大写）

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<title>myTest</title>

<meta charset="utf-8" />

</head>

<body id="b1" lang="en-us">

    <ul id="myList1"><li id="item1">AAA</li><li id="item2">BBB</li><li>CCC</li></ul>

    <p id="p1" contenteditable="true">Hello</p>

    <button id="btn1" onclick="my_Test()">按钮</button>

    <div id='myInfo'></div>

    <script type="text/javascript">

        function my_Test(){

            document.getElementById("myInfo").innerHTML="isContentEditable:  "+document.getElementById("p1").isContentEditable;

            document.getElementById("myInfo").innerHTML+="<br/>isDefaultNamespace:  "+document.documentElement.isDefaultNamespace("http://www.w3.org/1999/xhtml");

            document.getElementById("myInfo").innerHTML+="<br/>isSupported:  "+document.getElementById("btn1").isSupported("Core","2.0");

            document.getElementById("myInfo").innerHTML+="<br/>lang:  "+document.getElementById("b1").lang;

            document.getElementById("myInfo").innerHTML+="<br/>lastChild:  "+document.getElementById("myList1").lastChild.nodeName;

            document.getElementById("myInfo").innerHTML+="<br/>namespaceURI:  "+document.documentElement.namespaceURI;

            document.getElementById("myInfo").innerHTML+="<br/>nextSibling:  "+document.getElementById("item1").nextSibling.id;

            document.getElementById("myInfo").innerHTML+="<br/>nextElementSibling:  "+document.getElementById("item1").nextElementSibling.innerHTML;

            document.getElementById("myInfo").innerHTML+="<br/>nodeName:  "+document.body.nodeName;

            document.getElementById("myInfo").innerHTML+="<br/>nodeType:  "+document.body.nodeType;

            document.getElementById("myInfo").innerHTML+="<br/>nodeValue:  "+document.getElementsByTagName("UL")[0].childNodes[0].nodeValue;

            document.getElementById("myInfo").innerHTML+="<br/>ownerDocument:  "+document.getElementById("myInfo").ownerDocument.nodeType;

            document.getElementById("myInfo").innerHTML+="<br/>parentNode:  "+document.getElementById("item1").parentNode.nodeName;

            document.getElementById("myInfo").innerHTML+="<br/>previousSibling:  "+document.getElementById("item2").previousSibling.id;

            document.getElementById("myInfo").innerHTML+="<br/>previousElementSibling:  "+document.getElementById("item2").previousElementSibling.innerHTML;

            document.getElementById("myInfo").innerHTML+="<br/>tagName:  "+document.getElementById("myInfo").tagName;

        }

    </script>

</body>

</html>

(15) element.removeAttribute(): 从元素中删除指定的属性
element.removeAttributeNode(): 删除指定属性节点并返回移除后的节点。

　　element.setAttribute(): 设置或者改变指定属性并指定值。
　　element.setAttributeNode(): 设置或者改变指定属性节点。

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<title>myTest</title>

<meta charset="utf-8" />

<style type="text/css">

    .myclass{

        color:blue;

    }

</style>

</head>

<body id="b1" lang="en-us">

    <p id="p1" style="color:red">Hello 1</p>

    <p id="p2" style="color:red">Hello 2</p>

    <button id="btn1" onclick="my_Test()">按钮1</button>

    <button id="btn2" onclick="my_Test2()">按钮2</button>

    <script type="text/javascript">

        function my_Test(){

            var p1=document.getElementsByTagName("p")[0];

            var a1=p1.getAttributeNode("style");

            p1.removeAttributeNode(a1);    

            var p2=document.getElementsByTagName("p")[1];

            var a2=p2.getAttributeNode("style");

            p2.removeAttributeNode(a2);

        }

        function my_Test2(){

            document.getElementsByTagName("p")[0].setAttribute("style","color:blue");

            var atr=document.createAttribute("class");

            atr.nodeValue="myclass";

            var h=document.getElementsByTagName("p")[1];

            h.setAttributeNode(atr);

        }

    </script>

</body>

</html>

(16) element.removeChild(): 删除一个子元素
　　element.replaceChild(): 替换一个子元素

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<title>myTest</title>

<meta charset="utf-8" />

</head>

<body id="b1" lang="en-us">

    <ul id="myList"><li>AAA</li><li>BBB</li><li>CCC</li></ul>

    <button id="btn1" onclick="my_Test()">按钮</button>

    <button id="btn2" onclick="my_Test2()">按钮2</button>

    <script type="text/javascript">

        function my_Test(){

            var list=document.getElementById("myList");

            list.removeChild(list.childNodes[0]);

        }

        function my_Test2(){

            var textnode=document.createTextNode("DDD");

            var item=document.getElementById("myList").childNodes[0];

            item.replaceChild(textnode,item.childNodes[0]);

        }

    </script>

</body>

</html>

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

JavaScript -- 时光流逝（二）：js中数组的方法
JavaScript -- 知识点回顾篇(二):js中数组的方法 1. 数组 (1)定义数组,数组赋值 <script type="text/javascript"> ...
Jsoup代码解读之二-DOM相关对象
Jsoup代码解读之二-DOM相关对象之前在文章中说到,Jsoup使用了一套自己的DOM对象体系,和Java XML API互不兼容.这样做的好处是从XML的API里解脱出来,使得代码精炼了很多 ...
浏览器端-W3School-JavaScript-HTML DOM：HTML DOM Element 对象
ylbtech-浏览器端-W3School-JavaScript-HTML DOM:HTML DOM Element 对象 1.返回顶部 1. HTML DOM Element 对象 HTML DOM ...
JavaScript -- 时光流逝（十三）：DOM -- Console 对象
JavaScript -- 知识点回顾篇(十三):DOM -- Console 对象 (1) assert() : 如果断言为 false,则在信息到控制台输出错误信息.(2) clear() : 清 ...
JavaScript -- 时光流逝（十一）：DOM -- Document 对象
JavaScript -- 知识点回顾篇(十一):DOM -- Document 对象 (1) document.activeElement: 返回文档中当前获得焦点的元素. <!doctype ...
JavaScript -- 时光流逝（十）：Screen 对象、History 对象、Location 对象
JavaScript -- 知识点回顾篇(十):Screen 对象.History 对象.Location 对象 1. Screen 对象 1.1 Screen 对象的属性 (1) availHeig ...
How Javascript works (Javascript工作原理) (十二) 网络层探秘及如何提高其性能和安全性
个人总结:阅读完这篇文章需要20分钟,这篇文章主要讲解了现代浏览器在网络层传输所用到的一些技术, 应当对 window.performance.timing 这个API所有了解. 这是 JavaScr ...
DOM - Element 对象
http://www.runoob.com/dom/dom-element.html Element 对象 Element 对象代表 XML 文档中的一个元素.元素可以包含属性.其他元素或文本.如果一 ...
THML DOM / Element 对象操作
随着Vue等MVVM框架流行,操作DOM已经不想之前那么频繁,因此很多DOM的操作已经陌生,特此回顾HTML中DOM操作获取Element节点熟悉的有通过ID获取,返回element对象 ...

随机推荐

自建Socket转发，使用远程桌面（mstsc）连接家中电脑
网络结构图如下: 开题先放图,一切全靠编哈哈. 进入正题! 如图所示,我们需要一个公网服务器,利用公网服务器将内网的数据进行转发,从而实现两个内网服务器的通讯.没错,这不是p2p,原本想做成p2p,因 ...
win10 uwp 商业游戏 1.2.1
上一个游戏已经告诉大家如何写多个游戏,现在继续写这个无聊的游戏希望大家在看这篇文章之前先看win10 uwp 商业游戏,在这个文章告诉了大家如何创建游戏. 修改数值可以从上一篇的博客的游戏看到升级 ...
petapoco 实体中字段去掉关联（类似于EF中的NotMap）
怎么才能让不是数据库表中的字段放在实体中而不影响正常的插入和更新呢? 找到 PetaPoco.cs 文件,打开之后,搜索插入方法(Insert),然后继续找到下一层方法就能看到如下代码: 看到这个注 ...
Java岗面试考点精讲（网络篇03期）
1. OSI七层模型总结一下: 应用用层按协议打包数据由传输层加上双方的端口号由网络层加上双方的IP地址由链路层加上双方的MAC地址,并将数据拆分成数据帧数模信号转换并由物理层传输到另一端 ...
Eureka开启登录认证
Eureka服务端配置一.Eureka的pom.xml 引入spring-boot-starter-security坐标 <dependency> <groupId>org. ...
学习记录(一)之h5_canvas
canvas(画布) canvas(画布): 利用JS在网页中绘制图像. 标签:<canvas></canvas> 属性:height,width(宽高属性要写在行内样式中); ...
javascript中数组的常用算法深入分析
Array数组是Javascript构成的一个重要的部分,它可以用来存储字符串.对象.函数.Number,它是非常强大的.因此深入了解Array是前端必修的功课.本文将给大家详细介绍了javascri ...
谈谈 final finally finalize 区别
声明本篇所涉及的提问,正文的知识点,全都来自于杨晓峰的<Java核心技术36讲>,当然,我并不会全文照搬过来,毕竟这是付费的课程,应该会涉及到侵权之类的问题. 所以,本篇正文中的知识点, ...
K8S helm
Helm 致力于成为 Kubernetes 的包管理工具,可以方便地发现.共享和构建 Kubernetes 应用,它包含几个基本概念: Chart:一个 Helm 包,其中包含了运行一个应用所需要的镜 ...
loj#6031. 「雅礼集训 2017 Day1」字符串(SAM 广义SAM 数据分治)
题意链接 Sol \(10^5\)次询问每次询问\(10^5\)个区间..这种题第一感觉就是根号/数据分治的模型. \(K\)是个定值这个很关键. 考虑\(K\)比较小的情况,可以直接暴力建SAM, ...

JavaScript -- 时光流逝（十二）：DOM -- Element 对象

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

随机推荐

热门专题