Document Sınıfı

Giriş
Document sınıfı yerine JQuery kullanmak daha kolay. Document bir arayüz. XML ve HTML için farklı gerçekleştirimler var. Açıklaması şöyle.

The Document interface describes the common properties and methods for any kind of document. Depending on the document's type (e.g. HTML, XML, SVG, …), a larger API is available: HTML documents, served with the "text/html" content type, also implement the HTMLDocument interface, whereas XML and SVG documents implement the XMLDocument interface.

Element is the most general base class from which all objects in a Document inherit. It only has methods and properties common to all kinds of elements. More specific classes inherit from Element. For example, the HTMLElement interface is the base interface for HTML elements, while the SVGElement interface is the basis for all SVG elements. Most functionality is specified further down the class hierarchy.

Kalıtım
Document sınıfı Node arayüzünden kalıtır. Element arayüzü ile ilgisi yoktur. Ancak buna rağmen Element arayüzündekine benzeyen getElementById(),getElementsByTagName() gibi metodlara sahiptir.

constructor
Örnek
Şöyle yaparız.

var doc = new Document();

Örnek
HTML document nesnesi yaratmak için şöyle yaparız.

var doc = document.implementation.createHTMLDocument();
var d = doc.createElement('div');
d instanceof Element; // true;
d instanceof HTMLDivElement; // true
d.constructor.name; // "HTMLDivElement"

Örnek
Bu nesne window sınıfından elde edilebilir. Şöyle yaparız.

var win = window.open();
var doc = win.document;

createElement metodu
Şöyle yaparız.

var d = document.createElement('div');
d instanceof HTMLDivElement; // true
d instanceof Element; // true

getElementById metodu
Element nesnesi döner. Parametre olarak HTML elemanını id kısmında yazan string geçilir.

Örnek

null dönme ihtimaline karşı şöyle yaparız

const button = document.getElementById('button01');
if (button) {
  button.addEventListener('click', newThing);
}

Örnek
Elimizde şöyle bir html olsun.

<form action="#" method="GET">
  <input type="text" name="Flag1" id="f1">
  <input type="text" name="Flag2" id="f2">
</form>

Şöyle yaparız.

function flag(){ 
    document.getElementById("f1").value = "country1";
    document.getElementById("f1").value = "country2";
}

function clean(){
    document.getElementById("country1").value = "";
    document.getElementById("country2").value = "";
}

getElementsByClassName metodu
Açıklaması şöyle.

document.getElementsByClassName returns a list of DOM Node.

Örnek
Şöyle yaparız.

cafeButton.addEventListener('click', function() {
  bg.style.backgroundImage = "url('img/cafe.jpeg')"; //change text colors
  var els = document.getElementsByClassName('topbutton');
  for (var i = 0; i < els.length; i++) {
    els[i].style.color = 'blue';
  }
})

getElementsByTagName metodu
Element dizisi döner.
Örnek
Şöyle yaparız.

var body = doc.getElementsByTagName('body')[0];
var div = doc.createElement('div');
div.innerHTML = 'Hi Mom!';
body.appendChild(div);

querySelector metodu
Açıklaması şöyle.

querySelector is the newer feature.
...
querySelector lets you find elements with rules that can't be expressed with getElementById and getElementsByClassName

Açıklaması şöyle

querySelector method uses CSS3 selectors for querying the DOM.

CSS 3 Identifier açıklaması şöyle. id ile sorgulamak için başa # karakteri getirilir. id string'i içinde uygun olmayan karakterler varsa \\ ile escape edilir.

In CSS, identifiers (including element names, classes, and IDs in selectors) can contain only the characters [a-zA-Z0-9] and ISO 10646 characters U+00A0 and higher, plus the hyphen (-) and the underscore (_); they cannot start with a digit, two hyphens, or a hyphen followed by a digit.

Örnek - class
Şöyle yaparız.

document.querySelector("button").addEventListener("click", function ()
{
  ...
});

Örnek - id escape

Şöyle yaparız.

const elem = document.querySelector("#canvas-\\=");

Örnek - id
Elimizde şöyle bir kod olsun

<input type="time" id="start-time">

Şöyle yaparız. Parametre olarak HTML elemanını id kısmında yazan string'in başına  # karakteri ilave edilerek geçilir.

var stime = document.querySelector("#start-time"),

Örnek - id
Şöyle yaparız

<p id="canvas-">This is a paragraph.</p>

<script>
const elem = document.querySelector("#canvas-");
console.log(elem.innerHTML);
</script>

Örnek - id + tag
Elimizde şöyle bir HTML olsun.

<div id="myDiv">
  <select>
  <option value="1">one</option>
  </select>
</div>

Şöyle yaparız.

const select = document.querySelector("#myDiv select option:checked"); 
console.log(select.textContent); // or .text

Örnek - name
Elimizde şöyle bir kod olsun.

<form name = "calculator">
  <table>
    <tr>
      <input type = "text" name = "display" id = "display" disabled>
    </tr>
    <tr>
      <td><input type = "button" name = "one" value = "1"></td>
      <td><input type = "button" name = "two" value = "2"></td>
      <td><input type = "button" name = "three" value = "3"></td>
      <td><input type = "button" name = "plus" value = "+"></td>
    </tr>
    <tr>
      <td><input type = "button" name = "four" value = "4"></td>
      <td><input type = "button" name = "five" value = "5"></td>
      <td><input type = "button" name = "six" value = "6"></td>
      <td><input type = "button" name = "minus" value = "-"></td>
    </tr>
    <tr>
      <td><input type = "button" name = "seven" value = "7"></td>
      <td><input type = "button" name = "eight" value = "8"></td>
      <td><input type = "button" name = "nine" value = "9"></td>
      <td><input type = "button" name = "multiplicatio" value = "*"></td>
    </tr>
    <tr>
      <td><input type = "button" name = "clear" value = "c"></td>
      <td><input type = "button" name = "0" value = "0"></td>
      <td><input type = "button" name = "equal" value = "="></td>
      <td><input type = "button" name = "division" value = "/"></td>
    </tr>
  </table>
 </form>

Şöyle yaparız.

const calculator = document.querySelector('form[name = "calculator"]');

querySelectorAll metodu
Örnek
Açıklaması şöyle.

In Chrome $$ is an alias for document.querySelectorAll.

Chrome'da şöyle yaparız.

$$("a")

Örnek - class
Elimizde şöyle bir kod olsun

<ul>
  <li class="item">Item 1</li>
  <li class="item">Item 2</li>
  <li class="item">Item 3</li>
 </ul>

Şöyle yaparız

const items = document.querySelectorAll(".item");

for (let i = 0; i < items.length; i++) {
  const item = items[i];
  item.addEventListener("click", changeActiveClass);
}

function changeActiveClass(e)
{
  for (let i = 0; i < items.length; i++) {
    const item = items[i];
    item.classList.remove('active');
  }
  e.target.classList.add('active');
}

Örnek - name
Elimizde şöyle bir kod olsun.

<form name = "calculator">
  <table>
    <tr>
      <input type = "text" name = "display" id = "display" disabled>
    </tr>
    <tr>
      <td><input type = "button" name = "one" value = "1"></td>
      <td><input type = "button" name = "two" value = "2"></td>
      <td><input type = "button" name = "three" value = "3"></td>
      <td><input type = "button" name = "plus" value = "+"></td>
    </tr>
    <tr>
      <td><input type = "button" name = "four" value = "4"></td>
      <td><input type = "button" name = "five" value = "5"></td>
      <td><input type = "button" name = "six" value = "6"></td>
      <td><input type = "button" name = "minus" value = "-"></td>
    </tr>
    <tr>
      <td><input type = "button" name = "seven" value = "7"></td>
      <td><input type = "button" name = "eight" value = "8"></td>
      <td><input type = "button" name = "nine" value = "9"></td>
      <td><input type = "button" name = "multiplicatio" value = "*"></td>
    </tr>
    <tr>
      <td><input type = "button" name = "clear" value = "c"></td>
      <td><input type = "button" name = "0" value = "0"></td>
      <td><input type = "button" name = "equal" value = "="></td>
      <td><input type = "button" name = "division" value = "/"></td>
    </tr>
  </table>
 </form>

Şöyle yaparız.

const btns = document.querySelectorAll(
    `form[name = "calculator"] table tr input[type = "button"]`
  );