javascript如何得到多个div中的所有a元素
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了javascript如何得到多个div中的所有a元素相关的知识，希望对你有一定的参考价值。
加入有2个div，每个下面各有2个<a>对象，希望得到一个数组，每个数组元素是一个<a>对象（不要是二维数组）。希望算法有效率，不要是自己遍历添加。
我现在的代码是这样：
var d=document.getElementsByTagName("div");
var x=new Array();//in-div anchor set
for(i=0; i<d.length; i++)
var tmp=dSet[i].getElementsByTagName("a");
x=x.concat(tmp);
但是结果得到一个2维数组，比如要访问第一个div的第一个a，需要调用x[0][0]。请问如何修改呢？
网页是服务器返回的，不能修改。不然我自己用getElementsByTagName("a")就可以得到了。
我想知道的主要是concat的方法为什么是按数组添加的，而不是数组元素添加的。
如果你非要这两个div下a标签的话，可以给这两个div外面套一个父div，加上id最好，这样就可以直接写了，例如
document.getElementById("patent").document.getElementsByTagName("a"); 参考技术A 很奇妙的问题，求解未果。
不过jQuery中这样就行 $("div a")本回答被提问者采纳 参考技术B 你可以在<a>连接加NAME 加属性！然后就可以取了！ 参考技术C <script>
window.onload =function()
var d=document.getElementsByTagName("div");
var x=new Array();
for(i=0; i<d.length; i++)
var tmp=d[i].getElementsByTagName("a");
for(var j=0;j<tmp.length;j++)
x.push(tmp[j]); //两次循环，用push方法压入一个数组中。
alert('A元素个数：'+x.length+'\n\n'+x);
</script>
<div><a href="http://www.baidu.com">1111111111111</a> <a href="http://zhidao.baidu.com">22222222222</a></div>
<div><a href="http://mp3.baidu.com">333333333333</a><a href="hi://www.baidu.com">44444444444</a></div>
如何删除div中的div和所有元素？ Javascript，html，css
我有一个函数，清除整个div，它消失但仍然出现在inspect（html）中。这是一个真正的问题，因为我们在电子邮件中有这个输入类型字段，我在电子邮件中获得了这个空数据。我只想在没有选择此值时将我从html中删除并检查。查看我的代码并尝试捕获错误。你需要注意的整个代码中最重要的事情是html中的onchange="checkSelected()"和用它操纵的第一个脚本标记。它应该只是一个显示器，但它仍然站在那里。
<div class="modal fade" id="montageModal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content" style="display: flex;">
<div class="modal-body">
<form id="schedule_form" class="clearfix" action="index.php?route=api/reifenmontage" method="post">
<div class="container-fluid">
<div class="step_1" >
<h3 class="modal-title">Reifenmontage Termin buchen </h3>
<div class="row termin_row">
<div class="col-xs-12 col-sm-4">
<div class="row">
<label>Pneu-Typ</label>
</div>
</div>
<div class="col-xs-12 col-sm-6">
<div class="row">
<select onchange="checkSelected()" class="form-control" name="pneu" id="pneu">
<option value="Motorrad">Motorrad</option>
<option value="Auto">Auto</option>
</select>
</div>
</div>
</div>
<div id="additionalRow" class="row termin_row" >
<div id="reifenmontage-input" class="row termin_row">
<div class="col-xs-12 col-sm-4">
<div class="row">
<label>Mark und model</label>
</div>
</div>
<div class="col-xs-12 col-sm-4">
<div class="row">
<select name="marka" class="form-control" id="button-getdata">
</select>
</div>
</div>
<div class="col-xs-12 col-sm-4">
<div class="row">
<select name="model" class="form-control" id="result" >
</select>
</div>
</div>
</div>
</div>
<div class="row termin_row">
<div class="col-sm-4 col-xs-12">
<div class="row"><label>2. Terminvorschlag</label></div>
</div>
<div class="col-sm-4 col-xs-6">
<div class="row">
<div class="input-group date" id="date-2" data-termin="1">
<input type='text' class="form-control" name="date[1]" />
<span class="input-group-addon">um</span>
</div>
</div>
</div>
<div class="col-sm-4 col-xs-6">
<div class="row">
<div class="input-group time" id="time-2" data-termin="1">
<input type='text' class="form-control" name="time[1]" />
<span class="input-group-addon">Uhr</span>
</div>
</div>
</div>
</div>
<div class="row">
<div class="checkbox">
<label>
<input type="checkbox" name="accept" id="accept"> Ich akzeptiere die <a href="teilnahmebedingungen" target="_blank">Teilnahmebedingungen</a>
</label>
</div>
</div>
<div class="row text-center">
<button type="button" class="btn btn-primary btn-lg btn-submit" id="next_step" disabled="disabled">Anfrage senden</button>
</div>
</div>
<div class="step_2">
<h3 class="modal-title">Your contact info</h3>
<div class="">
<div class="form-group clearfix">
<input type="text" name="name" value="<?= $user['name'] ?>" placeholder="Name and Lastname" class="form-control name text" required />
</div>
<div class="form-group clearfix">
<input type="text" name="phone" value="<?= $user['phone'] ?>" placeholder="Phone" class="form-control phone text" required />
</div>
<div class="form-group clearfix">
<input type="email" name="email" value="<?= $user['email'] ?>" placeholder="Email" class="form-control email text" required />
</div>
<div class="text-center">
<button type="submit" id="submit" class="btn btn-default btn-lg btn-submit" >Suchen</button>
</div>
</div>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">SCHLIESSEN</button>
</div>
</div>
</div>
</div>
和我的脚本标签
<script type="text/javascript">
let selectItem = document.getElementById('pneu');
let additionalRow = document.getElementById('additionalRow');
function checkSelected()
if (selectItem.selectedIndex == "1")
additionalRow.style.display = 'none';
else
additionalRow.style.display = 'block';
</script>
<script type="text/javascript">
$('#button-getdata').on('change', function()
$.ajax(
url: 'index.php?route=api/reifenmontage/get_marka_data',
type: 'post',
data: $('#reifenmontage-input select'),
dataType: 'json',
beforeSend: function()
,
success: function(json)
if (json['success'])
$("#result").empty();
for (i in json['success'])
var element = json['success'][i];
var o = new Option(element['model'], element['model']);
$("#result").append(o);
html = "\t<option value=\""+ element['model'] + "\">" + element['model'] + "</option>\n";
$("#result").append(o);
// document.getElementById("schedule_form").reset();
);
);
</script>
<script type="text/javascript">
$.ajax(
url: 'index.php?route=api/reifenmontage/mark',
context: document.body,
success: function(data)
const selectControl = $('#button-getdata');
selectControl.html(data.map(ExtractData).join(''));
);
function ExtractData(item)
return ` <option value="$item.value">$item.label</option>`;
</script>
答案
尝试使用分离/附加DOM元素的变体
<script type="text/javascript">
let selectItem = document.getElementById('pneu');
//let additionalRow = document.getElementById('additionalRow');
let detached = '';
function checkSelected()
if (selectItem.selectedIndex == "1")
detached = $('#reifenmontage-input').detach();
else
detached.appendTo('#additionalRow');
</script>
以上是关于javascript如何得到多个div中的所有a元素的主要内容，如果未能解决你的问题，请参考以下文章
如何删除div中的div和所有元素？ Javascript，html，css