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 | window, document, navigator |
window | |
content | Window: browser tab that browser page is loaded onto |
children | window_object, document (loaded into window) |
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 | window, browser_important_parts, DOM |
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 |