<!DOCTYPE html>

    <html lang="zh-CN">

    <head>

        <meta charset="utf-8">

        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>

        <title></title>

    </head>

    <body lang="en-us">

    <p><span class="className">1</span><i>2</i></p>

    <div></div>

    </body>

    <script>

    /*-----------------------------------属性-----------------------------------*/

    //childNodes -当前节点的全部子级节点（有的浏览器里会把元素里的空白节点转换成文本节点 nodeType==3）

    var nodes=document.getElementsByTagName('p')[0].childNodes;

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

        /*

        * <span>1</span>

        * <i>2</i>

        * */

        console.info(nodes[i]);

    }

    var childNodes=document.getElementsByTagName('p')[0];

    //firstChild -childNodes里的第一个节点 相当于childNodes[0]  *所有主流浏览器都支持 firstChild 属性。

    //lastChild -childNodes里的最后一个节点 相当于childNodes[childNodes.length-1]

    /*

    * <span>1</span>

    * <i>2</i>

    * */

    console.info(childNodes.firstChild);

    console.info(childNodes.lastChild);

    //parentNode -父节点 如果指定节点没有父节点，则返回 null。

    /*

    *<p></p>

    * */

    console.info(childNodes.lastChild.parentNode);

    //nextSibling previousSibling -兄弟节点 如果没有 nextSibling previousSibling节点，则返回值为 null

    /*

    *<span>1</span>

    *<i>2</i>

    * */

    console.info(childNodes.lastChild.previousSibling);

    console.info(childNodes.firstChild.nextSibling);

    //nodeValue -返回元素节点里的值 注意：文本始终位于文本节点中

    /*

    *1

    * */

    console.info(childNodes.firstChild.childNodes[0].nodeValue);

    //nodeName -返回元素节点名称时，并不包含html里的<>符号

    /*

    * #text

    * SPAN

    * */

    console.info(childNodes.firstChild.childNodes[0].nodeName);

    console.info(childNodes.firstChild.nodeName);

    //tagName -返回元素的标签名

    /*

     *undefined

     * SPAN

     * */

    console.info(childNodes.firstChild.childNodes[0].tagName);

    console.info(childNodes.firstChild.tagName);

    //className -属性设置或返回元素的 class 属性

    /*

    *className

    * */

    console.info(childNodes.firstChild.className);

    // id -设置或返回元素的 id

    childNodes.firstChild.id='hello';

    console.info(childNodes.firstChild.id);

    //innerHTML -设置或返回元素的 inner HTML

    //lang -设置或返回元素的语言代码

    console.info(document.getElementsByTagName('body')[0].lang);

    //title -设置或返回元素的标题

    //textContent -返回所有子及后代节点的文本

    console.info(document.getElementsByTagName('body')[0].textContent);

    //ownerDocument -以 Document 对象的形式返回节点的 owner document

    console.info(document.getElementsByTagName('body')[0].ownerDocument);

    /*-----------------------------------方法-----------------------------------*/

    //appendChild() -向节点添加最后一个子节点  也可以使用 appendChild() 方法从一个元素向另一个元素中移动元素

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

    var textNode=document.createTextNode('world!');

    var newElementNode=document.createElement('b');

    newElementNode.appendChild(textNode);//添加元素

    p.appendChild(newElementNode);//添加元素

    var div=document.getElementsByTagName('div')[0];

    div.appendChild(p);//移动元素

    //cloneNode -克隆元素 创建节点的拷贝，并返回该副本

    var cloneNode=div.cloneNode(true);//克隆所有后代,参数设置为true

    document.getElementsByTagName('body')[0].appendChild(cloneNode);

    //insertBefore -在指定的已有子节点之前插入新的子节点

    var listNode=document.createElement('ul');

    var liNode=document.createElement('li');

    listNode.appendChild(liNode);

    var body=document.getElementsByTagName('body')[0];

    body.appendChild(listNode);

    var textNode=document.createTextNode('haha!');

    body.insertBefore(textNode,listNode);

    //removeChild -从元素中移除子节点 返回值是对删除节点的引用

    /*

    * "haha"

    * */

    var delNode=textNode.parentNode.removeChild(textNode);

    console.info(delNode);

    //replaceChild -用新节点替换某个子节点

    var newNode=document.createTextNode('hehe!');

    var oldNode=document.getElementsByTagName('p')[0].childNodes[0];

    oldNode.parentNode.replaceChild(newNode,oldNode);

    //setAttribute getAttribute -设置和返回指定属性名的属性值

    var div2=document.getElementsByTagName('div')[0];

    div2.setAttribute('data-id','71121');

    console.info(div2.getAttribute('data-id'));//71121

    //normalize -移除空的文本节点，并连接相邻的文本节点

    function addTextNode(){

        var text=document.createTextNode('文本节点内容');

        div2.appendChild(text);

    }

    addTextNode();

    addTextNode();

    console.info(div2.childNodes.length);

    div2.normalize();

    console.info(div2.childNodes.length);

原生js操作dom备忘的更多相关文章

  1. 框架操作DOM和原生js操作DOM比较

    问题引出 对于Angular和React操作DOM的速度,和原生js操作DOM的速度进行了一个比较: 一个同学做的demo 代码如下: <!DOCTYPE html> <html n ...

  2. 原生js操作Dom节点:CRUD

    知识点,依然会遗忘.我在思考到底是什么原因.想到研究生考试准备的那段岁月,想到知识体系的建立,知识体系分为正向知识体系和逆向知识体系:正向知识体系可以理解为教科书目录,逆向知识体系可以理解考试真题. ...

  3. 原生js操作DOM基础-笔记

    原文参考http://mp.weixin.qq.com/s?__biz=MzU3MDA0NTMzMA==&mid=2247485490&idx=1&sn=15197b4b53e ...

  4. 原生js操作dom的方法

    今天学习了原生js的dom节点的操作,就记录下来,仅供自己以后参考. 1)创建节点:除了可以使用createElement创建元素,也可以使用createTextNode创建文本节点. documen ...

  5. 原生Js操作DOM

    查找DOM .querySelectorAll(),它接受包含一个CSS选择器的字符串参数,返回一个表示文档中匹配选择器的所有元素的NodeList元素. .querySelector(),返回第一个 ...

  6. 原生js 操作dom

    1.一些常用的方法 obj.getElementById() 返回带有指定 ID 的元素. obj.getElementsByTagName() 返回包含带有指定标签名称的所有元素的节点列表(集合/节 ...

  7. 原生js操作Dom命令总结

    常用的dom方法 document.getElementById(“box”);//通过id获取标签    document.getElementsByTagName(“div”);根据标签名获取页面 ...

  8. js 操作COOKE备忘

    function getCookie(c_name) { if (document.cookie.length > 0) { c_start = document.cookie.indexOf( ...

  9. 使用原生 JavaScript 操作 DOM

    原文:https://www.sitepoint.com/dom-manipulation-vanilla-javascript-no-jquery/ 微软官方放弃了 IE10-,所以现在可以放心使用 ...

随机推荐

  1. Redis 64 steps

    a memo for redis 64 operations start server in console: 1. D:\>cd redis64 2. D:\redis64>redis- ...

  2. 将页面打印成excel

    在servlet中调用 try { File fileWrite = new File("D:/Write.xls"); fileWrite.createNewFile(); Ou ...

  3. Laravel项目目录结构说明

    Laravel项目目录结构说明: |- vendor 目录包含你的 Composer 依赖模块及laravel框架. |- bootstrap 目录包含几个框架启动跟自动加载配置的文件. |- app ...

  4. mybatis实战教程(mybatis in action)之三：实现数据的增删改查

    前面已经讲到用接口的方式编程.这种方式,要注意的一个地方就是.在User.xml  的配置文件中,mapper namespace="com.yihaomen.mybatis.inter.I ...

  5. CSS3 pointer-events属性

    在某个项目中,很多元素需要定位在一个地图层上面,这里就要用到很多绝对定位或者相对定位的元素,但是这样的话,这些浮在上面的div或者其它元素一般都会给个宽高,或者relative的元素可以不给宽高,这个 ...

  6. WeX5 - AJAX跨域调用相关知识-CORS和JSONP

    http://docs.wex5.com/ajax-cross-domain/ 1.什么是跨域 跨域问题产生的原因,是由于浏览器的安全机制,JS只能访问与所在页面同一个域(相同协议.域名.端口)的内容 ...

  7. [zz] 海洋环境的光能传递

    source: http://cgangs.com/article/2557?source=weibo 就我们的目的来说,海洋环境仅由四部分组成:水表.空气.阳光和水表以下部分.在本节中,我们在数学和 ...

  8. HDU 1394 Minimum Inversion Number(最小逆序数 线段树)

    Minimum Inversion Number [题目链接]Minimum Inversion Number [题目类型]最小逆序数 线段树 &题意: 求一个数列经过n次变换得到的数列其中的 ...

  9. java.lang.ClassCastException: com.bjsxt.registration.model.User_$$_javassist_0 cannot be cast to javassist.util.proxy.Proxy

    1.懒加载 因为此时用的load懒加载机制,到jsp页面在发送sql语句的时候session已经关闭了.所以会报以上错.可以添加过滤器,使session在请求响应完成后再关闭. 过滤器要配置在stru ...

  10. Percona Toolkit 使用

    安装 percona-toolkit perl Makefile.PL make make test make install 默认安装到 /usr/local/bin 目录下 可能需要 DBI-1. ...