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 对象的更多相关文章

  1. JavaScript -- 时光流逝(二):js中数组的方法

    JavaScript -- 知识点回顾篇(二):js中数组的方法 1. 数组 (1)定义数组,数组赋值 <script type="text/javascript"> ...

  2. Jsoup代码解读之二-DOM相关对象

    Jsoup代码解读之二-DOM相关对象   之前在文章中说到,Jsoup使用了一套自己的DOM对象体系,和Java XML API互不兼容.这样做的好处是从XML的API里解脱出来,使得代码精炼了很多 ...

  3. 浏览器端-W3School-JavaScript-HTML DOM:HTML DOM Element 对象

    ylbtech-浏览器端-W3School-JavaScript-HTML DOM:HTML DOM Element 对象 1.返回顶部 1. HTML DOM Element 对象 HTML DOM ...

  4. JavaScript -- 时光流逝(十三):DOM -- Console 对象

    JavaScript -- 知识点回顾篇(十三):DOM -- Console 对象 (1) assert() : 如果断言为 false,则在信息到控制台输出错误信息.(2) clear() : 清 ...

  5. JavaScript -- 时光流逝(十一):DOM -- Document 对象

    JavaScript -- 知识点回顾篇(十一):DOM -- Document 对象 (1) document.activeElement: 返回文档中当前获得焦点的元素. <!doctype ...

  6. JavaScript -- 时光流逝(十):Screen 对象、History 对象、Location 对象

    JavaScript -- 知识点回顾篇(十):Screen 对象.History 对象.Location 对象 1. Screen 对象 1.1 Screen 对象的属性 (1) availHeig ...

  7. How Javascript works (Javascript工作原理) (十二) 网络层探秘及如何提高其性能和安全性

    个人总结:阅读完这篇文章需要20分钟,这篇文章主要讲解了现代浏览器在网络层传输所用到的一些技术, 应当对 window.performance.timing 这个API所有了解. 这是 JavaScr ...

  8. DOM - Element 对象

    http://www.runoob.com/dom/dom-element.html Element 对象 Element 对象代表 XML 文档中的一个元素.元素可以包含属性.其他元素或文本.如果一 ...

  9. THML DOM / Element 对象操作

    随着Vue等MVVM框架流行,操作DOM已经不想之前那么频繁,因此很多DOM的操作已经陌生,特此回顾HTML中DOM操作 获取Element节点 熟悉的有 通过ID获取,返回element对象    ...

随机推荐

  1. 【Go】深入剖析slice和array

    文章来源:https://blog.thinkeridea.com/201901/go/shen_ru_pou_xi_slice_he_array.html array 和 slice 看似相似,却有 ...

  2. shell高效处理文本(1):xargs并行处理

    xargs具有并行处理的能力,在处理大文件时,如果应用得当,将大幅提升效率. xargs详细内容(全网最详细):https://www.cnblogs.com/f-ck-need-u/p/592592 ...

  3. 翻译:赋值操作符(:=)(已提交到MariaDB官方手册)

    本文为mariadb官方手册:赋值操作符(:=)的译文. 原文:https://mariadb.com/kb/en/assignment-operator/ 我提交到MariaDB官方手册的译文:ht ...

  4. nginx实现动态/静态文件缓存(week4_day1_part2)-技术流ken

    nginx实现静态文件缓存实战 1.nginx静态文件缓存 如果要熟练使用nginx来实现文件的缓存,那下面的几个指令你必须要牢记于心 指令1:proxy_cache_path 作用:设置缓存数据的相 ...

  5. SpringBoot系列——花里胡哨的banner.txt

    前言 我们注意到springboot项目启动时,控制台会打印自带的banner,然后对于部分IT骚年来说,太单调太普通太一般了:所以,是时候表演真正的技术了 项目结构 我们只需要在springboot ...

  6. Android Studio 活动的生命周期

    Activity 类中定义了7个回调方法,覆盖了活动的活动周期的每一环节 onCreate()  活动第一次创建的时候调用 onStart() 这个活动由不可见变为可见的时候调用 onResume() ...

  7. linux内核里的字符串转换 ,链表操作常用函数(转)

    1.对双向链表的具体操作如下: list_add ———向链表添加一个条目 list_add_tail ———添加一个条目到链表尾部 __list_del_entry ———从链表中删除相应的条目 l ...

  8. kafka消费者启动报错

    报错信息: WARN Fetching topic metadata with correlation id 14 for topics [Set(test)] from broker [Broker ...

  9. #WEB安全基础 : HTML/CSS | 0x3文件夹管理网站

    没有头脑的管理方式会酿成大灾难,应该使用文件夹管理网站 这是一个典型的管理方法,现在传授给你,听好了 下面是0x3初识a标签里使用的网站的目录,我把它重新配置了一下

  10. 利用SurfaceView显示正弦曲线,仿造示波器

    众所周知,view是通过刷新来重绘视图的,Android系统通过发出VSYNC信号来进行屏幕重绘,刷新的时间间隔为16ms,如果在16ms内view完成你所需要的所有操作,那么用户在视觉上就不会产生卡 ...