N-many methods for DOM to obtain element nodes

DOM

N-many methods for obtaining element nodes

/**

• Get elements according to ‘tag name’
• Because there can be multiple elements with the same tag name in HTML
• Therefore, the accepted variables are an array of classes that can store multiple data
• Get specific content by subscript.
  */
  // let ulEle = document.getElementsByTagName(“ul”)[0];
  // console.log(ulEle);

//Get element from attribute value of name
// let inputEle = document.getElementsByName(“f70”)[0];
// console.log(inputEle);

//Get element by ID value
// let liEle = document.getElementById(“box”);
// console.log(liEle);

//Get element by class name
// let leiName = document.getElementsByClassName(“F70”);
// console.log(leiName[2]);

//Get parent element
/**

• 1. Get an element (child element)
• 2. Find its parent element through this element
  */

// let navEle = document.getElementsByTagName(“nav”)[0];
// console.log(navEle);
/// / writing format: child element parentNode
// let headerEle = navEle.parentNode;
// console.log(headerEle);

/**

• Get child element node
• Writing format: parent element children
  *Children: a nonstandard attribute that returns a collection of child elements of a specified element.
  */
  // let Eles1 = headerEle.children;
  // console.log(Eles1);

/**

• Get child nodes (elements, text, comments)
• Writing format: parent element childNodes
  *ChildNodes: This is a standard attribute. It returns a collection of child elements of a specified element, including HTML nodes, all attributes, and text nodes.
  */
  // let Eles2 = headerEle.childNodes;
  // console.log(Eles2);

/// / get the first child node
// let FEles = headerEle.firstChild;
// console.log(FEles); //#text
/// / get the first child element node
// FEles = headerEle.firstElementChild;
// console.log(FEles); //

/// / get the last child node
// let LEles = headerEle.lastChild;
// console.log(LEles); //#text
/// / get the last child element node
// LEles = headerEle.lastElementChild;
// console.log(LEles); //

“123”

let eleButt = document.getElementsByTagName(button)[1]
console.log(
1, eleButt. Parentelement, / / its parent node
2, eleButt. Firstelementchild, / / its child node (the first)
3, eleButt. Lastelementchild, / / its child node (the last)
4, eleButt. Children, / / his child nodes (all)
5, eleButt. Previouselementsibling, / / the previous node of the node (sibling)
6, eleButt. Nextlementsibling, / / the next node of the node (sibling)
);