<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript">
        function getDom01(){
            var div = document.querySelector(".box");

            //得到属性 class属性
            console.log(div.className);
            //得到的是值
            console.log(div.getAttribute("class"));
            //得到集合
            var attrs = div.attributes;
            for(var i=0;i<attrs.length;i++){
                var attr = attrs[0];
                console.log(attr.value);
            }

            console.log("--------------------");
            console.log(div.nodeName);
            console.log(div.nodeType);
            console.log(div.nodeValue);

            //console.log(div)
        }

        function setAttr(){
            var div = document.querySelector(".box");
            div['test'] = "ttttt";
            //设置属性的值
            div.setAttribute("testtest","tttttt");
            //div.setAttribute("name","divdiv");
            div.name = "divdiv";
            div.removeAttribute("name");
        }

        function setTextText(){
            var div =  document.querySelector(".box");
            //console.log(div.textContent)
            console.log(div.innerHTML);
            //改变文本里面的额内容
            div.innerHTML = "<h1>this is a innerHTML test</h1>";
        }

        /**
         *
         *                  元素节点            属性节点            文本节点
         *
         * NodeName          元素名             属性名              #text
         *
         * NodeType            1                2                   3
         *
         * NodeValue          null             属性值             文本内容
         *
         */

        //得到所有的子元素
        function getChilds(_parent){
            var childs = [];
            if(_parent){
                var child = _parent.childNodes;
                for(var i=0;i<child.length;i++){
                    var c = child[i];
                    if(c.nodeType === 1){
                        childs.push(c);
                    }
                }
            }
            return childs;
        }

        function testGetChilds(){
            var childs = getChilds(document.querySelector(".box"));
            console.log(childs)
        }
        /**
         *  通用的得到上一个下一个元素
         */
        function getSibling(_dom,sibling){
            if(_dom){
                sibling = sibling || "nextSibling";
                _dom = _dom[sibling];
                while(_dom && _dom.nodeType != 1) {
                    _dom = _dom[sibling];
                }
                return _dom;
            }
            return null;
        }

        //得到同级的下一个元素
        function getNextSibling(_dom){
            if(_dom){
                _dom = _dom.nextSibling;
                while(_dom.nodeType != 1){
                    _dom = _dom.nextSibling;
                }
                return _dom;
            }
            return null;
        }

        function testGetSibling(){
            console.log(getSibling(document.querySelector(".box"),"previousSibling"))
        }
        //获取上一个节点
        function getPreviousSibling(_dom){
            return getSibling(_dom,"previousSibling");
        }

        function testStyle(){
            var div = document.querySelector("#box2");
            div.style.border = "1px solid red";
        }
        function testStyle1(){
            var div = document.querySelector("#box2");
            //改变样式的注意事项
            //当不是一个规则单词的时候
            div.style.border = "none";
            //用中括号赋值
            div.style["margin-left"] = "10px";
            //满足驼峰命名
            div.style.marginRight = "20px";
        }

    </script>
</head>
<body>
<input type="button" onclick="getDom01()" value="getDom01"/>
<input type="button" onclick="setAttr()" value="setAttr"/>
<input type="button" onclick="setTextText()" value="setTextText"/>
<input type="button" onclick="testGetChilds()" value="testGetChilds"/>
<input type="button" onclick="testGetSibling()" value="testGetSibling"/>
<input type="button" onclick="testStyle()" value="testStyle"/>
<input type="button" onclick="testStyle1()" value="testStyle1"/>
<hr/>
<div class="box" name="div">
    <div id="box1" style="">
        <span>this is a span in div 1</span>
        <span>this is a span in div 2</span>
    </div>
    <div id="box2">
        <span>this is a span in div 1</span>
        <span>this is a span in div 2</span>
    </div>
    <div id="box3">
        <span>this is a span in div 1</span>
        <span>this is a span in div 2</span>
    </div>
    <div id="box4">
        <span>this is a span in div 1</span>
        <span>this is a span in div 2</span>
    </div>
</div>
</body>
</html>

js中获取父节点,兄弟节点及处理属性节点的更多相关文章

  1. js中获取 table节点各tr及td的内容方法

    js中获取 table节点各tr及td的内容方法 分类: java基础2013-10-12 17:54 1055人阅读 评论(0) 收藏 举报 <table id="tb1" ...

  2. Js/Jquery获取iframe中的元素 在Iframe中获取父窗体的元素方法

    在web开发中,经常会用到iframe,难免会碰到需要在父窗口中使用iframe中的元素.或者在iframe框架中使用父窗口的元素 js 在父窗口中获取iframe中的元素  1. 格式:window ...

  3. js获取iframe中的元素以及在iframe中获取父级的元素（包括iframe中不存在name和id的情况）

      第一种情况:iframe中不存在name和id的方法:(通过contentWindow获取) var iframe = document.getElementsByTagName('iframe' ...

  4. js中获取css样式属性值

    关于js中style,currentStyle和getComputedStyle几个注意的地方 (1)用js的style只能获取元素的内联样式,内部样式和外部样式使用style是获取不到的.针对css ...

  5. JS中获取元素属性的逆天大法

    给大家聊下js中获取元素属性的逆天大法,胆小慎入,切记切记!!! innerHTML.outerHTML.innerText .outerText.value.text().html(),val() ...

  6. js中获取URL中指定的查询字符串

    js中获取URL中指定的搜索字符串,主要利用location对象实现,废话少说,上代码. function getSearchString(key) { // 获取URL中?之后的字符 var str ...

  7. js中获取css属性

    直接获取 window.onload = function() { var but = document.getElementById('button'); var div = document.ge ...

  8. 【2017-06-27】Js中获取地址栏参数、Js中字符串截取

    一.Js中获取地址栏参数 //从地址栏获取想要的参数 function GetQueryString(name) { var reg = new RegExp("(^|&)" ...

  9. 小程序 js中获取时间new date()的用法（网络复制过来自用）

    js中获取时间new date()的用法   获取时间: 1 var myDate = new Date();//获取系统当前时间 获取特定格式的时间: 1 myDate.getYear(); //获 ...

随机推荐

  1. vue router动态路由

    <div id="#app"> <router-link to="/user/header">路由1</router-link&g ...

  2. LINUX中的RCU机制的分析

    RCU机制是Linux2.6之后提供的一种数据一致性访问的机制,从RCU(read-copy-update)的名称上看,我们就能对他的实现机制有一个大概的了解,在修改数据的时候,首先需要读取数据,然后 ...

  3. 【python】BytesIO与串化

    一共有以下几个概念 1.类文件: File(path), open(path), BytesIO(), ... 文件读之前要seek(0) 2.字符串: file.read() 3.对象: dict, ...

  4. java 注解总结

    @Controller用于标注控制层组件 @Controller 用于标记在一个类上,使用它标记的类就是一个SpringMVC Controller 对象.分发处理器将会扫描使用了该注解的类的方法.通 ...

  5. Vim技能修炼教程(17) - 编译自己的Vim

    编译自己的Vim 前面我们已经对Vim有比较丰富的了解了.我们也知道Vim有很多编译时的选项,很多功能依赖于这些编译选项.其中最重要的就是脚本语言的支持,很多发行版本是不全的.为了支持我们所需要的功能 ...

  6. 分析现有 WPF / Windows Forms 程序能否顺利迁移到 .NET Core 3.0（使用 .NET Core 3.0 Desktop API Analyzer ）

    今年五月的 Build 大会上,微软说 .NET Core 3.0 将带来 WPF / Windows Forms 这些桌面应用的支持.当然,是通过 Windows 兼容包(Windows Compa ...

  7. pthread中取消线程

    取消线程:告诉一个线程关掉自己,取消操作允许线程请求终止其所在进程中的任何其他线程.不希望或不需要对一组相关的线程执行进一步操作时,可以选择执行取消操作.取消线程的一个示例是异步生成取消条件. 对于c ...

  8. php fwrite写入文件bom头导致的乱码问题解决

    最近导出文件遇到fwrite导出乱码,而且中英文都乱码,很费解.折腾了一番之后终于找到问题所在了,mark下. UTF-8 BOM 又叫 UTF-8 签名,其实 UTF-8 的 BOM 对 UFT-8 ...

  9. linux shell获取用户输入

    一.获取用户输入1.基本读取read命令接收标准输入的输入,或其它文件描述符的输入.得到输入后,read命令将数据输入放入一个标准变量中.[root@rac2 ~]# cat t8.sh #!/bin ...

  10. 开始SDK之旅-入门1基本环境搭建与测试

    已验证这个可用. http://bbs.ccflow.org/showtopic-2560.aspx 集成方式已经用一段时间了,今天刚好有时间,尝试下SDK.使用的话,也很方便,以下是简单的步骤1.新 ...