python学习_day55_前端基础之JS
Posted 骑猪走秀
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了python学习_day55_前端基础之JS相关的知识，希望对你有一定的参考价值。
DOM(document object model)对象把 HTML 文档呈现为带有元素、属性和文本的树结构（节点树)，定义了访问和操作HTML文档的标准方法。
一、查找标签
1、直接查找标签
总共有如下四种直接查找的方式：
document.getElementById(“idname”) //通过id名 document.getElementsByTagName(“tagname”) //通过标签名 document.getElementsByName(“name”) //通过name名 document.getElementsByClassName(“name”) //通过class名
上述四种查找中，因为id的唯一性，得到结果就是对应标签对象。但是对于其他三种方式，因为其不唯一性，得到是包含满足条件的对象数组，通过数组索引可以取到相应的element对象，注意即使结果就一个对象，它也是一个对象数据。
<body>
<div id="div1">
<div class="div2">i am div2</div>
<div name="yuan">i am div2</div>
<div id="div3">i am div2</div>
<p>hello p</p>
</div>
<script>
/*通过document对象可以查找任何级别的对象*/
var div1=document.getElementById("div1");
/*通过查找到的element对象（必须是id对象）查找其子级标签时，不支持通过id和name查找*/
//支持;
var ele= div1.getElementsByTagName("p");
alert(ele.length);
//支持
var ele2=div1.getElementsByClassName("div2");
alert(ele2.length);
//不支持
var ele3=div1.getElementById("div3");
alert(ele3.length);
//支持
var ele3_=document.getElementById("div3");
console.log(ele3_)
//不支持
var ele4=div1.getElementsByName("yuan");
alert(ele4.length)
//支持
var ele4_=document.getElementsByName("yuan")
alert(ele4_.length)
</script>
</body>
</html>
2、导航查找
导航查找即是通过通过某个标签定位其他标签，主要属性如下：
‘‘‘
parentElement // 父节点标签元素
children // 所有子标签
firstElementChild // 第一个子标签元素
lastElementChild // 最后一个子标签元素
nexElementtSibling // 下一个兄弟标签元素
previousElementSibling // 上一个兄弟标签元素
‘‘‘
实例如下：
<script> var ele1=document.getElementById("div1"); var child=ele1.children; alert(child.length) ; //结果为4，得到是一个对象数组 var first=ele1.firstElementChild; console.log(first); //得到第一个孩子对象：<div class="div2">i am div2</div> var last=ele1.lastElementChild; console.log(last); //得到最后一个孩子对象： <p>hello p</p> var ele2=document.getElementById("div3"); var parent=ele2.parentElement; console.log(parent); //获得父级对象 var next=ele2.nextElementSibling; console.log(next); //得到下一个紧挨的兄弟对象：<p>hello p</p> var privous=ele2.previousElementSibling; console.log(privous); //得到上一个紧挨的兄弟对象：<div name="yuan">i am div2</div> </script>
二、标签操作
1、文本操作
以上是关于python学习_day55_前端基础之JS的主要内容，如果未能解决你的问题，请参考以下文章