一、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)的更多相关文章

  1. DOM元素对象的属性和方法(2)

    11.contentEditable 作用:设置或返回元素内容可否编辑布尔值,HTML5新增属性 <!DOCTYPE html> <html> <head> < ...

  2. HTML DOM对象的属性和方法

    HTML DOM对象的属性和方法 HTML DOM 对象有几种类型: 1.Document 类型 在浏览器中,Document 对象表示整个 HTML 文档. 1.1属性 引用文档的子节点 docum ...

  3. HTML DOM对象的属性和方法介绍(原生JS方法)

    HTML DOM对象的属性和方法介绍 DOM 是 Document Object Model(文档对象模型)的缩写. DOM(文档对象模型)是针对HTML和XML文档的一个API(应用程序编程接口), ...

  4. HTML中DOM对象的属性和方法的层级关系是怎样的?(目录即层次)

    HTML中DOM对象的属性和方法的层级关系是怎样的?(目录即层次) 一.总结 一句话总结:目录就是测试题 1.document取得元素(get element)的方式有哪几种? 解答:四种,分别是id ...

  5. JavaScript中的window对象的属性和方法;JavaScript中如何选取文档元素

    一.window对象的属性和方法 ①setTimeout()方法用来实现一个函数在指定毫秒之后运行,该方法返回一个值,这个值可以传递给clearTimeout()用于取消这个函数的执行. ②setIn ...

  6. HTML DOM 元素对象

    HTML DOM 元素对象 HTML DOM 节点 在 HTML DOM (Document Object Model) 中, 每个东西都是 节点 : 文档本身就是一个文档对象 所有 HTML 元素都 ...

  7. jquery中dom元素的attr和prop方法的理解

    一.背景 在编写使用高版本[ jQuery 1.6 开始新增了一个方法 prop()]的jquery插件进行编写js代码的时候,经常不知道dom元素的attr和prop方法到底有什么区别?各自有什么应 ...

  8. JQUERY选择和操作DOM元素(利用正则表达式的方法匹配字符串中的一部分)

    JQUERY选择和操作DOM元素(利用正则表达式的方法匹配字符串中的一部分) 1.匹配属性的开头 $("[attributeName^='value']"); 2.匹配属性的结尾 ...

  9. JS中的RegExp对象常用属性和方法

    JavaScript提供了一个RegExp对象来完成有关正则表达式的操作和功能,每一条正则表达式模式对应一个RegExp实例.有两种方式可以创建RegExp对象的实例. 使用RegExp的显式构造函数 ...

随机推荐

  1. win7远程工具mstsc.exe

    相信很多人都用过类似QQ远程这样的远程工具,其实自xp开始windows就自带了远程工具mstsc.exe. 我只是介绍了如何使用远程工具登入别人的电脑. 首先,在开始->运行->msts ...

  2. today reading notes

    paminit manager from upstart to systemd/systemctl;Vivid Vervet  + openStack kilo;为容器开发者(OpenStack工作环 ...

  3. 如何使用TestFlight进行App构建版本测试(转)

    在日常的开发当中,当一个项目在开发过程中或者完成准备上线,都需要我们进行真机测试,否则不可能开发完了就直接扔到了App,等上线了再下载看看,这都是不可能的.那么说到真机测试,大家肯定会想到弄一个99美 ...

  4. OAuth2.0授权机制说明

    授权机制说明   1 简介 优酷对第三方应用用户授权采用OAuth2.0标准 2 OAuth2.0 授权方式 优酷支持OAuth 2.0的三种授权方式,请根据平台选用不同的授权方式: 2.1 通用授权 ...

  5. 微信内移动前端开发抓包调试工具fiddler使用教程

    在朋友圈看到一款疯转的H5小游戏,想要copy,什么?只能在微信里打开?小样,图样图森破,限制了oauth.微信浏览器内打开,照样能看你源码~ 使用fiddler来抓包 需要先做一些简单的准备工作: ...

  6. About Health Monitor Checks

    About Health Monitor Checks Health Monitor checks (also known as checkers, health checks, or checks) ...

  7. 关于Console的Main(String[] args)参数输入

    之前接触一个往Console里输入参数的项目,资深QA教我怎么run,灰常脸红. 今日无事,baidu之. Step1 写简单Console Code. class Program { static ...

  8. UVA 1343 The Rotation Game

    题意: 给出图,往A-H方向旋转,使中间8个格子数字相同.要求旋转次数最少,操作序列字典序尽量小. 分析: 用一维数组存24个方格.二维数组代表每个方向对应的7个方格.IDA*剪枝是当8-8个方格中重 ...

  9. IQueryable与IEnumberable的区别(转)

    转自 http://www.cnblogs.com/fly_dragon/archive/2011/02/21/1959933.html IEnumerable接口 公开枚举器,该枚举器支持在指定类型 ...

  10. 安卓模拟器创建和使用SD卡的方法

    安卓模拟器创建和使用SD卡的方法: 创建一个SD卡镜像文件 打开cmd,进入Android SDK安装路径下的tools目录下,输入如下命令:mksdcard 1024M sdcard.img 该命令 ...