What is DOM?
To change something on a page, JavaScript needs to get access to all the elements in the HTML document. This portal, along with the methods and properties for adding, moving, changing, or removing HTML elements, is obtained through the Document Object Model (DOM).
In 1998, the first edition of the DOM specification was released. This specification allows access to and manipulation of each individual element in an HTML page.
All browsers have implemented this standard, so the DOM compatibility issue is almost impossible to trace. DOM can be used by JavaScript to read, change HTML, XHTML, and XML documents
Html-dom
Html-dom is scripting HTML files using JavaScript and DOM, and there are many attributes that are specifically html-dom. The advent of html-dom is even earlier than Dom core, which provides some more concise notation to describe the attributes of various HTML elements.
Example: Methods for getting Form objects using Html-dom: document.forms
Css-dom
Css-dom is a CSS-specific operation. In JavaScript, the main function of Css-dom technology is to get and set various properties of a style object. By changing the various properties of a style object, you can make the Web page appear in a variety of different effects
To set the font color of an element's style object: Elements.style.color = "Red";
Find nodes
Element can read the HTML content in the text () method, which is equivalent to the DOM's innerHTML property
Inserting nodes
For example:
<script src= "Jquery.js" ></script>
<script>
$ (function () {
var xj = "<li title= ' banana ' > Banana </li>";
var xg = "<li title= ' watermelon ' > Watermelon </li>";
var ll = "<li title= ' durian ' > Durian </li>";
var bl = "<li title= ' pineapple ' > Pineapple </li>";
var kb = "<li title= ' Kobe Bryant ' > Kobe </li>";
$ ("ul"). Append (XJ); Added in the last
$ (XG). AppendTo ("ul");
$ ("ul"). Prepend (ll); Add again Front
$ (BL). Prependto ("ul");
$ ("ul Li[abc]"). After (KB);
});
</script>
<body>
<ul>
<li title= ' Apple ' > Apple </li>
<li title= ' orange ' abc= ' BC ' > Orange </li>
<li title= ' pineapple ' > Pineapple </li>
</ul>
</body>
Dom operations in jquery