Js--dom object: Document Object Model documents

Dom object: Document Object Model documents
Documents: Hypertext Markup Document HTML XML
Object: Provides properties and methods
Model: Manipulating Hypertext Markup documents using properties and methods
You can use the objects provided by the DOM inside JS to manipulate the markup document using the properties and methods of these objects.
To manipulate a marked document, you first need to encapsulate all the content in the markup document into objects
Encapsulates the text content of an HTML tag property as an object
To work with a marked document, parse the markup document
--parsing the HTML process using the DOM
Assigning a tree structure in memory based on the hierarchy of HTML requires that each part of the HTML be encapsulated as an object
Document object, entire documentation
Write (): Output variable to page (value/html code)
getElementById ("The value of the ID inside the tag"); Get the tag by ID (element)
Gets the property value, Label object. property name;
Set the property value, Label object = value;
Getelementsbyname ("The value of name inside the label"); The return value is an array
getElementsByTagName ("label name") The return value is an array
Element object: Elements (label) object
GetAttribute ("attribute name"): Gets the value inside the attribute Input1.getattribute ("value");
SetAttribute ("Property name", "Property value") set the value inside the property
RemoveAttribute ("name"); Delete the value of the property, but cannot delete the value

Property Object
GetAttributeNode ("attribute name");

Text Object
The--node node object that causes the parent object of the object
If the desired method is not found in the object, this time to the node object to find
NodeName the name of a string node, as defined by the type of the node
NodeValue the value of a string node, as defined by the type of the node
NodeType one of the type constant values of the number node
Ownerdocument document points to the documentation that this node belongs to
Get text node
FirstChild node points to the first nodes in the ChildNodes list
LastChild node points to the last point in the ChildNodes list

-childnodes NodeList List of all child nodes, but browser compatibility is poor
-parentnode node returns the parent of a given node
PreviousSibling node points to the previous sibling, and if the node is the first sibling node, the value is null
NextSibling node points to the latter sibling, if the node is the last sibling node then the value is null

HasChildNodes Boolean Returns True when ChildNodes contains one or more nodes
Attributes Namenodemap contains attr objects that represent the attributes of an element and are used only for element nodes
AppendChild (node) node adds node to the end of ChildNodes
RemoveChild (node) node removes node from childnodes
ReplaceChild (Newnode,oldnode) Node replaces Oldnodes in childnodes with Newnodes
InsertBefore (Newnode,refnode) Node inserts newnode before refnode in ChildNodes

Node Object properties
NodeName
NodeType
NodeValue

<script type= "Text/javascript" >
Get Label Object
var span1 = document.getElementById ("Spanid");
alert (span1.nodetype);//1
alert (span1.nodename);//span
alert (span1.nodevalue);//null

Property
var id1 = Span1.getattributenode ("id");
alert (id1.nodetype);//2
alert (id1.nodename);//id
alert (id1.nodevalue);//spanid

Text
var Text1 = Span1.firstchild;
alert (text1.nodetype);//3
alert (text1.nodename);//#text
alert (text1.nodevalue);//text content
</script>
<span id= "Spanid" > Haha hehe </span>

Js--dom object: Document Object Model documents