JavaWeb-BOM and DOM objects

---

BOM object

1. Brief description of BOM object

• Browser Object Model: Browser Object Model;
• Used to perform browser related operations;
• BOM object , that is, window object ;
• Note: The window object is a built-in object of JavaScript , you can omit the window when you use the window object to call methods;

Second, the message box

• alert("hello world");, Used to pop up a warning box ;
  
• confirm("确定 or 取消");, Confirmation box ; if
  there is a return value, return true if confirm, return false if cancel;
  

Three, cycle timer

• A timer will be created and cyclically executed once called;

sentInterval(调用方法, 毫秒值);
//毫秒值：循环周期

• Cancel the cycle timer:

clearInterval(循环定时器的ID);
注：返回值即为循环定时器的ID；

• Example : execute the run1() method once in two seconds
  

Four, one-time timer

• One call will create and execute a timer once;

setTimeout(调用方法, 毫秒值);

• Cancel the one-time timer:

clearTimeout(ID);

Five, Location object

• The Location object contains the URL information of the browser;
• Get current address:
  
• Set herf attribute: the
  browser will jump to the corresponding path;
  

---

DOM object

1. DOM brief introduction

• Document Object Model: document object model; (document: markup document, namely HTML, etc.);
• DOM encapsulates all content (tags, text, attributes) in markup documents into objects;
• To achieve the purpose of operating or changing the HTML display effect by operating the attributes or methods of the object;

Two, DOM tree introduction

• An HTML document loaded into the browser memory will be loaded as a DOM object ;
  HTML document:
  
  DOM tree:
  
• The characteristics of the DOM tree :
  each DOM tree must have a root node;
  each node is a node object;
  common node relationship: parent-child node relationship;
  text node object has no child nodes; (that is, it is a leaf node);
  each node All have a parent node, zero or more child nodes;
  only the root node has no parent node;

Three, get the element node object

1. Four ways to obtain element objects:

• getElementById();Get the corresponding element object by the element ID;
  you can get the element object by the ID, and return null if not found;
• getElementsByName();Get all the elements that meet the requirements
  through the name attribute of the element; you can get the array of element node objects through the name attribute, and return an empty array if not found;
• getElementsByTagName(); Get all the elements that meet the requirements through the element name attribute (tag name) of the element;
• getElementsByClassName(); Get all the elements that meet the requirements through the class attribute of the element;

Note: The above are all related methods of the DOM object, namely document;
Note : To obtain a certain/some element node object, you must ensure that the element node object is loaded into memory first;

2. Code example

Four, common attributes of element objects

1. value

• 元素对象.value = 属性值; Set the value attribute value of the element object;

2. className

• 元素对象.className = 属性值; Set the class attribute value of the element object;

3. checked

• 元素对象.checked = 属性值;Set the checked attribute value of the element object;
  note: checked="checked" in HTML, true or false is returned in JavaScript;
  you can modify whether the radio/check box is selected or not;
  

4. innerHTML

• 元素对象.innerHTML = 值; Set the content body of the element object;