当前位置：网站首页>JS locate Daquan to get the brother, parent and child elements of the node, including robot instances

JS locate Daquan to get the brother, parent and child elements of the node, including robot instances

2022-07-24 09:12:00 【51CTO】

One 、js Positioning brother , Parent , The child element

</div>

all DOM Method

       
       var el = document.getElementById('xxx');
      
1.

       
       var el = document.getElementByName('xxx');
      
1.

       
       var els = document.getElementsByClassName('highlight'); 
       
var els = document.getElementsByTagName('td');
      
1.
2.
3.

       
       tips:
       
getElementsByClassName() yes HTML5  Newly added DOM API.IE8 The following is not supported .
       
 For modern browser development , You can also use querySelector() and querySelectorAll(). They are more powerful .
       
======================= Note appended =========================
       
 explain ：getElementsByClassName() yes HTML5 Of DOM API.
       
 Take a chestnut ：document.getElementsByClassName("wrapper"); // obtain DOM All in class = "wrapper" The elements of 
       
 explain ：querySelector() and querySelectorAll()
       
 It's a new standard Selectors API( Selector API).IE8+、FF3.5+、Safari 3.1+、Chrome、Opera 10+ Support 
       
  querySelector() Accept one css Selector as parameter , Then return DOM The first element to match in 
       
  querySelectorAll() Accept one css Selector as parameter , Then return DOM A collection array of matching elements in 
      
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.

Native JS obtain ID by test The child element under the element of . It can be used ：

var a = docuemnt.getElementById("test").getElementsByTagName("div"); There's no problem

here a.length=2;

       
       <script> 
       
　　function dom() {
       
　　　　　　　　　　　　　　var s= document.getElementById("test"); 
       
　　　　　　　　　　　　　　del_ff(s);    // Clean up the spaces  
       
　　　　　　　　　　　　　　var chils= s.childNodes;  // obtain s All the children of  
       
　　　　　　　　　　　　　　var par=s.parentNode;   // obtain s Parent node  
       
　　　　　　　　　　　　　　var ns=s.nextSibling;   // get s Next brother node of  
       
　　　　　　　　　　　　　　var ps=s.previousSibling;  // obtain s The last sibling node of  
       
　　　　　　　　　　　　　　var fc=s.firstChild;   // get s The first child node of  
       
　　　　　　　　　　　　　　var lc=s.lastChild;   // get s The last child of  
       
　　　　　　　　　　　　} 
       
</script>
      
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.

Let's introduce JQUERY The father of , Son , Brother node search method

jQuery.parent(expr) Find the father node , You can pass in expr To filter , such as $("span").parent() perhaps $("span").parent(".class")

jQuery.parents(expr), Be similar to jQuery.parents(expr), But it's looking for all the ancestral elements , Not limited to the parent element

jQuery.children(expr). Return all child nodes , This method will only return the direct child node , Not all descendant nodes will be returned

jQuery.contents(), Return to everything below , Include nodes and text . This method and children() The difference is , Include blank text , It will also be used as a

jQuery Object returns ,children() Then only nodes will be returned

jQuery.prev(), Return to the previous sibling node , Not all sibling nodes

jQuery.prevAll(), Return all previous sibling nodes

jQuery.next(), Return to the next sibling , Not all sibling nodes

jQuery.nextAll(), Return all subsequent sibling nodes

jQuery.siblings(), Return to sibling node , No matter before or after

jQuery.find(expr), Follow jQuery.filter(expr) Totally different .

jQuery.filter() From the beginning jQuery Filter out a part of the object collection , and

jQuery.find() Return result of , There will be no content in the initial set , such as $("p"),find("span"), It's from <p> Elements start looking for <span>, Equate to $("p span")

robotframework example ：

       
       Execute Javascript  var ele=document.getElementsByName("select_Start")(3).nextSibling;ele.onclick("this.previousSibling.click()");
       
// First, according to name Get an element , But enforcement onlick Is the following element , So you need to locate the following sibling elements first （ use nextSibling obtain ）, Finally, use the following to contain onclick Element execution of onlick event .
      
1.
2.
3.

example 1：

js Locate the brother of Daquan acquisition node , Parent , Child elements contain robot example _ Child node

example 2：

js Locate the brother of Daquan acquisition node , Parent , Child elements contain robot example _jquery_02

js Locate the brother of Daquan acquisition node , Parent , Child elements contain robot example _jquery_03

       
       Execute Javascript    var ele=document.getElementById("viewtable").getElementsByTagName("tbody")(0).getElementsByTagName("td"); for(var i=0;i<ele.length;i++)  
       
    { if(ele[i].innerHTML=="${searchTitle}") { ele[i].onclick()} }
      
1.
2.

原网站

版权声明
本文为[51CTO]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/205/202207240904357010.html