一、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. This function or variable may be unsafe. Consider using scanf_s instead.

    去掉安全检查,开头加上即可: #define _CRT_SECURE_NO_WARNINGS 或者: 严重性代码 说明项目文件行禁止显示状态 错误C4996 'scanf': This functio ...

  2. 后缀数组da3模板

    在做poj2406的时候...按论文给的rmq模板会超内存...然后网上找了http://blog.csdn.net/libin56842/article/details/46310425这位大爷的d ...

  3. 新闻公布系统 (Asp.net 三层架构 )

    2012年度课程设计---新闻公布系统(小结)                                                                             ...

  4. 求职（2015南京站获得百度、美的集团、趋势科技、华为offer）

    版权所有所有:没有马缰绳chhuach(CSDN博客源).转载请注明出处. 禁止www.haogongju.net转载. 特此声明 一.开篇: 9月底,找工作接近尾声,笔者主要经历了2015年南京站百 ...

  5. ios获取本地音乐库音乐很详细 扫描IPHONE本地音乐文件，获得音乐名，歌手名代码示例

    //扫描本地音乐文件,返回艺术家列表 需要库MediaPlayer.framework -(NSArray*) findArtistList { NSMutableArray *artistList  ...

  6. html5 乒乓球(碰撞检测)

    演示地址 http://koking.8u.hanmandarin.com/html5/1.html 简单介绍 小球可以在方框内部自由运动 可以通过方向键控制黑色砖块上下左右移动去与小球发生碰撞 代码 ...

  7. C#编程打字指法练习

    很惊讶昨晚写的第一篇学习笔记竟然有个评论了,只是今天还是对基础知识提不起精神,还是先看那三本书了解一下程序开发的大概流程吧. 今天不知道怎么闲逛就找到了这个网站,说是专门用于编程练习的,用google ...

  8. UVA 1312 Cricket Field

    题意: 在w*h的坐标上给n个点, 然后求一个最大的矩形,使得这个矩形内(不包括边界)没有点,注意边界上是可以有点的. 分析: 把坐标离散化.通过两重循环求矩形的高,然后枚举,看是否能找到对应的矩形. ...

  9. iOS开发那些事儿（六）Git分之策略

    git 分支策略 将要介绍的这个模型不会比任何一套流程内容多,每个团队成员都必须遵守,这样便于管理软件开发过程. 既分散又集中 我们使用的,且与这个分支模型配合的非常好的库,他有一个“真正”的中央仓库 ...

  10. LVS客户端启动脚本

    在设置LVS客户端时,如果我们使用手工设置的话会比较麻烦.现在我们直接使用脚本来启动lvs-client就OK了,下面是一个简单的脚本. VIP地址:10.0.0.230,把文件放到/etc/init ...