mdn/js/4_client_side_web_APIs/1_manipulating_documents

1_manipulating_documents

dz / mdn / js / 4_client_side_web_APIs / 1_manipulating_documents

Summary

Manipulating Documents

Node Tree

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