1_manipulating_documents
dz / mdn / js / 4_client_side_web_APIs / 1_manipulating_documentsSummary
Manipulating Documents
Node Tree
- DOM
- browser_important_parts
- manipulating_styles
Nodes
| DOM | |
| content | DOM |
| children | APIs_control_HTML_styling (desc), document (represented as DOM), document_object_model (abbreviation), nodes, tree_structure |
| document_object_model | |
| content | Document Object Model |
| parents | DOM |
| APIs_control_HTML_styling | |
| content | Set of APIs for controlling HTML and styling info |
| parents | DOM |
| browser_important_parts | |
| content | Import parts of a web browser |
| children | document, navigator, window |
| window | |
| content | Window: browser tab that browser page is loaded onto |
| children | document (loaded into window), window_object |
| parents | browser_important_parts |
| window_object | |
| content | window object |
| parents | window |
| navigator | |
| content | Navigator: represents state and identity of browser |
| children | navigator_object |
| parents | browser_important_parts |
| navigator_object | |
| content | Navigator object |
| parents | navigator |
| document | |
| content | Document (represented by DOM): actual page loaded into window. |
| children | document_object |
| parents | browser_important_parts, DOM, window |
| document_object | |
| content | document object |
| children | append_child, create_element, create_text_node, moving_removing_elements, query_selector |
| parents | document |
| tree_structure | |
| content | Tree structure for easy access in programming language |
| parents | DOM |
| nodes | |
| content | Nodes |
| children | child_node, desc_node, parent_node, root_node, sibling_nodes |
| parents | DOM |
| root_node | |
| content | Root Node: top node of tree. for HTML, this is always the <HTML> node. |
| parents | nodes |
| child_node | |
| content | Child node: node directly inside another node |
| parents | nodes |
| desc_node | |
| content | Descendant Node: a node anywhere inside another node |
| parents | nodes |
| parent_node | |
| content | Parent Node: a node which ahs another node inside of it. |
| parents | nodes |
| sibling_nodes | |
| content | Sibling nodes: nodes that sit on the same level of DOM tree |
| parents | nodes |
| query_selector | |
| content | Document.querySelector(): modern way to select an element. |
| children | query_selector_all |
| parents | document_object |
| query_selector_all | |
| content | querySelectorAll(): matches every element in doc that matchesselector, stores in array called NodeList |
| parents | query_selector |
| create_element | |
| content | createElement() |
| parents | document_object |
| append_child | |
| content | appendChild() |
| parents | document_object |
| create_text_node | |
| content | createTextNode() |
| parents | document_object |
| moving_removing_elements | |
| content | moving/removing elements |
| children | append_child_moves_to_bottom, remove_child |
| parents | document_object |
| append_child_moves_to_bottom | |
| content | appendChild() can be used to move item to bottom of section |
| children | uses_refs |
| parents | moving_removing_elements |
| uses_refs | |
| content | uses refs |
| parents | append_child_moves_to_bottom |
| remove_child | |
| content | removeChild() removes node |
| parents | moving_removing_elements |
| manipulating_styles | |
| content | Manipulating Styles |
| children | inline_styles_applied_to_element, set_attribute_css_classes |
| inline_styles_applied_to_element | |
| content | inline styles applied directly to element with HTMLElement.style property |
| parents | manipulating_styles |
| set_attribute_css_classes | |
| content | Element.setAttribute() and CSAS classes |
| parents | manipulating_styles |