假设这么一个Model

  文档对象模型(Document Object
Model,DOM)是一种用于HTML和XML文档的编程接口。它给文档提供了一种结构化的表示方法,可以改变文档的内容和呈现方式。我们最为关心的是,DOM把网页和脚本以及其他的编程语言联系了起来。DOM属于浏览器,而不是JavaScript语言规范里的规定的核心内容。这里我们主要是讲用javascript操作DOM

class Order < ApplicationRecord
    enum type: {'支付宝充值': 1, '微信充值': 2, '后台手工加值':3, '后台手工减值':4, '提现':5, '发布问题减值':6, '答案被选中加值':7}
end

一、查找元素

  如果我们想用js操作文档,首先要做的便是要找到要操作的元素,查找元素有直接查找和间接查找,下面来看一下这两类查找,

// 直接查找

document.getElementById             根据ID获取一个标签   获取的是单个标签
document.getElementsByName          根据name属性获取标签集合 注意获取的是一个 ******数组********
document.getElementsByClassName     根据class属性获取标签集合
document.getElementsByTagName       根据标签名获取标签集合

// 间接查找

parentNode          // 父节点
childNodes          // 所有子节点
firstChild          // 第一个子节点
lastChild           // 最后一个子节点
nextSibling         // 下一个兄弟节点
previousSibling     // 上一个兄弟节点

parentElement           // 父节点标签元素
children                // 所有子标签
firstElementChild       // 第一个子标签元素
lastElementChild        // 最后一个子标签元素
nextElementtSibling     // 下一个兄弟标签元素
previousElementSibling  // 上一个兄弟标签元素

那么可以进行下面这些枚举操作,首先是对象的操作

二、操作 

[1] pry(main)> order = Order.first
=>
[2] pry(main)> order.type
=> "后台手工减值"
[3] pry(main)> order.read_attribute_before_type_cast(:type)
=> 4

1、内容 

澳门新葡亰8455下载app,  操作内容主要是
innerText,innerHTML和value其中前两种比较简单,主要是第三种在操作表单的时候,用得最多,text,password和textarea的value可以分为一类,checkbox,radio和select的value可以分为一类,下面来看下表单中操作value的例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <input id="i1"  type="text" value="123"/>
    <input  id="i2" type="password" value="111" />
    <textarea id="i3">666</textarea>
    <h1>爱好</h1>
    <div id="i4">
        <ul>
            <li> <input type="checkbox" value="1" /> 篮球 </li>
            <li> <input type="checkbox" value="2"/> 足球 </li>
            <li> <input type="checkbox" value="3"/> 去球 </li>
        </ul>
    </div>
    <div id="i5">
        <ul>
            <li> <input type="radio" name="interesting" value="11" /> 篮球 </li>
            <li> <input type="radio" name="interesting" value="22"/> 足球 </li>
            <li> <input type="radio" name="interesting" value="33"/> 去球 </li>
        </ul>
    </div>
    <select id="i6">
        <option value="11">上海</option>
        <option value="22">北京</option>
    </select>
    <script>
        // 下面三项的value值为用户输入的值,也可以通过value给其设置值
        var vtext = document.getElementById('i1');
        console.log(vtext.value);

        var vpasswd = document.getElementById('i2');
        console.log(vpasswd.value);

        var vtextarea = document.getElementById('i3');
        console.log(vtextarea.value);

        // 下面三项的 value 为选中后提交到后台value
        var vcheck = document.getElementById('i4');
        var vli = vcheck.getElementsByTagName('input');
        console.log(vli);
        vli[1].checked = true; //选中复选框的第二项
        console.log(vli[1].value);  //选中之后值为2

        var vradio = document.getElementsByName('interesting');
        console.log(vradio);
        vradio[1].checked = true; //选中单选框的第二项
        console.log(vradio[1].value);


        var vselect = document.getElementById('i6');
        console.log(vselect.value);      // 默认为第一项上海,value为 11
        var voption = vselect.children; //选中之后值为22
        voption[1].selected = true;  //选中第二项北京


    </script>
</body>
</html>  

 下面再来看一个用单选框做的全选,反选,取消的小例子。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="btn">
        <!--<input type="button" value="全选" onclick="SAll();">-->
        <!--<input type="button" value="反选" onclick="RAll();">-->
        <!--<input type="button" value="取消" onclick="CAll();">-->
        <input type="button" value="全选" onclick="Fun('S');">
        <input type="button" value="反选" onclick="Fun('R');">
        <input type="button" value="取消" onclick="Fun('C');">
    </div>

    <div>
        <table>
            <thead>
                <tr>
                    <th>序号</th>
                    <th>用户名</th>
                    <th>年龄</th>
                </tr>
            </thead>
            <tbody id="tb">
                <tr>
                    <td><input class="inp" type="radio" value="1"></td>
                    <td>jason</td>
                    <td>20</td>
                </tr>
                 <tr>
                    <td><input class="inp" type="radio" value="1"></td>
                    <td>jason</td>
                    <td>20</td>
                </tr>
                 <tr>
                    <td><input class="inp" type="radio" value="1"></td>
                    <td>jason</td>
                    <td>20</td>
                </tr>
                 <tr>
                    <td><input class="inp" type="radio" value="1"></td>
                    <td>jason</td>
                    <td>20</td>
                </tr>
            </tbody>
        </table>
    </div>

    <script>
        function SAll() {
            var tb = document.getElementById('tb');
            var inp = tb.getElementsByTagName('input');
            for(var i=0;i<inp.length;i++){
                inp[i].checked = true;
            }
        }
        function CAll() {
            var tb = document.getElementById('tb');
            var inp = tb.getElementsByClassName('inp');
            for(var i=0;i<inp.length;i++){
                inp[i].checked = false;
            }
        }
        function RAll() {
            var tb = document.getElementById('tb');
            var inp = tb.getElementsByClassName('inp');
            for(var i=0;i<inp.length;i++){
                if(inp[i].checked){
                    inp[i].checked = false;
                } else{
                    inp[i].checked = true;
                }
            }
        }

        // 用一个函数加上switch函数解决
        function Fun(arg) {
            var tb = document.getElementById('tb');
            var inp = tb.getElementsByTagName('input');
            switch(arg){
                case 'S':
                    for(var i=0;i<inp.length;i++){
                        inp[i].checked = true;
                    }
                    break;
                case 'C':
                    for(var i=0;i<inp.length;i++){
                        inp[i].checked = false;
                    }
                    break;
                case 'R':
                    for(var i=0;i<inp.length;i++){
                        if(inp[i].checked){
                            inp[i].checked = false;
                        }else{
                            inp[i].checked = true;
                        }
                    }
                    break;
                default:
                    break;
            }
        }
    </script>
</body>
</html>

下面是对类的一些操作

2、操作属性

除了操作内容,还可以操作标签属性,主要用到下面几个方法

attributes                // 获取所有标签属性
setAttribute(key,value)   // 设置标签属性
getAttribute(key)         // 获取指定标签属性

下面来看一下示例  

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="btn">
        <input type="button" onclick="Func();" value="点击" />
        <div id="i1" >
            <div class="c1" alex="gg" jason="hh">123</div>
            <div class="c1" alex="kk">123</div>
            <div class="c1">123</div>
            <div class="c1" alex="kk">123</div>
            <div class="c1" alex="kk">123</div>
            <div class="c1">123</div>
            <div class="c1" alex="kk">123</div>
            <div class="c1">123</div>
        </div>
    </div>
    <script>
       function Func() {
           var d = document.getElementById('i1');
           var dchild = d.children;
           for(var i=0;i<dchild.length;i++){
               if(dchild[i].getAttribute('alex')=='kk'){
                   dchild[i].innerText = 456;

                   dchild[i].setAttribute('ko',666);  // 设置属性
                   console.log(dchild[i].attributes); // 获取所有属性
               }
           }
       }
    </script>
</body>
</html>

下面来看一个更加实用的小例子,点击不同的菜单显示不同的内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .content{
            margin: 0 auto;
            width: 300px;
            border: 1px solid chocolate;
        }
        ul{
            list-style: none;
            background-color: #cccccc;
        }
        ul li{
            float: left;
            display: block;
            background-color: #2459a2;
            padding:0 10px;
            height: 50px;
            line-height: 50px;
            cursor: pointer;
        }
        .clearfix:after{
            display: block;
            content: '';
            height: 0;
            visibility: hidden;
            clear: both;
        }
        #info{
            min-height: 200px;
            width: 300px;
        }
        .hide{
            display: none;
        }
        .active{
            background-color: white;
            color: black;
        }
    </style>
</head>
<body>
    <div class="content">
        <ul class="clearfix">
            <li tg="1" class="active" onclick="Func(this)">价格走势</li>
            <li tg="2" onclick="Func(this)">市场分布</li>
            <li tg="3" onclick="Func(this)">其他</li>
        </ul>

        <div id="info">
            <div targ="1" >conten1</div>
            <div targ="2" class="hide">conten2</div>
            <div targ="3" class="hide">conten3</div>
        </div>
    </div>

    <script>
        function Func(ths) {
            var bot = ths.parentElement.children;
            for(var i=0;i<bot.length;i++){
                bot[i].classList.remove('active')
            }
            ths.classList.add('active');

            var vtg = ths.getAttribute('tg');
            var divs = document.getElementById('info').children;
            for(var i=0;i<divs.length;i++){
                if(divs[i].getAttribute('targ') == vtg){
                    divs[i].classList.remove('hide');
                }else{
                    divs[i].classList.add('hide');
                }
            }

        }
    </script>
</body>
</html>
网站地图xml地图