N-many methods for DOM to obtain element nodes

Time:2022-6-10

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)
);

Recommended Today

Log operation class test

/// /// Log operation class /// public class LogWriteqw { #region constant /// /// General log lock /// private static object lockLog = new object(); /// /// Status log lock /// private static object lockState = new object(); /// /// Exception status lock /// private static object lockError = new object(); #endregion   #region operations […]