querySelector 不适用于由 appendchild 创建的元素

Question

我已经为 An 编写了这段代码物联网项目

JS代码 CSS代码 HTML代码

var DID = "7223187";
var RPNL = document.createElement("div");
RPNL.id = "Relays-panel";
RPNL.dataset.did = DID;
RPNL.style.display = "block";
document.getElementById("Relays").appendChild(RPNL);

var lable = document.createElement("label");
lable.style.position = "relative";
lable.style.left = "35%";
RPNL.appendChild(lable);

var input1 = document.createElement("input");
input1.type = "hidden";
input1.name = "formName";
input1.value = "onoffswitchs";
lable.appendChild(input1);

var div1 = document.createElement("div");
lable.appendChild(div1);

var div2 = document.createElement("div");
div2.style.marginTop = "-7px";
div2.style.width = "Auto";
div2.style.cssFloat = "left";
div2.style.color = "white";
div2.style.marginLeft = "-28%";
div2.style.paddingRight = "30%";
div1.appendChild(div2);


var div21 = document.createElement("div");
div21.className = "tab";
div2.appendChild(div21);

var but1 = document.createElement("button");
but1.className = "tablinks";
but1.style.borderBottom = "7px solid red";
but1.dataset.rn = "3";
but1.dataset.idtag = DID;
but1.onclick = function() {
  openRelay(this)
};
but1.innerHTML = "scnd3";
div21.appendChild(but1);

var but2 = document.createElement("button");
but2.className = "tablinks";
but2.style.borderBottom = "7px solid red";
but2.dataset.rn = "2";
but2.dataset.idtag = DID;
but2.onclick = function() {
  openRelay(this)
};
but2.innerHTML = "scnd2";
div21.appendChild(but2);

var but3 = document.createElement("button");
but3.className = "tablinks";
but3.style.borderBottom = "7px solid red";
but3.dataset.rn = "1";
but3.dataset.idtag = DID;
but3.onclick = function() {
  openRelay(this)
};
but3.innerHTML = "scnd1";
div21.appendChild(but3);

var div22 = document.createElement("div");
div22.id = "R1d";
div22.dataset.Tag = "Rtab1";
div22.className = "tabcontent";
div22.style.display = "none";
div2.appendChild(div22);

var div221 = document.createElement("div");
div221.className = "onoffswitch";
div22.appendChild(div221);

var switch1 = document.createElement("input");
switch1.type = "checkbox";
switch1.className = "onoffswitch-checkbox";
switch1.id = "R1";
switch1.dataset.drn = "1";
switch1.dataset.idtag = DID;
switch1.onchange = function() {
  Butscan2(this)
};
switch1.checked = false;
div221.appendChild(switch1);

var lable221 = document.createElement("label");
lable221.className = "onoffswitch-label";
lable221.htmlFor = "R1";
switch1.appendChild(lable221);

var span2211 = document.createElement("span");
span2211.className = "onoffswitch-inner";
lable221.appendChild(span2211);

var span2212 = document.createElement("span");
span2212.className = "onoffswitch-switch";
lable221.appendChild(span2212);

var div23 = document.createElement("div");
div23.id = "R2d";
div23.dataset.Tag = "Rtab2";
div23.className = "tabcontent";
div23.style.display = "none";
div2.appendChild(div23);

var div231 = document.createElement("div");
div231.className = "onoffswitch";
div23.appendChild(div231);

var switch2 = document.createElement("input");
switch2.type = "checkbox";
switch2.className = "onoffswitch-checkbox";
switch2.id = "R2";
switch2.dataset.drn = "2";
switch2.dataset.idtag = DID;
switch2.onchange = function() {
  Butscan2(this)
};
switch2.checked = false;
div231.appendChild(switch2);

var lable222 = document.createElement("label");
lable222.className = "onoffswitch-label";
lable222.htmlFor = "R2";
switch2.appendChild(lable222);

var span2221 = document.createElement("span");
span2221.className = "onoffswitch-inner";
lable222.appendChild(span2221);

var span2222 = document.createElement("span");
span2222.className = "onoffswitch-switch";
lable222.appendChild(span2222);


var div24 = document.createElement("div");
div24.id = "R3d";
div24.dataset.Tag = "Rtab3";
div24.className = "tabcontent";
div24.style.display = "none";
div2.appendChild(div24);

var div241 = document.createElement("div");
div241.className = "onoffswitch";
div24.appendChild(div241);

var switch3 = document.createElement("input");
switch3.type = "checkbox";
switch3.className = "onoffswitch-checkbox";
switch3.id = "R3";
switch3.dataset.drn = "3";
switch3.dataset.idtag = DID;
switch3.onchange = function() {
  Butscan2(this)
};
switch3.checked = false;
div241.appendChild(switch3);

var lable223 = document.createElement("label");
lable223.className = "onoffswitch-label";
lable223.htmlFor = "R3";
switch3.appendChild(lable223);

var span2231 = document.createElement("span");
span2231.className = "onoffswitch-inner";
lable223.appendChild(span2231);

var span2232 = document.createElement("span");
span2232.className = "onoffswitch-switch";
lable223.appendChild(span2232);


var table1 = document.createElement("table");
table1.style.width = "Auto";
table1.style.cssFloat = "right";
table1.style.marginRight = "-28%";
table1.style.color = "white";
div1.appendChild(table1);

var tbody1 = document.createElement("tbody");
table1.appendChild(tbody1);

var tr1 = document.createElement("tr");
tbody1.appendChild(tr1);



var table2 = document.createElement("table");
table2.style.width = "Auto";
table2.style.color = "white";
lable.appendChild(table2);

var tr21 = document.createElement("tr");
table2.appendChild(tr21);

var form21 = document.createElement("form");
tr21.appendChild(form21);

var th21 = document.createElement("th");
th21.style.position = "relative";
th21.style.right = "39px";
th21.style.paddingRight = "89px";
form21.appendChild(th21);

var h21 = document.createElement("h");
h21.innerHTML = "Time disabled:";
th21.appendChild(h21);

var radio1 = document.createElement("input");
radio1.type = "radio";
radio1.name = "R1Tset";
radio1.dataset.tag = "OFFradio";
radio1.dataset.idtag = DID;
radio1.onclick = function() {
  showRtimer(this.dataset.idtag, 0)
};
radio1.checked = true;
th21.appendChild(radio1);

var br1 = document.createElement("br");
th21.appendChild(br1);

var h22 = document.createElement("h");
h22.innerHTML = "Timer:";
th21.appendChild(h22);

var radio2 = document.createElement("input");
radio2.type = "radio";
radio2.name = "R1Tset";
radio2.dataset.tag = "OFFradio";
radio2.dataset.idtag = DID;
radio2.onclick = function() {
  showRtimer(this.dataset.idtag, 1)
};
radio2.checked = false;
th21.appendChild(radio2);


var h23 = document.createElement("h");
h23.innerHTML = "Auto Time:";
th21.appendChild(h23);

var radio3 = document.createElement("input");
radio3.type = "radio";
radio3.name = "R1Tset";
radio3.dataset.tag = "OFFradio";
radio3.dataset.idtag = DID;
radio3.onclick = function() {
  showRtimer(this.dataset.idtag, 2)
};
radio3.checked = false;
th21.appendChild(radio3);


var div3 = document.createElement("div");
div3.id = "Timer-Setting";
div3.dataset.Tag = "countdown";
div3.style.position = "relative";
div3.style.right = "100px";
div3.style.display = "none";
lable.appendChild(div3);

var h31 = document.createElement("h");
h31.innerHTML = "Time Set :";
div3.appendChild(h31);

var br2 = document.createElement("br");
div3.appendChild(br2);

var h32 = document.createElement("h");
h32.innerHTML = "H :";
div3.appendChild(h32);

var radio4 = document.createElement("input");
radio4.type = "number";
radio4.name = "hour";
radio4.value = '0';
radio4.min = '0';
radio4.max = '24';
radio4.style.width = "30px";
div3.appendChild(radio4);

var h33 = document.createElement("h");
h33.innerHTML = "M :";
div3.appendChild(h33);

var radio5 = document.createElement("input");
radio5.type = "number";
radio5.name = "minute";
radio5.value = '0';
radio5.min = '0';
radio5.max = '59';
radio5.style.width = "30px";
div3.appendChild(radio5);

var h34 = document.createElement("h");
h34.innerHTML = "S :";
div3.appendChild(h34);

var radio6 = document.createElement("input");
radio6.type = "number";
radio6.name = "second";
radio6.value = '30';
radio6.min = '0';
radio6.max = '59';
radio6.style.width = "30px";
div3.appendChild(radio6);


var div4 = document.createElement("div");
div4.id = "Time-Setting";
div4.dataset.Tag = "ATime";
div4.style.position = "relative";
div4.style.right = "100px";
div4.style.display = "none";
lable.appendChild(div4);

var h41 = document.createElement("h");
h41.innerHTML = "ON &nbsp;&nbsp;time Setting  :";
div4.appendChild(h41);

var radio7 = document.createElement("input");
radio7.type = "time";
div4.appendChild(radio7);

var br3 = document.createElement("br");
div4.appendChild(br3);

var h42 = document.createElement("h");
h42.innerHTML = "OFF time Setting  : ";
div4.appendChild(h42);

var radio8 = document.createElement("input");
radio8.type = "time";
div4.appendChild(radio8);





function showRtimer(Didm, timeMode) {
  var va = document.querySelector('[data-did="' + Didm + '"]');

  if (timeMode == 0) {
    va.querySelector('[data-Tag="ATime"]').style.display = "none";
    va.querySelector('[data-Tag="countdown"]').style.display = "none";
  } else if (timeMode == 1) {
    va.querySelector('[data-Tag="ATime"]').style.display = "none";
    va.querySelector('[data-Tag="countdown"]').style.display = "block";
  } else if (timeMode == 2) {
    va.querySelector('[data-Tag="ATime"]').style.display = "block";
    va.querySelector('[data-Tag="countdown"]').style.display = "none";
  }

}





function openRelay(evt) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");

  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }

  tablinks = document.getElementsByClassName("tablinks");

  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }

  var va = document.querySelector('[data-did="' + evt.dataset.idtag + '"]');
  var val = va.querySelector('[data-Tag="Rtab' + evt.dataset.rn + '"]');
  val.style.display = "block";
  evt.className += " active";
}

  /* Setting background color green */

body {
  background-color: #008060;
}


/* all links on mouse hover have a golden reaction */

#links {
  text-decoration: none;
  color: #305030;
}

#links:hover {
  color: gold;
}


/* Relay Number Tabs (in Farsi relay 1 , Relay 2 , ... ) general settings */

.tab {
  overflow: hidden;
  border-bottom: 1px solid #ccc;
}


/* Style the buttons inside the tab */

.tab button {
  background-color: inherit;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 22px;
  color: floralwhite;
}


/* Change background color of buttons on hover */

.tab button:hover {
  background-color: #00bf4442;
}


/* Create an active/current tablink class */

.tab button.active {
  background-color: #ad2626;
}


/* Style the tab content */

.tabcontent {
  display: none;
  padding: 6px 12px;
  -webkit-animation: fadeEffect 1s;
  animation: fadeEffect 1s;
}


/* Fade in tabs */

@-webkit-keyframes fadeEffect {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeEffect {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}


/* Circle pushButtons (like setting buttons) CSS */

.pushButton {
  position: relative;
  width: 60px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

.pushButton-checkbox {
  display: none;
}

.pushButton-label {
  display: block;
  overflow: hidden;
  cursor: pointer;
  width: 60px;
  height: 60px;
  background-color: #A8EDC4;
  border: 3px solid silver;
  border-radius: 100%;
}

.pushButton-inner {
  display: block;
  width: 200%; //margin-left: -100%;}
  .pushButton-inner {
    display: block;
    float: left;
    width: 100%;
    height: 100%;
    font-size: 15px;
    position: relative;
    top: 17px;
    left: 4px;
    color: #004400;
    font-family: Trebuchet, Arial, sans-serif;
    font-weight: bold;
    box-sizing: border-box;
  }
  .Window {
    position: relative;
    top: 70px;
    left: 30px;
    background-color: #00AA88;
    width: 350px;
    border: 10px solid #006633;
    border-radius: 40px;
  }
  .setting-forms {
    position: relative;
    top: 5px;
    left: 15px;
    width: 90%;
    border-top: 3px solid silver;
    border-bottom: 3px solid silver;
  }
  #keys {
    width: 60px;
    height: 60px;
    background-color: olive;
    border: 3px solid silver;
    border-radius: 100%;
    position: absolute;
    top: 90px;
  }
  #keys-inner {
    position: relative;
    top: 17px;
    left: 7px;
    color: silver;
  }
  #Relays-panel,
  #Temp_attach,
  #PIR_attach {
    position: relative;
    align: center;
    background-color: #204020;
    color: white;
    width: 320px;
    border-radius: 10px;
    border: 5px solid white;
  }
  {
    margin-bottom: 10px;
    padding: 10%;
    position: relative;
    float: right;
    background-color: #204020;
    color: white;
    width: 320px;
    border-radius: 10px;
    border: 5px solid white;
  }
  #Relays {
    position: absolute;
    top: 200px;
    width: 50%;
    right: 1%;
  }
  #sensor_settings {
    position: absolute;
    top: 200px;
    width: 50%;
  }
  #temp_temp,
  #temp_tolerance {
    width: 90%;
  }
  /* Relay ON - OFF Slider switchs CSS */
  .onoffswitch {
    right: 27%;
    position: relative;
    width: 90px;
    float: right;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
  }
  .onoffswitch-checkbox {
    display: none;
  }
  .onoffswitch-label {
    display: block;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid #7A7A7A;
    border-radius: 50px;
  }
  .onoffswitch-inner {
    display: block;
    width: 200%;
    margin-left: -100%;
    transition: margin 0.3s ease-in 0s;
  }
  .onoffswitch-inner:before,
  .onoffswitch-inner:after {
    display: block;
    float: left;
    width: 50%;
    height: 40px;
    padding: 0;
    line-height: 40px;
    font-size: 20px;
    color: white;
    font-family: Trebuchet, Arial, sans-serif;
    font-weight: bold;
    box-sizing: border-box;
  }
  .onoffswitch-inner:before {
    content: "ON";
    padding-left: 5px;
    background-color: #A8EDC4;
    color: #139402;
    text-align: left;
  }
  .onoffswitch-inner:after {
    content: "OFF";
    padding-right: 5px;
    background-color: #F0AAB5;
    color: #AD2626;
    text-align: right;
  }
  .onoffswitch-switch {
    display: block;
    width: 28px;
    margin: 6px;
    background: #AD2626;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 46px;
    border: 2px solid #7A7A7A;
    border-radius: 50px;
    transition: all 0.3s ease-in 0s;
  }
  .onoffswitch-checkbox:checked+.onoffswitch-label .onoffswitch-inner {
    margin-left: 0;
  }
  .onoffswitch-checkbox:checked+.onoffswitch-label .onoffswitch-switch {
    right: 0px;
    background-color: #139402;
  }

<div id='Relays'>
  <div id='Relays-panel' data-did='7223184' style="display: block;">
    <!--form method='POST' style='position:relative;left:35%;'-->
    <label style='position:relative;left:35%;'>
          <input type='hidden' name='formName' value='onoffswitchs'>

          <div>
            <div style="margin-top: -7px; width:Auto; float: left; color:white; margin-left: -28%;padding-right: 30%;">
              <div class="tab" >
                <button class="tablinks"         style="border-bottom: 7px solid red;"  data-rn='3' data-idtag="7223184" onclick="openRelay(this)">FST3</button>
                <button class="tablinks"         style="border-bottom: 7px solid red;"  data-rn='2' data-idtag="7223184" onclick="openRelay(this)">FST2</button>
                <button class="tablinks" checked style="border-bottom: 7px solid red;"  data-rn='1' data-idtag="7223184" onclick="openRelay(this)">FST1</button>
              </div>

              <div  id="R1d" data-Tag= "Rtab1" class="tabcontent" style="display: none;">
                <div class="onoffswitch">
                  <input type="checkbox"  class="onoffswitch-checkbox" id="R1" data-drn='1' data-idtag="7223184" onchange="Butscan2(this)" unchecked="">
                  <label class="onoffswitch-label" for="R1">
                    <span class="onoffswitch-inner"></span>
                    <span class="onoffswitch-switch"></span>
                  </label></input>
  </div>
</div>

<div id="R2d" data-Tag="Rtab2" class="tabcontent" style="display: none;">
  <div class="onoffswitch">
    <input type="checkbox" class="onoffswitch-checkbox" id="R2" data-drn='2' data-idtag="7223184" onchange="Butscan2(this)" unchecked="">
    <label class="onoffswitch-label" for="R2">
                    <span class="onoffswitch-inner"></span>
                    <span class="onoffswitch-switch"></span>
                  </label></input>
  </div>
</div>

<div id="R3d" data-Tag="Rtab3" class="tabcontent" style="display: none;">
  <div class="onoffswitch">
    <input type="checkbox" class="onoffswitch-checkbox" id="R3" data-drn='3' data-idtag="7223184" onchange="Butscan2(this)" unchecked=""></input>
    <label class="onoffswitch-label" for="R3">
                    <span class="onoffswitch-inner"></span>
                    <span class="onoffswitch-switch"></span>
                  </label>
  </div>
</div>
</div>

<table style="width:Auto;float: right;margin-right: 55%; color:white">
  <tbody>
    <tr>

    </tr>
  </tbody>
</table>

</div>

<table style="width:Auto; color:white">
  <tr>
    <th>
      <div class="led-box" style='display:none;'>
        <div class="led-green" id="R1LED" data-Tag="LED"></div>
      </div>
    </th>

    <tr>
      <form>
        <th style='position:relative;right: 39px; padding-right: 89px;'>

          Time disabled:<input type='radio' name='R1Tset' data-Tag='OFFradio' data-idtag="7223184" onclick='showRtimer(this.dataset.idtag,0)' checked>
          <br/> Timer: <input type='radio' name='R1Tset' data-Tag='Ctimeradio' data-idtag="7223184" onclick='showRtimer(this.dataset.idtag,1)'> Auto Time: <input type='radio' name='R1Tset' data-Tag='ATimeradio' data-idtag="7223184" onclick='showRtimer(this.dataset.idtag,2)'>
        </th>
      </form>
    </tr>

</table>

<div id='Timer-Setting' data-Tag="countdown" style='position:relative;right:100px;display:none;'>
  Time Set :<br/> H :<input type="number" name="hour" value='0' min="0" max="24" style='width=30px;'> M : <input type="number" name="minute" value='0' min="0" max="59" style='width=30px;'> S : <input type="number" name="second" value='30' min="0" max="59"
    style='width=30px;'>
</div>
<div id='Time-Setting' data-Tag="ATime" style='position:relative;right:100px;display:none;'>
  ON &nbsp;&nbsp;time Setting : <input type='time'>
  <br/> OFF time Setting : <input type='time'>
</div>

</label>
</div>
</div>

这两个块是不同的,

第一个一个是由html

制作的

第二个一个是用javascript!

制作的

一切正常，除了 Queryselector 在函数中找不到元素，并且由于该代码无法正常工作:(

例如我有这个功能：

首先隐藏每个打开的标签页

秒显示我们要显示的标签！

function openRelay(evt) 
  {
    var i, tabcontent, tablinks;
    tabcontent = document.getElementsByClassName("tabcontent");

    for (i = 0; i < tabcontent.length; i++) 
    {
      tabcontent[i].style.display = "none";
    }

    tablinks = document.getElementsByClassName("tablinks");

    for (i = 0; i < tablinks.length; i++) 
    {
      tablinks[i].className = tablinks[i].className.replace(" active", "");
    }

    var va  = document.querySelector('[data-did="'+evt.dataset.idtag+'"]');
    var val  = va.querySelector('[data-Tag="Rtab'+evt.dataset.rn+'"]');
    val.style.display = "block";
    evt.className += " active";
  }

我能做什么？

Answer 1

这里的问题是当你对数据集使用大写字母时会发生什么，以及属性是如何创建的。

var d = document.createElement("div")
d.dataset.Bar = "hello"
document.getElementById("out").appendChild(d)
console.log(document.getElementById("out").innerHTML)

<div id="out"></div>

Bar 的属性是 data--bar 而不是 data-Bar

querySelector 不适用于由 appendchild 创建的元素

querySelector doesn't work for elements that created by appendchild

html

javascript

dom

appendchild

selectors-api