JavaScript BOM, DOM operations, nodes and tables (2)

BOM operation

1. What is BOM

BOM (Browser Object Model) is the browser object model.
     BOM provides objects that interact with browser windows independently of content;
     BOM consists of a series of related objects, and each object provides many methods and properties;

2. Objects commonly used by BOM

Screen object: size
　　　　window.screen;
　　　　screen.width
　　　　screen.height
　　　　screen.availHeight//Available height = available height - bottom taskbar height
　　　　screen.availWidth//Available width

Location object: address
　　　　console.log(location)
　　　　location.href/ /complete URL address
　　　　location.protocol//protocol name
　　　　location.hostname//hostname
　　　　location.port//port name
　　　　location.host//hostname+port name
　　　　location.pathname//file path
　　　　location.search//from? The starting part
　　　　location.hash//The part starting with #

History object: history
　　　　history.length;//The number of history records used to record the current page jump
　　　　history.forward();//Click to go to the previous page, which is equivalent to the browser's forward button
　　　　history.back(); //Click to go to the next page, which is equivalent to the browser's back button
　　　　history.go(): means to jump to any interface of the browser
　　　　history.go(-1);//The next page, equivalent to history.forward( )
　　　　history.go(0);//The current page, which means to refresh the current page
　　　　history.go(1);//The previous page, equivalent to history.back()

Navigator object: (understand) Return various information about the browser system message.

Commonly used methods in Windows

 Common methods of the Window object:

　　  1.window.alert(): pop-up window output
　　2.window.prompt(): pop-up window input
　　3.window.confirm(): prompt box with confirmation and cancellation. Return true and false respectively.
　　4.window.close(): Close the browser window.
　　5.window.open(): open a new window, parameter 1: address; parameter 2: the name of the new window; parameter 3: various configuration properties of the new window;
　　6.window.setTimeout(): delayer, indicating How many ms delay to execute a function. Parameter 1: function name or anonymous function; parameter 2: mm; parameter 3: parameter passed to the page
　　7.window.setInterval(): timer, executes the function every few milliseconds, and other uses are exactly the same as setTimeout.
　　8.clearInterval(), clearImmediate(): Clear timer and delayer respectively. Declares that the timer can accept an ID, passed to clearInterval().

DOM manipulation

1. The number of DOM nodes　　

　　1. DOM nodes are divided into three categories: element nodes (label nodes), attribute nodes, and text nodes.
　　　　Both the attribute node and the text node are child nodes of the element node, so during operation, you need to select the element node first, and then modify the attributes and text.

2. View element nodes

　　  1. Use the getElement series of methods.

            window.onload = function(){
                var lis  = document.getElementById("first");
                
                var lis1 = document.getElementsByClassName("cls");
                
                var lis2 = document.getElementsByName("na");
                
                var lis3 = document.getElementsByTagName("li");}

 

　　2、注意事项：

　　　　　　(1)ID不能重名，如果ID重复，只能取到第一个。
　　　　　　(2)获取元素节点时，必须等到DOM树加载完成后才能获取。两种方式：①将JS写在文档之后。②如图，写在window.onload中。
　　　　　　(3)通过getElements系列取到的为数组格式，操作时必须取到其中的每一个元素，才能进行操作，而不能直接对数组进行操作。
　　　　　　(4)这一系列方法，也可以先选中DOM节点，从选择的DOM节点中在选择需要的节点。

 

　　3、通过querySelector()系列方法

　　　　(1)传入一个选择器名称，返回找到的第一个元素，通常用于查找ID
　　　　(2)传入一个选择器名称，找到所有元素，无论找到几个，都返回一个数组格式的元素。

 

document.querySelector("#first");
document.querySelectorAll("#div li");

 

3.设置属性节点

　　1.查看属性节点：getAttribute("属性名")
　　2.设置属性节点：setAttribute("属性名"，"属性值")
　　3.删除属性节点：removeAttribute("属性名");
　　4.注意事项：setAttribute()在老版本的IE中会出现兼容性问题,可以使用点符号(.)代替，设置属性。

【JS修改CSS的多种方式】

　　(1)使用setAttribute()设置class和style
　　(2)使用 .className 添加一个class选择器，修改style
　　(3)使用.style.样式  直接修改单个样式，注意样式名必须使用驼峰命名法。
　　(4)使用.style.  或 .style.cssText  直接修改样式。

             document.getElementById("first").setAttribute("class","class1");
             document.getElementById("first").setAttribute("style","color:red;");
             document.getElementById("first").getAttribute("style");//查看CSS
             document.getElementById("first").style.fontSize = "20px";
             document.getElementById("first").removeAttribute("style");//移除CSS
             
             document.getElementById("first").style = "font-size: 20px";//IE不兼容
             document.getElementById("first").style.cssText = "font-size: 20px";

 

4.查看设置文本节点

　　(1)innerHTML ： 取到或者设置一个节点中的HTML代码。
　　(2)innerText： 取到或者设置一个节点中的文本，不能设置HTML代码。

            var s1 = document.getElementById("first").innerHTML;
            document.getElementById("first").innerHTML = "<a>yiyiyi</a>";


            var s2 = document.getElementById("first").innerText;
            document.getElementById("first").innerText = "teset";

 JS中的层次节点

1.基本节点

　　1.childNodes：获取当前节点的所有子节点（元素节点和文本节点）

　　2.children：获取当前节点的所有元素子节点（不包含文本节点）

　　3.parentNode：获取当前元素的父节点。

　　4.firstChild:获取第一个子节点，包括回车符等字符节点

　　5.lastChild：获取最后一个子节点

　　6.firstElementChild:获取第一个元素节点，不含回车符等字符节点。

　　7.lastElementChild:获取最后一个元素节点，不含回车符等字符节点。

　　8.previousSibling：获取当前节点的前一个兄弟节点，包括文本节点

　　9.previousElementSibling：获取当前节点的前一个元素兄弟节点，不包括文本节点。

　　10.nextSibling：取当前节点的后一个兄弟节点，包括文本节点

　　11.nextElementSibling：获取当前节点的后一个元素兄弟节点，不包括文本节点。

　　12.attributes：获取当前节点的属性节点，返回数组模式。

2.创建添加节点

　　1.document.createElement("标签名")：创建一个新节点。
  　　 需要配合setAttribute()为新节点设置属性。

                var img = document.createElement("img");
                img.setAttribute("src","../../01-HTML基本标签/img/Female.gif_temp.bmp");

2. ①父节点.insertBefore(新节点,目标节点)：在父节点中，将新节点插入到目标节点之前。

　　②父节点.appendChild(新节点)：在父节点的最后插入新节点。

　　③原节点.cloneNode(true)：克隆一个节点。

　　　　传入true表示克隆原节点及原节点的所有子节点

　　　　传入false表示只克隆原节点，不可隆其它子节点。

            window.onload = function(){
                var ul = document.getElementById("ul1");
                //插入目标之前
                document.getElementsByTagName("div")[0].insertBefore(img,ul);
                
                //插入到最后
                document.getElementsByTagName("div")[0].appendChild(img);
                //克隆
                var newUL = ul.cloneNode(true);
                document.getElementsByTagName("div")[0].appendChild(newUL);
            }

 

3.删除替换节点

　　①父节点.removeChiled(子节点)：从父节点中，删除指定子节点。

　　②父节点.replaceChild(新节点，老节点)：从父节点中，用新节点替换老节点。

                document.getElementsByTagName("div")[0].removeChild(newUL);
                document.getElementsByTagName("div")[0].replaceChild(img,ul);