Js and jquery to obtain the parent element child element brother element implementation method

  • 2020-03-30 01:17:58
  • OfStack

First, let's talk about the method of JS acquisition, which is much more troublesome than the method of JQUERY, and then make a comparison with the method of JQUERY

The JS method is much more cumbersome than JQUERY, mainly because of the FF browser, which treats your newline as the most DOM element

Native JS gets the child under the element with ID test. You can use:

Such as:

< Div id = "dom" >
      < Div> < / div>
      < Div> < / div>
      < Div> < / div>
< / div>

Var a = docuemnt. GetElementById (" dom "). GetElementsByTagName_r (" div "); There's no problem with that

At this point a. ength = 3;

But let's do it the other way which is var b = document.getelementbyidx_x ("dom").childnodes; If   So alert(b.ength) on Internet explorer is still 3, but on the FF browser it says 4, which is because FF treats line breaks as an element.
So we're going to have to deal with those properties of JS. The idea is simply to go through the elements. Remove element types as Spaces and text. The handler looks like this


function del_space(elem){
  var elem_child = elem.childNodes;//Gets all the child elements of the parameter element
  for(var i=0;i<elem_child.length;i++){ //Iterate over the child elements
         if(elem_child.nodeName == "#text" && !/S/.test(elem_child.nodeValue)) { 
           elem.removeChild(elem_child)}
          }
   }
}

The above function iterates over the child element when there is a node in the element whose type is text and whose node value is empty. Just delete him.

NodeNames can get the node type of a node, /\s/ non-null character in JS regular expression. In front! , represents a null character

The test() method detects if a string matches a pattern. The syntax is RegExpObject. Test (string)

Returns true if the string string contains text that matches RegExpObject, or false otherwise.

NodeValue means to get a value in this node.

RemoveChild removes children of an element.

Here's the key!


<div id = "dom">
          <div></div> 
          <div></div> 
     <div></div> 
 </div>
<script>
   function dom(){
      var a = document.getElementByIdx_x_x("dom");
      del_space(a); Calls the whitespace clearing function 
      var b = a.childNodes; To obtain a All child nodes of; 
      var c = a.parentNode; To obtain a Parent node of; 
      var d = a.nextSbiling; To obtain a The next sibling node of 
      var e = a.previousSbiling; To obtain a The last sibling node of 
      var f = a.firstChild; To obtain a The first child node 
      var g = a.lastChild; To obtain a The last child node of 
}
</script>

Here's how to find the parent, child, and sibling nodes of JQUERY

JQuery.parent(expr) looks for the parent node and passes in expr for filtering, such as $("span").parent() or $("span").parent(".class")

Jquery.parents (expr), similar to jquery.parents (expr), but looking for all ancestor elements, not just the parent

JQuery. Children (expr). Returns all child nodes. This method only returns direct child nodes, not all children

Jquery.contents (), which returns everything below, including the node and the text. The difference between this method and children() is that, including blank text, it is also treated as one

The jQuery object returns, and children() only returns nodes

JQuery. Prev (), returns the last sibling, not all

JQuery. PrevAll (), which returns all previous sibling nodes

JQuery. Next (), returns the next sibling, not all siblings

JQuery. NextAll (), returns all subsequent sibling nodes

JQuery. Siblings (), returns siblings(no siblings)

JQuery. Find (expr) is completely different from jquery.filter (expr). JQuery. Filter () filters out a portion of the original collection of jQuery objects, while jquery.find ()

Returns a result that does not have the contents of the initial set, such as $("p"),find("span"), from

So the p element starts looking for the same thing as $("p span")

-- -- -- -- -- -- - $2014-1-9 -- -- -- -- -- -- -- --

The above is the method I picked from the network to solve js and jquery to get the parent-child elements, etc., but there will still be problems when solving:


<script type="text/javascript">

  //JS solution
  var dom=document.getElementById("dom");
  //To avoid problems with ff, child elements are filtered
  del_space(dom);
  //1. Get all child nodes under dom
  var a = dom.childNodes;//All child nodes;
        var b = dom.parentNode;//The parent node;
        var e = dom.firstChild;//First child node
        var f = dom.lastChild;//The last child node

        //I don't know why, the next sibling node and the last sibling node cannot be obtained in the future. - -!
        var c = dom.nextSbiling.nodeType;//Next sibling node
        var d = dom.previousSbiling;//The last sibling node

       //JQuery solution
   var a1 = $("#dom").children();//All child nodes;
        var b2 = $("#dom").parent();//The parent node;
        var c3 = $("#dom").next();//Next sibling node
        var d4 = $("#dom").prev();//The last sibling node
       var e5 = $("#dom").children(":first");//First child node
        var f6 = $("#dom").children(":last");//The last child node

   /*
   alert(a.length);
   for(var i=0;i<a.length;i++){
    alert(a[i].nodeName+":"+a[i].nodeValue+":"+/s/.test(a[i].nodeValue));
   }
   */

  //Ff will treat your newline as a dom element by default, so it must be filtered, IE will not cause similar problems
  function del_space(elem){
    var elem_child = elem.childNodes;//Gets all the child elements of the parameter element
   for ( var i = 0; i < elem_child.length; i++) { //Iterate over the child elements
     if (elem_child[i].nodeName == "#text") {
      elem.removeChild(elem_child[i]);
     }
   }
  }
 </script>

Js gets the dom operation of the node

interface

NodeType constants

NodeType value

note

Element

Node. ELEMENT_NODE

1

Element nodes

The Text

node.text_node

3

Text node

The Document

Node. DOCUMENT_NODE

9

The document

The Comment

Node.COM MENT_NODE

8

Annotated text

DocumentFragment

Node. DOCUMENT_FRAGMENT_NODE

11

The document fragment

Attr

Node. ATTRIBUTE_NODE

2

Node properties

methods

describe

The createAttribute ()

Creates a new Attr node with the specified name.

CreateComment ()

Creates a new Comment node with the specified string.

The createElement method ()

Creates a new Element node with the specified tag name.

The createTextNode ()

Creates a new TextNode node with the specified text.

GetElementById ()

Returns an Element node in the document with the specified id attribute.

The getElementsByTagName ()

Returns all Element nodes in the document with the specified tag name.

attribute

describe

The attributes

If the node is an Element, the attributes of that Element are returned as NamedNodeMap.

.childnodes

Stores the children of the current Node in the form of Node[]. If there are no child nodes, an empty array is returned.

firstChild

Returns the first child of the current Node in the form of Node. Null if there are no child nodes.

lastChild

Returns the last child of the current Node in the form of Node. Null if there are no child nodes.

nextSibling

Returns the next sibling of the current Node in the form of Node. If there is no such node, null is returned. Next sibling node

nodeName

The name of the node, and the Element node represents the tag name of the Element.

nodeType

Represents the type of node.

parentNode

Returns the value of the current Node in the form of Node The parent node . Null if there is no parent node.

previousSibling

Returns the sibling Node immediately next to the current Node and before it in the form of Node. If there is no such node, null is returned. The last sibling node


Related articles: