dom-discussion.MD

DOM and Frontend File Setup

• How do you link a JavaScript file to an HTML document?
• How do you link a CSS file to an HTML document?
• What are the roles of HTML, CSS, and JavaScript on a webpage?
• What are elements
• What are attributes in HTML
• How can we interact with HTML
• What is the DOM? How is it related to HTML, CSS, and JavaScript?
• How does HTML get rendered into DOM

1. By using a script tag and in the src we input the javascript file name
2. using link tag
3. html -- the content/structure, css -- styling, js -- function/manipulation
4. the datastructures in html including classes, tags, content
5. additional features to data structures
6. by manipulating attributes, linking external files, like onclick
7. it is the interface that we manipulate its contents, style and functionality through HTML, CSS and JS.
8. Data is sent over the Internet as byte packets. The browser must convert these data bytes into a form it understands. Firstly, bytes are converted to HTML characters and then to Tokens. In the next step, Tokens are converted into nodes. Nodes are different objects with certain properties. After the nodes are created, the DOM tree is created.

Burcu Bayram, Ceren Şahin, Maral Kepenekli, İbrahim Ahmedoğlu, Abdulrahman Alsamaraie

S.Barış Yılmaz to Everyone 2:04 PM
How do you link a JavaScript file to an HTML document?
How do you link a CSS file to an HTML document?
What are the roles of HTML, CSS, and JavaScript on a webpage?
What are elements
What are attributes in HTML
How can we interact with HTML
What is the DOM? How is it related to HTML, CSS, and JavaScript?
How does HTML get rendered into DOM
Vuslat Sena Emre to Everyone 2:04 PM
https://gist.github.com/muslimomar/5c97467667ecfbf9e29f5f4f298ec611
You to Everyone 2:04 PM
https://gist.github.com/muslimomar/5c97467667ecfbf9e29f5f4f298ec611
S.Barış Yılmaz to Everyone 2:08 PM
1- script tag with src attribute linked to js file also we can use our scripts in script tag in html file

2- Link tag with src attribute linked to css file.

3- html for structure, css for design, js for functional behavior
medetcan diler to Everyone 2:10 PM
The element is the root element and it defines the whole HTML document.
S.Barış Yılmaz to Everyone 2:10 PM
4- Elements are HTML tags, The element is the root element and it defines the whole HTML document.
medetcan diler to Everyone 2:11 PM
The HTML element is everything from the start tag to the end tag:
S.Barış Yılmaz to Everyone 2:13 PM
5- All html attributes gets attributes and provide additional information about HTML elements to costumise design their and behavior
7- DOM is document object model which is created by html css and modified by html css and js
You to Everyone 2:17 PM
When a web browser loads an HTML document, it parses the HTML code and generates the DOM (Document Object Model) tree. This process is called "parsing".

Here's an overview of how HTML is rendered into the DOM:

The web browser reads the HTML code of the web page, starting from the top of the document.

As it reads the HTML code, the browser identifies each HTML element and creates a corresponding node in the DOM tree. For example, the , , , and

elements are all represented as nodes in the DOM tree.

The browser also creates text nodes in the DOM tree to represent any text content within HTML elements.
Overall, the process of rendering HTML into the DOM involves parsing the HTML code, creating nodes in the DOM tree to represent HTML elements, and then combining the DOM with CSS and JavaScript to create the final render tree that is used to display the web page in the browser.
S.Barış Yılmaz to Everyone 2:18 PM
Room - 8

1- script tag with src attribute linked to js file also we can use our scripts in script tag in html file

2- Link tag with src attribute linked to css file.

3- html for structure, css for design, js for functional behavior

4- Elements are HTML tags, The element is the root element and it defines the whole HTML document.

5- All html attributes gets attributes and provide additional information about HTML elements to costumise design their and behavior

6- we can interact with HTML thoroug js and css

7- DOM is document object model which is created by html css and modified by html css and js

8- The process of rendering HTML into the DOM involves parsing the HTML code, creating nodes in the DOM tree to represent HTML elements, and then combining the DOM with CSS and JavaScript to create the final render tree that is used to display the web page in the browser.

S.Barış Yılmaz to Everyone 2:04 PM
How do you link a JavaScript file to an HTML document?
How do you link a CSS file to an HTML document?
What are the roles of HTML, CSS, and JavaScript on a webpage?
What are elements
What are attributes in HTML
How can we interact with HTML
What is the DOM? How is it related to HTML, CSS, and JavaScript?
How does HTML get rendered into DOM
Vuslat Sena Emre to Everyone 2:04 PM
https://gist.github.com/muslimomar/5c97467667ecfbf9e29f5f4f298ec611
You to Everyone 2:04 PM
https://gist.github.com/muslimomar/5c97467667ecfbf9e29f5f4f298ec611
S.Barış Yılmaz to Everyone 2:08 PM
1- script tag with src attribute linked to js file also we can use our scripts in script tag in html file

2- Link tag with src attribute linked to css file.

3- html for structure, css for design, js for functional behavior
medetcan diler to Everyone 2:10 PM
The element is the root element and it defines the whole HTML document.
S.Barış Yılmaz to Everyone 2:10 PM
4- Elements are HTML tags, The element is the root element and it defines the whole HTML document.
medetcan diler to Everyone 2:11 PM
The HTML element is everything from the start tag to the end tag:
S.Barış Yılmaz to Everyone 2:13 PM
5- All html attributes gets attributes and provide additional information about HTML elements to costumise design their and behavior
7- DOM is document object model which is created by html css and modified by html css and js
You to Everyone 2:17 PM
When a web browser loads an HTML document, it parses the HTML code and generates the DOM (Document Object Model) tree. This process is called "parsing".

Here's an overview of how HTML is rendered into the DOM:

The web browser reads the HTML code of the web page, starting from the top of the document.

As it reads the HTML code, the browser identifies each HTML element and creates a corresponding node in the DOM tree. For example, the , , , and

elements are all represented as nodes in the DOM tree.

The browser also creates text nodes in the DOM tree to represent any text content within HTML elements.
Overall, the process of rendering HTML into the DOM involves parsing the HTML code, creating nodes in the DOM tree to represent HTML elements, and then combining the DOM with CSS and JavaScript to create the final render tree that is used to display the web page in the browser.
S.Barış Yılmaz to Everyone 2:18 PM
Room - 8

1- script tag with src attribute linked to js file also we can use our scripts in script tag in html file

2- Link tag with src attribute linked to css file.

3- html for structure, css for design, js for functional behavior

4- Elements are HTML tags, The element is the root element and it defines the whole HTML document.

5- All html attributes gets attributes and provide additional information about HTML elements to costumise design their and behavior

6- we can interact with HTML thoroug js and css

7- DOM is document object model which is created by html css and modified by html css and js

8- The process of rendering HTML into the DOM involves parsing the HTML code, creating nodes in the DOM tree to represent HTML elements, and then combining the DOM with CSS and JavaScript to create the final render tree that is used to display the web page in the browser.

S.Barış Yılmaz to Everyone 2:04 PM
How do you link a JavaScript file to an HTML document?
How do you link a CSS file to an HTML document?
What are the roles of HTML, CSS, and JavaScript on a webpage?
What are elements
What are attributes in HTML
How can we interact with HTML
What is the DOM? How is it related to HTML, CSS, and JavaScript?
How does HTML get rendered into DOM
Vuslat Sena Emre to Everyone 2:04 PM
https://gist.github.com/muslimomar/5c97467667ecfbf9e29f5f4f298ec611
You to Everyone 2:04 PM
https://gist.github.com/muslimomar/5c97467667ecfbf9e29f5f4f298ec611
S.Barış Yılmaz to Everyone 2:08 PM
1- script tag with src attribute linked to js file also we can use our scripts in script tag in html file

2- Link tag with src attribute linked to css file.

3- html for structure, css for design, js for functional behavior
medetcan diler to Everyone 2:10 PM
The element is the root element and it defines the whole HTML document.
S.Barış Yılmaz to Everyone 2:10 PM
4- Elements are HTML tags, The element is the root element and it defines the whole HTML document.
medetcan diler to Everyone 2:11 PM
The HTML element is everything from the start tag to the end tag:
S.Barış Yılmaz to Everyone 2:13 PM
5- All html attributes gets attributes and provide additional information about HTML elements to costumise design their and behavior
7- DOM is document object model which is created by html css and modified by html css and js
You to Everyone 2:17 PM
When a web browser loads an HTML document, it parses the HTML code and generates the DOM (Document Object Model) tree. This process is called "parsing".

Here's an overview of how HTML is rendered into the DOM:

The web browser reads the HTML code of the web page, starting from the top of the document.

As it reads the HTML code, the browser identifies each HTML element and creates a corresponding node in the DOM tree. For example, the , , , and

elements are all represented as nodes in the DOM tree.

The browser also creates text nodes in the DOM tree to represent any text content within HTML elements.
Overall, the process of rendering HTML into the DOM involves parsing the HTML code, creating nodes in the DOM tree to represent HTML elements, and then combining the DOM with CSS and JavaScript to create the final render tree that is used to display the web page in the browser.
S.Barış Yılmaz to Everyone 2:18 PM
Room - 8

1- script tag with src attribute linked to js file also we can use our scripts in script tag in html file

2- Link tag with src attribute linked to css file.

3- html for structure, css for design, js for functional behavior

4- Elements are HTML tags, The element is the root element and it defines the whole HTML document.

5- All html attributes gets attributes and provide additional information about HTML elements to costumise design their and behavior

6- we can interact with HTML thoroug js and css

7- DOM is document object model which is created by html css and modified by html css and js

8- The process of rendering HTML into the DOM involves parsing the HTML code, creating nodes in the DOM tree to represent HTML elements, and then combining the DOM with CSS and JavaScript to create the final render tree that is used to display the web page in the browser.

1. <script src='...'></script> bottom of the body element
2. in header
3. HTML is for skeleton, CSS is clothes, JS is brain
4. They are defined by tags, which are enclosed in angle brackets "<>" and are used to define the structure and content of the page. Some common HTML elements include (source: lovely GPT)
5. they provide additional information about an HTML element
6. Using DOM in JS.
7. It allows us to interact with HTML elements and change their content and styles using JavaScript.
8. CHAT GPT When a web page is loaded in a browser, the HTML code is parsed and transformed into a document object model (DOM) tree. This process is known as HTML parsing. The DOM tree is a hierarchical representation of the HTML document, and it allows the browser to understand the structure and content of the page.

The parsing process involves several steps:
Tokenization: The HTML code is broken down into a series of tokens, which are essentially individual elements or characters with specific meanings.
Lexing: The tokens are then organized into a set of rules that define how they can be combined to form valid HTML elements.
Parsing: The browser applies these rules to the tokens to create a hierarchical representation of the document, known as the DOM tree.

1.<script src="myscripts.js"></script>
2.
3.HTML Content and basic structure, CSS Gives style and structure to the content, JS Behaviour of the website
4. The blocks appear in the web page from the start tag to the end tag like p, a, table or any other HTML element.
5. Attributes provide additional information about elements
6. by using forms ,buttons ,checkboxes, DOM
7. DOM The Document Object Mode like a middle layer between programmer and the user, the way, programming languages can interact with the page.
8. Data is sent over the Internet as byte packets. The browser must convert these data bytes into a form it understands. Firstly, bytes are converted to HTML characters and then to Tokens. In the next step, Tokens are converted into nodes. Nodes are different objects with certain properties. After the nodes are created, the DOM tree is created.