JavaScript——BOM和DOM

What is BOM

　　bom: Browser Object Model

What is the DOM

　　dom: Document Object Model

BOM operations:

　　Call the windows of the browser window

　　windows object can call the child objects by point

　　windows.navigator object, you can get browser-related information

　　navigator.appName // Web browser full name 
　　navigator.appVersion // Web browser vendors and detailed version of the string 
　　navigator.userAgent // most of the information the client 
　　operating system navigator.platform // browser is running in

　　screen objects: get screen information

　　screen.navailWidth available screen width

　　screen.availHeight available screen height

　　history contains the browser history, history is said to be two forward and back functions

　　history.forward () forward a

　　history.back () Back

　　Object location: access to information

　　location.href get url

　　location.href = 'URL' to jump to a specific page

　　location "reload () reload the page

　　　Pop-up box: prompt box, alert box, check box

　　1, the alert box:

　　　　ALTER ( 'content');

　　2, confirmation box:

　　　　confirm ( 'Are you sure?')

　　　　For user authentication or receive some information box appears, you need to Ronghu confirmation, click OK to return true, click Cancel, the return value is false　　　　

　　3, the prompt box:

　　　　prompt ( "Enter the information in the box")

　　　　Tip box needs your input, click OK or Cancel will cancel the check box. If confirmed, the return value is entered, if canceled, the return value is null

　　Timing: SetTimeout ()

　　Timing is divided into time:

　　Loop Timing:

　　grammar:

　　　　var t = setTimeout ( "statements", ms)

　　cancel:

　　　　Technical definition is provided in parentheses clearTimeout (t) function

　　Circulating a specified period: setlnterval ()

　　grammar:

　　　　setInterval ( "statement", the time interval)

　　cancel:

　　　　clearInterval ( "set loop variable name")

DOM: the content of the document and abstract conceptualization

NIE slightly dom fixing component is a html document node (node)

　　Documents node: On behalf of the entire document

　　Element node: represents an element (tag)

　　Node text (text object): Representative elements (tags) in the text

　　Attribute node: a representative of properties of elements (tags) have properties

　　JavaScript can create dynamic html by dom:

　　　　JavaScript can change html page for all the elements;

　　　　JavaScript can change all the properties page html

　　　　JavaScript can change all css styles page

　　　　JavaScript can hate pages all the time to respond

　　Find label

　　　　1, a direct lookup

　　　　　　obtaining a label according document.getELementById id

　　　　　　The class attribute acquisition document.getELementsByClassName

　　　　　　document.getElementsByTagName get under the label Label Collection

　　　　2. Indirect Find

　　　　　　parent tag element parentElement

　　　　　　children all sub-labels

　　　　　　The first sub-element tag firstElementChild

　　　　　　lastElementChild last child element tag

　　　　　　netxElementSibling next sibling element tag

　　　　　　previousElementSibling next sibling element tag

Node operation:

　　Create a node:

　　createElement (name tag)

　　Adding nodes:

　　grammar:

　　Append a child node (a child node as the last)

　　somenode.appendChild(newnode);

　　The added nodes to the front of a node:

　　somenode.insertBefore (newnode, a node)　

　　Delete node:

　　grammar:

　　Gets the element you want to delete, which deletes the parent element by calling

　　somenode.removeChild (node to be removed)

　　Replace node:

　　grammar:

　　somenode.replaceChild (newnode, a node);

　　Attribute node:

　　Gets the text value of the node

　　The text value of the node:

　　Get the value

　　grammar:

　　　　elementNode.value

　　Use tags:

　　　　input

　　　　select

　　　　textarea

　　class actions:

　　className get all the style class name (string)

　　classList.remove (cls) Removes the specified class

　　classList.add (cls) add class

　　Returns true classList.contains (cls) is present, whether the return false

　　classList.toggle (cls) exist, remove, or to add

　　Common events:

　　Two binding events approach:

　　　　1, the tag directly call the corresponding event function

　　　　2, js code is automatically find and bind event tag

<div class="bg-red " id="d1"></div>
<button id='b1' onclick='change();'>开关1</button>
<button id='b2'>开关2</button>
<script>
    // 标签直接绑定事件
    function change(){
        var d1Ele = document.getElementById('d1');
        d1Ele.classLict.toggle('bg-green');
    }
    // 通过JS代码绑定事件
    var b2Ele = document.getElementById('b2');
    b2Ele.onclick = ()=>{
        change();
    }

搜索框案例

<input type="text" value="苹果手机" id="i1">
    var i1Ele = document.getElementById('i1');
    i1Ele.onfocus = function (ev) {
        i1Ele.value = '';
        // 也可以直接用this
        this.value = ''
    };
    i1Ele.onblur = function (ev) {
        i1Ele.value = '苹果电脑';
        // 也可以直接用this
        this.value = '苹果电脑'
    }

计时器案例

// 全局变量
var t;
// 步骤1 
// 将当前时间填写到i1中
var now = new Date();
var i1Ele = document.getElementById('i1');
i1Ele.value = now.toLocalString();

// 步骤2(点开始，时间动起来)>>>(每隔一秒执行一次展示时间操作)
    // 将添加时间的功能封装成一个函数
function showTime(){
    var now = new Date();
    var i1Ele = document.getElementById('i1');
    i1Ele.value = now.toLocalString();
};
    // 页面一刷新先展示当前时间
showTime()
    // 找到开始按钮，绑定事件
var b1Ele = document.getElementById('b1');
b1Ele.onclick = function(){
    // 判断是否已经开启过定时器了
    if (!t){
        // t指代定时器
        t = setInterval(showTime,1000);
    }
}

// 步骤3(给停止按钮绑定事件，点击后清除定时器)
var b2Ele = document.getElementById('b1');
b2Ele.onclik = function(){
    // 问题来了，清除谁呢？需要有一个变量指代定时器
    clearInterval(t)；
}

// 步骤4(如果点击多次开始按钮，发现无法清除定时器)
// 判断定时器是否已开启

省市联动（选择省后可以显示选择对应市）

data = {"河北省": ["廊坊", "邯郸"], "北京": ["朝阳区", "海淀区"], "山东": ["威海市", "烟台市"]};
      // 先提前将两个标签对象查找到
    var pEle = document.getElementById('province');
    var cEle = document.getElementById('city');
    // 先展示省份信息
    for (var province in data){
        var proEle = document.createElement('option');
        proEle.innerText = province;
        pEle.appendChild(proEle)
    }
      // 绑定变化事件
    pEle.onchange = function () {
        // 获取对应的省信息
        var currentProvince = pEle.value;
        // 将之前的省对应的市清除
        cEle.innerHTML = '';
      
        // 添加默认的请选择项
        var newEle = document.createElement('option');
        newEle.innerText = '请选择';
        cEle.appendChild(newEle);
      
        // 获取当前省对应的市
        relCity = data[currentProvince];
        // 循环对应的市，添加到市对应的选择框中
        for(var i=0;i<relCity.length;i++){
            var cityEle = document.createElement('option');
            cityEle.innerText = relCity[i];
            cEle.appendChild(cityEle)
        }
    }

JavaScript——BOM和DOM

Guess you like