-
Notifications
You must be signed in to change notification settings - Fork 1
/
on-js-dom-html-css.html
134 lines (108 loc) · 3.94 KB
/
on-js-dom-html-css.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
<script>
// DOCUMENT OBJECT MODEL + BROWSER OBJECT MODEL
window. // global environment
open() // open a new browser tab
onload // property holding the function to call when the page is fully loaded
// alternative: if(document.readyState == 'complete') { // stuff here }
document.title // change title: document.title = "new title"
document.referrer // referrer to actual page, empty string if none
document.charset
document.activeElement // HTMLElement node currently in focus. Defaults: null while loading, body when loaded
document.readyState // returns 'loading' or 'complete'
document.write('') // displays where the <script> tag is located
// should called inline, not in footer or window.onload or will overwrite all page
document.url // full URL
document.domain // domain of the server
location.href // full URL
location.hostname // domain of the server
location.pathname // current filename or directory part of the URL
location.search // query part from the URL: "?..."
location.protocol // "http" ou "https"
location.reload() // refresh page
location.replace() // change location. Not possible to use back button
screen.width // max screen size possible
screen.height
screen.availWidth // max screen size inside browser
screen.availHeight
history.back() // go back one page
history.go(-1) // go back one page
alert() // alert with ok button -> return true
confirm() // alert with ok and cancel buttons -> return true or false
HTMLElement // H1, P, A, DIV, etc, and is always uppercase!
nodeType == 1 // element
nodeType == 2 // attribute
nodeType == 3 // text
document.nodeType == 9 // true. if (someNode.nodeType == 3) { // stuff here }
document.nodeName === '#document' // true
document.head
document.body
document.createElement('li')
document.getElementById('dude') // case sensitive!
document.getElementsbyTagName('img') | document.images
document.getElementsByClassName('')
document.getElementsByClassName('')[1]
document.querySelectorAll('p strong')
document.querySelector('li.important') // returns an HTMLElement, or null if none matching
.scrollIntoView()
.length
.focus()
.getAttribute('')
.value // the value inserted on input tag
anyNode
.innerHTML
.nodeName | .tagName
.nodeValue
.ownerdocument // its document node
.parentNode
.previousSibling | .nextSibling
.previousElementSibling | .nextElementSibling
.firstElementChild | .lastElementChild
.childElementCount
.firstChild | .lastChild
.childNodes // contains a nodeList - an ordered list of nodes
.childNodes[0] | .childNodes[someNode.childNodes.length - 1]
.hasChildNodes() | .childNodes.length === 0
.appendChild()
.insertBefore()
.hasFocus()
.appendData() // to the end
.deleteData(2, 5) // (offset, chars)
.replaceData(3, 3, '') // (offset, chars, data added)
.insertData(4, '') // (offset, data added)
// Practical examples
function init() { // stuff here }
window.onload = init
// <div id="welcome">hello</div>
document.getElementById('welcome').innerHTML = 'goodbye'
document.getElementById('welcome').firstChild.nodeValue = 'goodbye' // the same
document.getElementById('welcome').firstChild.appendData(' <"me & he">')
document.getElementById('welcome').firstChild.deleteData(2, 3) // (offset, chars)
document.getElementById('welcome').firstChild.appendData(' John')
</script>
<html> <head> <meta> <title> <body>
<header> <nav> <main> <section> <article> <footer>
<div>
<p> <h1> <h2> <h3> <h4> <h5> <h6>
<br> <span> <hr>
<b> <i> <em>
<a href="">
<figure> <picture> <img src="">
<ul> <ol> <dl> <li> <!-- Ordered list | unordered list | detailed list -->
<table> <td> <th> <tr>
<button> <input type="" name=""> <textarea>
<canvas> <video> <audio>
<noscript>
<style>
html {
background: red;
background-color: white;
background-image: "";
background-repeat: ;
color: ;
font: ;
text-align: ;
float: ;
height: ;
width: ;
}
</style>