Python的dom节点怎么获取
导读：本文共7280字符，通常情况下阅读需要24分钟。同时您也可以点击右侧朗读，来听本文内容。按键盘←（左） →（右） 方向键可以翻页。
摘要： 1. dom节点1.1 dom节点获取<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device... ...
音频解说
目录
(为您整理了一些要点),点击可以直达。1. dom节点
1.1 dom节点获取
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>DOMdocumentobjectmodel文档顶级节点</title></head><body><divid="box"><pclass="p1">张三</p><pclass="p2">李四</p><pclass="p3">赵刘</p><pname="ceshi1"></p><pname="ceshi1"></p></div><div><inputtype="text"name="username"/><inputtype="password"name="pwd"/><p1>112233</p1><box>55666</box></div><script>console.log(document)//###1通过id获取div节点对象varbox=document.getElementById("box");console.log(box);//###2通过类名获取节点对象[返回的是数组]varp2=document.getElementsByClassName("p2");console.log(p2,typeof(p2));//获取李四节点对象lisi=p2[0];console.log(lisi)//获取王五节点对象wangwu=p2[1];console.log(wangwu);//###3.通过标签获取节点对象[返回的是数组]varp=document.getElementsByTagName("p");console.log(p)console.log(p[1])//###4.通过标签身上的name属性[返回的是数组]一般用在input表单中varceshi1=document.getElementsByName("username")[0];console.log(ceshi1);//###通过css选择器获取对应的元素节点//###5.querySelector,只获取找到的第一个;varp1=document.querySelector(".p1");console.log(p1)varbox=document.querySelector("#box");console.log(box)//input表单有两个,但是只获取第一个;varinput=document.querySelector("input");console.log(input);//###6.querySelectorAll获取所有找到的元素节点,返回数组varall=document.querySelectorAll("input[name=username]")[0];console.log(all);</script></body></html>1.2 节点元素层级关系
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>节点元素层级关系</title></head><body><divid="box"><p><inputtype="text"name="username"/><inputtype="password"name="pwd"/></p><pclass="p1">张三</p><pclass="p2">李四</p><pclass="p3">赵刘</p><pname="ceshi1"></p><pname="ceshi1"></p></div><script>//###获取对应的节点元素console.log(document)console.log(document.documentElement);//htmlconsole.log(document.documentElement.children)//找html里面所有的子节点childrenvarhtml_children=document.documentElement.childrenconsole.log(html_children)//head,bodybody=html_children[1];console.log(body);//head,bodyvardiv=body.children[0]console.log(div);varp0=div.children[0]console.log(p0)varinput=p0.childrenconsole.log(input)varinput1=input[0]console.log(input1)//获取下一个节点对象nextSiblingconsole.log(input1.nextSibling.nextSibling);//获取下一个元素节点对象nextElementSiblingvarinput2=input1.nextElementSibling;console.log(input2);//获取上一个节点对象previousSiblingconsole.log(input2.previousSibling)//获取上一个元素节点对象previousElementSiblingconsole.log(input2.previousElementSibling)//获取input2父节点元素对象;console.log(input2.parentElement)</script></body></html>
1.3 修改_清空内容
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>DOM修改/清空内容</title></head><body><buttononclick="func1()">修改内容</button><buttononclick="func2()">清空内容</button><divid="box"><p>我是最帅的最有钱的<ahref="#">最有味的</a>男人</p></div><script>//innerHTML获取标签里面所有内容[标签+文本]//innerText获取标签里面所有字符串[文本]varp=document.querySelector("#boxp");//console.log把数据展现在控制台console.log(p);//document.write把数据以字符串的形式展现在浏览器document.write(p);//点击button1触发如下任务,修改functionfunc1(){varcontent=p.innerHTML;varcontent=p.innerText;console.log(content);//p.innerHTML=`我被修改了<ahref=''>点我中大奖</a>...1`;p.innerText=`我被修改了<ahref=''>点我中大奖</a>...2`;}//点击button2触发如下任务,清空functionfunc2(){p.innerHTML='';}</script></body></html>1.4 隐藏显示密码效果
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>隐藏显示密码效果</title></head><body><inputtype="password"name="pwd"value="111"class="abcd"/><buttononclick="change()"id="btn">点我显示密码</button><div><imgsrc="images/oneal1.jpg"/></div><script>//效果1:显示隐藏密码varpassword=document.querySelector("input[name=pwd]")console.log(password);console.log(password.type);console.log(password.name);console.log(password.value);console.log(password.className)functionchange(){varbtn=document.querySelector("#btn")console.log(btn);if(password.type=="password"){password.type="text";btn.innerHTML="点我隐藏密码";}else{password.type="password";btn.innerHTML="点我显示密码";}}//效果2:点击换图片varimg=document.querySelector("img");console.log(img)img.onclick=function(){console.log(img.src)//http://127.0.0.1:5500/images/oneal1.jpgvararr=img.src.split("/")imgname=arr[arr.length-1]console.log(arr,imgname);if(imgname=="oneal1.jpg"){img.src="images/bakeli.jpg";}else{img.src="images/oneal1.jpg";}}</script></body></html>2. 全选_反选_不选
2.1 全选_反选_不选
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>全选,反选,不选</title><style>*{margin:0px;padding:0px;}ul{list-style:none;}#ul1li{float:left;}#ul1libutton{width:80px;height:30px;}#ul1libutton:hover{background-color:tan;}#ul2{clear:both;}</style></head><body><ulid="ul1"><li><button>全选</button></li><li><button>不选</button></li><li><button>反选</button></li></ul><ulid="ul2"><li><inputtype="checkbox"/>看电影</li><li><inputtype="checkbox"/>吃面</li><li><inputtype="checkbox"/>烫头</li><li><inputtype="checkbox"/>跑步</li><li><inputtype="checkbox"/>篮球</li></ul><script>//获取btn节点对象varbtn1=document.querySelector("#ul1li:nth-child(1)button");varbtn2=document.querySelector("#ul1li:nth-child(2)button");varbtn3=document.querySelector("#ul1li:nth-child(3)button");//全选btn1.onclick=function(){//获取#ul2li里的input/*vardata_lst=document.getElementById("ul2").getElementsByTagName("input");console.log(data_lst)*/vardata_lst=document.querySelectorAll("#ul2liinput");console.log(data_lst)//获取数组当中每一个input节点元素对象for(varinputofdata_lst){//console.log(input.checked)//设置节点input的checked属性为true;input.checked=true;}}//不选btn2.onclick=function(){vardata_lst=document.querySelectorAll("#ul2liinput");console.log(data_lst)//获取数组当中每一个input节点元素对象for(varinputofdata_lst){//console.log(input.checked)//设置节点input的checked属性为true;input.checked=false;}}//反选btn3.onclick=function(){vardata_lst=document.querySelectorAll("#ul2liinput");console.log(data_lst)//获取数组当中每一个input节点元素对象for(varinputofdata_lst){if(input.checked===true){input.checked=false;}else{input.checked=true;}}}</script></body></html>2.2 js控制css的相关属性
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>js控制css的相关属性</title><style>.box{border:solid1pxred;}.box_new{position:absolute;left:200px;}</style></head><body><buttonid="box1">点击我换颜色</button><buttonid="box2">点击我隐藏</button><buttonid="box3">点击我显示</button><buttonid="box4">点击边框换圆角</button><buttonid="box5">点击加样式</button><divclass="box">你好评</div><script>varbox=document.querySelector(".box");console.log(box);//js的dom对象获取相关的css属性//获取方法一console.log(box.style.width);console.log(box.style.backgroundColor);//获取方法二console.log(box.style["width"]);console.log(box.style["background-color"]);console.log(box.style["font-size"]);//获取方法三getComputedStyle获取该节点对象的所有样式console.log(window.getComputedStyle(box)["font-size"],"<===getComputedStyle===>");console.log(window.getComputedStyle(box).fontSize,"<===getComputedStyle===>");//事件绑定varbox1=document.getElementById("box1");varbox2=document.getElementById("box2");varbox3=document.getElementById("box3");varbox4=document.getElementById("box4");varbox5=document.getElementById("box5");box1.onclick=function(){box.style.backgroundColor="red";}box2.onclick=function(){box.style.display="none";}box3.onclick=function(){box.style.display="block";}box4.onclick=function(){//box.style.borderRadius="100%";varpoint=0;vart=setInterval(function(){box.style.borderRadius=`${point}%`;if(point<100){point++;}else{clearInterval(t)console.log("结束了...")}},50)}/*重点添加样式*/box5.onclick=function(){//box.className="boxbox_new";box.className+="box_new";}</script></body></html>2.3 js事件
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>js事件</title><style>*{margin:0px;padding:0px;}.box{width:100px;height:100px;background:green;position:absolute;left:0px;}</style></head><body><!--1.事件的静态绑定--><buttononclick="func1()">按钮1</button><divclass="box"></div><script>varbox=document.getElementsByClassName("box")[0];vart;console.log(box);functionfunc1(){varleft=parseInt(window.getComputedStyle(box).left)console.log(left,typeof(left));//console.log(box.style.left);t=setInterval(function(){left+=10;box.style.left=`${left}px`;},50)}//2.事件的动态绑定//onmouseover鼠标指针悬停在指定元素上时触发box.onmouseover=function(){clearInterval(t);}//onmouseout鼠标指针离开指定元素时触发box.onmouseout=function(){func1()}</script></body></html>3. 模态框
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>模态框</title><style>.box{position:fixed;width:100%;height:100%;top:0px;background-color:greenyellow;display:none;}.content{border:solid1pxred;width:500px;height:500px;background-color:tan;margin:auto;margin-top:14%;}</style></head><body><buttonid="login">登录</button><divclass="box"><divclass="content"><spanclass="close">X</span><br/><span>账号:<inputtype="text"/></span><br/><span>密码:<inputtype="password"/></span></div></div><script>varbtn=document.getElementById("login");varbox=document.querySelector(".box");varclose=document.querySelector(".close");btn.onclick=function(){console.log(11)box.style.display="block";}close.onclick=function(){box.style.display="none";}</script></body></html> </div> <div class="zixun-tj-product adv-bottom"></div> </div> </div> <div class="prve-next-news">本文：
Python的dom节点怎么获取的详细内容，希望对您有所帮助，信息来源于网络。