Dom_02 Search and element manipulation

1. Find the surrounding elements by the relationship between nodes;

2. Search HTML properties: ① by ID: var Elem=document.getelementbyid ("id"); Find an element that must be called by document; ② by tag name: Var elems= Parent.getelementsbytagname ("tag name"), finds the specified tag name element under the specified parent element, finds all descendant nodes, ③ by Name property: Var elems=parent.getelementsbyname ("name" ); Specifies the element under the parent element that looks for the specified name attribute; ④ by class: Var elems=parent.getelementsbyclassname ("class"); Specifies the element under the parent element that finds the specified class attribute; * (* If getelementsxxx is not found, return to the empty set "";);

3. Finder: ① only find one element that meets the selector requirements: var elem=parent.queryselector ("selector"), ② find multiple elements that meet the selector requirements: Var elem= Parent.queryselectorall ("selector"); Returns an empty collection "";

4, find GetXXX and Queryselector difference: GetXXX: Code cumbersome, but the implementation of high efficiency; Queryselector: The code is simple, the return content contains the complete set of attributes, so the execution efficiency is slow;

5, Operation content: ①elem.innerhtml: Start tag to end the HTML content of the tag, ②elem.textcontent: Start tag to end the text content of tag (do not contain HTML tag);

6, the core of the Operation attribute DOM: (omnipotent); ① Access Attribute Node object: var node=elem.attributes "i/" property name "" Or: Var node=elem.getattributenode ("Property name") ; property value: Node.value;② Gets the property value: Var value=elem.getattribute ("Property name"), ③ Modify property value: Elem.setattribute ("Property name", "value") ; ④ Remove attribute: Elem.removeattribute ("attribute name"); ⑤ determines whether the specified attribute is included: var bool=elem.hasattribute ("attribute name");

7. HTML DOM for manipulating attributes: Encapsulates HTML standard attributes into an element object: Elem. Attribute name; * (* access to HTML standard attributes only);

8. Custom properties of Operation properties: ① core DOM Magnum; ②HTML5: When defining a custom property, data-Property name = "Value"; When reading a custom attribute, Elem.dataset. property name;

9, property and attribute difference: ①attribute: Explicitly written in the start tag; GetAttribute can only get the attribute value explicitly defined on the page; ②property: Save in Memory object; * (* custom attribute not);

10, no attribute value attribute: Get check box to select the state of the checked, cannot use getattribute, must use elem.checked;

Dom_02 Search and element manipulation