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