getElementById不適用於tabset內的div

Question

這是我的HTML

<div>
<h1 class="main-header logic-head  av-settings-head"></h1>
<div class="col-xs-12 col-xs-12 col-lg-12 tabcontent" >
    <form class="form-horizontal formtext col-xs-12 col-sm-10 col-lg-10 row">
        <div class="form-group">
            <div class="col-xs-12 col-sm-5 col-lg-3 paddnone">
                <label class="control-label">Name</label>
            </div>

            <div class="col-sm-5">
                <input id="NewobjectName" type="text" class="form-control" />
            </div>
        </div>
        <div class="form-group">
            <div class="col-xs-12 col-sm-5 col-lg-3 paddnone">
                <label class="control-label">Description</label>
            </div>
            <div class="col-xs-12 col-sm-5 col-lg-5 paddnone">
                <textarea id="objectDescription" rows="3" class="form-control"></textarea>
            </div>
        </div>
        <div class="form-group">
            <div class="col-xs-12 col-sm-5 col-lg-3 paddnone">
                <label class="control-label">Type</label>
            </div>
            <div class="col-xs-12 col-sm-5 col-lg-5 paddnone">
                <select class="form-control">
                    <option>M</option>
                    <option>C</option>
                    <option>CM</option>
                </select>
            </div>
        </div>
        <div class="form-group">
            <div class="col-xs-12 col-sm-5 col-lg-3 paddnone">
                <label class="control-label">IsActive</label>
            </div>

            <div class="col-sm-5">
                <input type="checkbox" checked="true" />
            </div>
        </div>
        <div class="form-group">
            <div class="col-xs-12 col-sm-5 col-lg-3 paddnone">
                <label class="control-label">
                </label>
            </div>
            <div class="clearfix"></div>             
            <!-- Groups Area Tables Start -->
            <div class="row">

                <div role="tabpanel" class="tab_bg">
                    <!-- Nav tabs -->

                    <div tabset justified="true" ng-if="clientScript.specification=='commonSpecific'">

                        <div tab heading="ClientScript">
                            <div class="tab-content pad25 users-area">
                                <div role="tabpanel" class="tab-pane mart15 active" id="objectPermissions">
                                    <div class="form-group">
                                        <div class="col-xs-12 col-sm-5 col-lg-3 paddnone">
                                            <label class="control-label">Javascript Type</label>
                                        </div>
                                        <div class="col-xs-12 col-sm-5 col-lg-5 paddnone">
                                            <select class="form-control" ng-change="onEventChange(script.event)" ng-options="obj.eventName as obj.label for obj in events"
                                                    ng-model="script.event">
                                                <option value="">-select event-</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="method-tab" id="method-tab">
                                        <div class="row form-group btnbg">
                                            <div class=" col-xs-12 col-sm-6 col-lg-12">
                                                <button class="btn btn-primary pull-right">ADD +</button>
                                                <div class="clearfix"></div>
                                            </div>
                                        </div>
                                        <div class="col-xs-12 col-sm-12 col-lg-12 well pad0">
                                            <div class="tabbable tabs-left">
                                                <ul class="nav nav-tabs method-right">
                                                    <li class="active"><i></i><a href="#name" data-toggle="tab">Script 1</a></li>
                                                    <li class=""><i></i><a data-toggle="tab" href="#group-2">Script 2</a></li>
                                                    <li class=""><i></i><a href="#group-3" data-toggle="tab">Script 3</a></li>
                                                    <li class=""><i></i><a href="#group-4" data-toggle="tab">Script 4</a></li>
                                                </ul>
                                                <div class="tab-content content-left">
                                                    <div class="tab-pane col-xs-12 col-sm-8 col-lg-12 pad0 marl19 active" id="name">
                                                        <div class="col-lg-12">
                                                            <h4>Javascript Editor</h4>
                                                        </div>
                                                        <div class="clearfix"></div>
                                                        <div class="col-lg-12">
                                                            <div class="panel panel-default">

                                                                <div class="panel-body min-height">
                                                                    <div id="editor">
                                                            function foo(items) {
                                                                var i;
                                                                for (i = 0; i &lt; items.length; i++) {
                                                                    alert("Ace Rocks " + items[i]);
                                                                }
                                                            }
                                                            </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="clearfix"></div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row form-group btnbg">
                                            <div class=" col-xs-12 col-sm-6 col-lg-12">
                                                <button class="btn btn-primary pull-right">SAVE</button>
                                                <div class="clearfix"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <button id="saveObject" class="btn btn-primary" ng-click="save()">
                                    Validate
                                </button>

                            </div>

                        </div>
                        <div tab heading="SQL">

                        </div>
                        <div tab heading="HTML">

                        </div>
                    </div>                    
                </div>
            </div>
            <div class="col-xs-12 col-sm-9 col-lg-7  btnbg">
                <button id="saveObject" class="btn btn-primary " ng-click="save()">
                    SAVE
                </button>
            </div>
        </div>
    </form>
</div>

並且我正在通過tabset內的id查找元素，並且該id名稱為“ editor”，但它給出了null

而我的.js代碼是var element=document.getElementById("editor");

id為“ editor”的div位於tabset內，所以我認為這是為什么找不到它的原因...那么處理該問題的替代方法是什么？

Answer 1

如果要查看div內的值，請使用

var element=document.getElementById("editor");
alert(element.innerHTML);

檢查此鏈接

Answer 2

您的代碼正常工作

 var element = document.getElementById("editor"); snippet.log(element) snippet.log(element.innerHTML) 

 <script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script> <div> <h1 class="main-header logic-head av-settings-head"></h1> <div class="col-xs-12 col-xs-12 col-lg-12 tabcontent"> <form class="form-horizontal formtext col-xs-12 col-sm-10 col-lg-10 row"> <div class="form-group"> <div class="col-xs-12 col-sm-5 col-lg-3 paddnone"> <label class="control-label">Name</label> </div> <div class="col-sm-5"> <input id="NewobjectName" type="text" class="form-control" /> </div> </div> <div class="form-group"> <div class="col-xs-12 col-sm-5 col-lg-3 paddnone"> <label class="control-label">Description</label> </div> <div class="col-xs-12 col-sm-5 col-lg-5 paddnone"> <textarea id="objectDescription" rows="3" class="form-control"></textarea> </div> </div> <div class="form-group"> <div class="col-xs-12 col-sm-5 col-lg-3 paddnone"> <label class="control-label">Type</label> </div> <div class="col-xs-12 col-sm-5 col-lg-5 paddnone"> <select class="form-control"> <option>M</option> <option>C</option> <option>CM</option> </select> </div> </div> <div class="form-group"> <div class="col-xs-12 col-sm-5 col-lg-3 paddnone"> <label class="control-label">IsActive</label> </div> <div class="col-sm-5"> <input type="checkbox" checked="true" /> </div> </div> <div class="form-group"> <div class="col-xs-12 col-sm-5 col-lg-3 paddnone"> <label class="control-label"> </label> </div> <div class="clearfix"></div> <!-- Groups Area Tables Start --> <div class="row"> <div role="tabpanel" class="tab_bg"> <!-- Nav tabs --> <div tabset justified="true" ng-if="clientScript.specification=='commonSpecific'"> <div tab heading="Scocu ClientScript"> <div class="tab-content pad25 users-area"> <div role="tabpanel" class="tab-pane mart15 active" id="objectPermissions"> <div class="form-group"> <div class="col-xs-12 col-sm-5 col-lg-3 paddnone"> <label class="control-label">Javascript Type</label> </div> <div class="col-xs-12 col-sm-5 col-lg-5 paddnone"> <select class="form-control" ng-change="onEventChange(script.event)" ng-options="obj.eventName as obj.label for obj in events" ng-model="script.event"> <option value="">-select event-</option> </select> </div> </div> <div class="method-tab" id="method-tab"> <div class="row form-group btnbg"> <div class=" col-xs-12 col-sm-6 col-lg-12"> <button class="btn btn-primary pull-right">ADD +</button> <div class="clearfix"></div> </div> </div> <div class="col-xs-12 col-sm-12 col-lg-12 well pad0"> <div class="tabbable tabs-left"> <ul class="nav nav-tabs method-right"> <li class="active"><i></i><a href="#name" data-toggle="tab">Script 1</a> </li> <li class=""><i></i><a data-toggle="tab" href="#group-2">Script 2</a> </li> <li class=""><i></i><a href="#group-3" data-toggle="tab">Script 3</a> </li> <li class=""><i></i><a href="#group-4" data-toggle="tab">Script 4</a> </li> </ul> <div class="tab-content content-left"> <div class="tab-pane col-xs-12 col-sm-8 col-lg-12 pad0 marl19 active" id="name"> <div class="col-lg-12"> <h4>Javascript Editor</h4> </div> <div class="clearfix"></div> <div class="col-lg-12"> <div class="panel panel-default"> <div class="panel-body min-height"> <div id="editor"> function foo(items) { var i; for (i = 0; i &lt; items.length; i++) { alert("Ace Rocks " + items[i]); } } </div> </div> </div> </div> <div class="clearfix"></div> </div> </div> </div> </div> <div class="row form-group btnbg"> <div class=" col-xs-12 col-sm-6 col-lg-12"> <button class="btn btn-primary pull-right">SAVE</button> <div class="clearfix"></div> </div> </div> </div> </div> <button id="saveObject" class="btn btn-primary" ng-click="save()"> Validate </button> </div> </div> <div tab heading="Scocu SQL"> </div> <div tab heading="Scocu HTML"> </div> </div> </div> </div> <div class="col-xs-12 col-sm-9 col-lg-7 btnbg"> <button id="saveObject" class="btn btn-primary " ng-click="save()"> SAVE </button> </div> </div> </form> </div>