What Is Dom? (Summary and Importance)

Need help to understand what Document Object Model is?

The DOM is an API exposed by browsers. It's seperate from ECMAScript and it's a well defined specification in the W3C standards.

The API that's exposed by browsers is an implementation of the DOM. One could argue whether or not the implementation is at the C++ level and whether the javascript API is a proxy or not but that isn't an interesting argument.

Generally the DOM and BOM as well as various html5 specification form the host objects that browsers expose through properties on window

And the host objects are nothing more then the innards a browser is exposing to you so you can manipulate the state of the browser, the state of the page and do communication with outside resources.

What is a node in Javascript?

A "node", in this context, is simply an HTML element. The "DOM" is a tree structure that represents the HTML of the website, and every HTML element is a "node". See Document Object Model (DOM).

More specifically, "Node" is an interface that is implemented by multiple other objects, including "document" and "element". All objects implementing the "Node" interface can be treated similarly. The term "node" therefore (in the DOM context) means any object that implements the "Node" interface. Most commonly that is an element object representing an HTML element.

How does browser loads DOM and CSSOM partially?

CSSOM stops parsing. Thus execution of subsequent script tags, and also delays rendering.

Script tags before style tags will execute before CSS is loaded into CSSOM from style tags afterwards.

Style tags that come after script tags will alter CSSOM. And if script accessed styles that are being altered then what it read is outdated. Order matters.

Parsing is stopped not just rendering.

JavaScript blocks parsing because it can modify the document. CSS
can’t modify the document, so it seems like there is no reason for it
to block parsing, right?

However, what if a script asks for style information that hasn’t been
parsed yet? The browser doesn’t know what the script is about to
execute—it may ask for something like the DOM node’s background-color
which depends on the style sheet, or it may expect to access the CSSOM
directly.

Because of this, CSS may block parsing depending on the order of
external style sheets and scripts in the document. If there are
external style sheets placed before scripts in the document, the
construction of DOM and CSSOM objects can interfere with each other.
When the parser gets to a script tag, DOM construction cannot proceed
until the JavaScript finishes executing, and the JavaScript cannot be
executed until the CSS is downloaded, parsed, and the CSSOM is
available

https://hacks.mozilla.org/2017/09/building-the-dom-faster-speculative-parsing-async-defer-and-preload/

What is the difference between properties and attributes in HTML?

When writing HTML source code, you can define attributes on your HTML elements. Then, once the browser parses your code, a corresponding DOM node will be created. This node is an object, and therefore it has properties.

For instance, this HTML element:

<input type="text" value="Name:">

has 2 attributes (type and value).

Once the browser parses this code, a HTMLInputElement object will be created, and this object will contain dozens of properties like: accept, accessKey, align, alt, attributes, autofocus, baseURI, checked, childElementCount, childNodes, children, classList, className, clientHeight, etc.

For a given DOM node object, properties are the properties of that object, and attributes are the elements of the attributes property of that object.

When a DOM node is created for a given HTML element, many of its properties relate to attributes with the same or similar names, but it's not a one-to-one relationship. For instance, for this HTML element:

<input id="the-input" type="text" value="Name:">

the corresponding DOM node will have id,type, and value properties (among others):

The id property is a reflected property for the id attribute: Getting the property reads the attribute value, and setting the property writes the attribute value. id is a pure reflected property, it doesn't modify or limit the value.
The type property is a reflected property for the type attribute: Getting the property reads the attribute value, and setting the property writes the attribute value. type isn't a pure reflected property because it's limited to known values (e.g., the valid types of an input). If you had <input type="foo">, then theInput.getAttribute("type") gives you "foo" but theInput.type gives you "text".
In contrast, the value property doesn't reflect the value attribute. Instead, it's the current value of the input. When the user manually changes the value of the input box, the value property will reflect this change. So if the user inputs "John" into the input box, then:
```
theInput.value // returns "John"
```
whereas:
```
theInput.getAttribute('value') // returns "Name:"
```
The value property reflects the current text-content inside the input box, whereas the value attribute contains the initial text-content of the value attribute from the HTML source code.
So if you want to know what's currently inside the text-box, read the property. If you, however, want to know what the initial value of the text-box was, read the attribute. Or you can use the defaultValue property, which is a pure reflection of the value attribute:
```
theInput.value                 // returns "John"
theInput.getAttribute('value') // returns "Name:"
theInput.defaultValue          // returns "Name:"
```

There are several properties that directly reflect their attribute (rel, id), some are direct reflections with slightly-different names (htmlFor reflects the for attribute, className reflects the class attribute), many that reflect their attribute but with restrictions/modifications (src, href, disabled, multiple), and so on. The spec covers the various kinds of reflection.

adding wrapping tags to text before AND after a specific tag with jquery

DEMO: http://jsfiddle.net/RJktH/

$('.matchingClass').each(function () {
    var t = $(this).html();
    $(this).html('<summary>' + t.replace('<br>', '</summary>'));
});

$('.matchingClass').wrapInner('<details/>');

VSTO Office Word Add-In Development Overview

Document Level Architecture

Document
Template (essentially the same as Document from VSTO's perspective)

"Contained" by the Document.

Document contains the relevant information required to load the Add-In. Does not use Registry.

Application Level Architecture

Add-in

Directly plugged into and loaded by Office. Agnostic to Document. It is registered via Registry keys.

Ribbon

Supported by Visual Designer. It handles state automatically for you.

Ribbon X

It allows a much better customization. It's XAML like. No Visual Designer. It doesn't handle state. You need to handle state on your own, using callbacks.

Word DOM - Document Object Model

   Application
      Documents
         StoryRanges
            Range
         Styles
            Style
      Windows
         Window
            Panes
               Pane

It is nothing special, just another DOM, quite similar to the HTML one. However, it will take some time to get used with it and the information on the Internet is not as abundant as one might hope.

Manipulating the DOM

Directly
VSTO Controls: Windows Forms Controls, Host Controls

Windows Forms Controls

Powerful (supports .NET databinding for example) however they are not really part of Office so they will feel like a nut in a wall.

Host Controls (wrappers around the Interop Word objects)

Bookmark Control - old method, move on, nothing to see here.
XML Node & XML Nodes - deprecated. Removed in USA due to lawsuit.
Content Controls - The future! Support real data binding to hidden XML data field in the XML parts of the document.

Deployment

Click-Once - simple and fast. It adds the Registry entries for you. But it doesn't allow much customization. For example you can have a Click-Once project installed only to the current user.
Windows Installer, Installshield, etc. You need to add the .manifest and the .vsto files to the output. You need to add the registry keys.