DOM元素对象的属性和方法（1）
一、accessKey()
作用：获取元素焦点快捷键；设置快捷键后，使用Alt+快捷键，让元素快速获得焦点，
<!DOCTYPE html>
<html>
<head>
<title>element.accesskey</title>
<meta charset="utf-8">
</head>
<body>
<input type="text" id="text">
<script type="text/javascript">
var text=document.getElementById("text");
text.accessKey="z";
console.info("text元素的快捷键："+text.accessKey);
</script>
</body>
</html>
结果：
二、addEventListener()
作用:为元素添加事件句柄
<!DOCTYPE html>
<html>
<head>
<title>element.addEventListener</title>
<meta charset="utf-8">
</head>
<body>
<input type="text" id="text" value="默认文本">
<button id="show">未点击</button>
<script type="text/javascript">
var text=document.getElementById("text");
var button=document.getElementById("show");
button.addEventListener("click",function(){text.value="按钮点击后文本";this.innerHTML="点击过";},false);
</script>
</body>
</html>
结果：
三、appendChild()
作用：在元素尾部追加新元素
<!DOCTYPE html>
<html>
<head>
<title>element.appendChild()</title>
<meta charset="utf-8">
</head>
<body>
<ul id="ul">
<li>第一个元素</li>
<li>第二个元素</li>
</ul>
<button id="button">添加新的li元素</button>
<script type="text/javascript">
var ul=document.getElementById("ul");
var button=document.getElementById("button");
var newLi;
button.addEventListener("click",
function(){newLi=document.createElement("li");
newLi.innerHTML="新元素";
ul.appendChild(newLi);
});
</script>
</body>
</html>
结果：
四、attributes
作用：返回元素属性数组
<!DOCTYPE html>
<html>
<head>
<title>DOM元素对象——>attribute：返回元素属性数组</title>
<meta charset="utf-8">
</head>
<body>
<a title="标题" href="#" rel="提示" id="ID">链接</a>
<script type="text/javascript">
var id=document.getElementById("ID");
var idAtts=id.attributes;
console.log("Length="+idAtts.length);
for(var i=0;i<idAtts.length;i++){
console.log(idAtts[i]);
}
</script>
</body>
</html>
结果：
五、childNodes
作用:返回元素下子节点的数组，特别注意，属性不算节点
<!DOCTYPE html>
<html>
<head>
<title>childNodes</title>
<meta charset="utf-8">
</head>
<body>
<div id="box"><div class="one" id="two"></div>文本节点<!--注释节点--></div>
<script type="text/javascript">
var box = document.getElementById("box");
var child = box.childNodes;
var ele=0,comment=0,text=0,att=0;
console.log(child.length);
for(var i=0;i<child.length;i++){
if(child[i].nodeType==1){
ele++;
}
if(child[i].nodeType==2){
att++; }
if(child[i].nodeType==3){
text++;
}
if(child[i].nodeType==8){
comment++;
}
console.log(child[i].nodeName);
}
console.log("元素节点："+ele+",属性节点:"+att+",文本节点："+text+",注释节点："+comment);
</script>
</body>
</html>
结果：
六、className
作用：设置或返回元素class值
七、clientHeight
作用：返回在页面上返回内容的可视高度（不包括边框，边距或滚动条）
八、clientWidth
作用：返回在页面上返回内容的可视宽度（不包括边框，边距或滚动条）
九、cloneNode
作用：克隆节点并返回副本
<!DOCTYPE html>
<html>
<head>
<title>cloneNode</title>
<meta charset="utf-8">
<style type="text/css">
.one{
border:1px solid red;
}
.two{
color:blue;
}
</style>
</head>
<body>
<ul id="one">
<li class="one">文本节点0</li>
<li class="two">文本节点1</li>
</ul>
<ul id="two"> </ul>
<script>
var lis=document.getElementById("one").getElementsByTagName("li");
var two=document.getElementById("two");
var clone=lis[0].cloneNode(false);
two.appendChild(clone);
var clone1=lis[1].cloneNode(true);
two.appendChild(clone1);
</script>
</body>
</html>
结果：
十、compareDocumentPosition
作用：判断元素同参数对象的位置关系，返回关系值（num）
<!DOCTYPE html>
<html>
<head>
<title>cloneNode</title>
<meta charset="utf-8"> </head>
<body>
<ul id="one">
<li class="one" rel="提示">文本节点0</li>
<li class="two">文本节点1</li>
</ul>
<ul id="two"> </ul>
<script>
var newLi=document.createElement("li");
var one=document.getElementById("one");
var lis=one.getElementsByTagName("li");
var att=lis[0].attributes;
var two=document.getElementById("two");
console.log(lis[0].compareDocumentPosition(lis[1])+"，元素在参数元素之前");
console.log(lis[1].compareDocumentPosition(lis[0])+"，元素在参数对象之后");
console.log(lis[0].compareDocumentPosition(one)+"，元素在参数元素之后，且元素在参数元素的内部");
console.log(one.compareDocumentPosition(lis[0])+"，元素在参数元素之前，且参数元素在元素内部");
console.log(one.compareDocumentPosition(newLi)+",没有关系,且不在同一个文档");
console.log(att[0].compareDocumentPosition(att[1])+"，没有关系，但在同一个文档");
</script>
</body>
</html>
结果：
DOM元素对象的属性和方法（1）的更多相关文章
- DOM元素对象的属性和方法（2）
11.contentEditable 作用:设置或返回元素内容可否编辑布尔值,HTML5新增属性 <!DOCTYPE html> <html> <head> < ...
- HTML DOM对象的属性和方法
HTML DOM对象的属性和方法 HTML DOM 对象有几种类型: 1.Document 类型 在浏览器中,Document 对象表示整个 HTML 文档. 1.1属性 引用文档的子节点 docum ...
- HTML DOM对象的属性和方法介绍(原生JS方法)
HTML DOM对象的属性和方法介绍 DOM 是 Document Object Model(文档对象模型)的缩写. DOM(文档对象模型)是针对HTML和XML文档的一个API(应用程序编程接口), ...
- HTML中DOM对象的属性和方法的层级关系是怎样的？（目录即层次）
HTML中DOM对象的属性和方法的层级关系是怎样的?(目录即层次) 一.总结 一句话总结:目录就是测试题 1.document取得元素(get element)的方式有哪几种? 解答:四种,分别是id ...
- JavaScript中的window对象的属性和方法；JavaScript中如何选取文档元素
一.window对象的属性和方法 ①setTimeout()方法用来实现一个函数在指定毫秒之后运行,该方法返回一个值,这个值可以传递给clearTimeout()用于取消这个函数的执行. ②setIn ...
- HTML DOM 元素对象
HTML DOM 元素对象 HTML DOM 节点 在 HTML DOM (Document Object Model) 中, 每个东西都是 节点 : 文档本身就是一个文档对象 所有 HTML 元素都 ...
- jquery中dom元素的attr和prop方法的理解
一.背景 在编写使用高版本[ jQuery 1.6 开始新增了一个方法 prop()]的jquery插件进行编写js代码的时候,经常不知道dom元素的attr和prop方法到底有什么区别?各自有什么应 ...
- JQUERY选择和操作DOM元素（利用正则表达式的方法匹配字符串中的一部分）
JQUERY选择和操作DOM元素(利用正则表达式的方法匹配字符串中的一部分) 1.匹配属性的开头 $("[attributeName^='value']"); 2.匹配属性的结尾 ...
- JS中的RegExp对象常用属性和方法
JavaScript提供了一个RegExp对象来完成有关正则表达式的操作和功能,每一条正则表达式模式对应一个RegExp实例.有两种方式可以创建RegExp对象的实例. 使用RegExp的显式构造函数 ...
随机推荐
- WorkFlow4.0--入门到精通系列-专题索引
原文地址:http://www.cnblogs.com/hegezhou_hot/archive/2011/06/15/2081405.html 开篇 首先.非常感谢大家的支持和厚爱,才有了这个系列, ...
- 如何有效地配置基于Spring的应用系统
Spring为应用系统的开发提供了极大的方便,其IoC反向注入(或DI依赖注入)的概念也彻底地改变了旧的编程方式,让我们只需关注如何使用对象,而创建对象交给Spring去完成,即把使用对象和创建对象分 ...
- hdu 2157 How many ways_ 矩阵快速幂
题意:略 直接矩阵乘法就行了 #include <iostream> #include<cstdio> #include<cstring> using namesp ...
- linux修改系统时间date命令加clock -w
http://m.jb51.net/LINUXjishu/117784.html 修改linux系统时间的方法(date命令) 11-18 23:22:27作者:脚本之家 命令格式为: date -s ...
- hibernate 查询、二级缓存、连接池
hibernate 查询.二级缓存.连接池 查询: 1) 主键查询 Dept dept = (Dept) session.get(Dept.class, 12); Dept dept = (Dep ...
- JDK自带工具jps，jstat，jmap，jconsole使用
jps 与ps命令类似: ps -ef|grep java 用来显示本地的java进程,查看本地执行着几个java应用,并显示进程号. [root@SE43 ~]# jps //仅仅显示进程号 238 ...
- C# 整个网页保存成图片
using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...
- JavaScript 【跨浏览器XPath，做个兼容】
IE的Xpath 获取单一节点 var xmlDom = getXMLDOM(xmlStr);//调用之前写好的方法获得XMLDOM对象 // var node = xmlDom.selectSing ...
- ThInkPHP中的常量
除了常规变量的输出外,模板引擎还支持系统变量和系统常量.以及系统特殊变量的输出.它们的输出不需要事先赋值给某个模板变量.系统变量的输出必须以$Think.打头,并且仍然可以支持使用函数.常用的系统变量 ...
- JSP简介
论坛 博客 微论 问答 游戏厅 天涯客 读书 更多 手机 服务 登录 注册 聚焦 民生 文学 旅游 财经 汽车 IT数码 时尚 情感 娱乐 视频 更多 北京 上海 广东 更多 天涯部落> J ...