DOM (Document Object Model) objects
- DOM object is a document object model defines a standard method to access and manipulate HTML document, the HTML DOM document presented as a structure with elements, attributes, and text, and its structure is similar to a tree structure.
- In the DOM model, all content pages are regarded as an object, tags, attributes, text, and so on.
- When the browser loads the page, the browser creates a document object (ie DOM objects) of the current page, after all nodes can access the web page DOM objects.
The web page object is parsed into a DOM node as follows
-
Element node: figure above <html>, <body>, <p>, <a> etc. These labels are node elements.
-
Text nodes: the content on the page show the title of the title, text <p> tags and so on and so on CSS text content.
-
Attribute node: node attribute called an element attribute node, href attribute of the tag of <a>, <input> tag property value and the like.
Node operation
- Get HTML code in the DOM object nodes
//通过元素节点id获取节点
document.getElementById();
//通过结点的tag名称获取节点
document.getElementsByTagName();
//通过节点的名称获取，返回一个同样节点名称的数组
document.getElementsByName();
Get parent node by node elements (existing node nodeObj)
- nodeObj.firstChild: If the node is the first child node of the current node can use this method. This property can be implemented recursively, access to the first child node of the parent node can continue to obtain a first child node using the child node, nodeObj.firstChild.firstChild.firstChild ... form.
- nodeObj.lastChild: Obviously, this property is known nodes acquired (parentObj) of the last child, cabinets used to obtain the first node the same way.
- nodeObj.childNodes: Gets an array of all child nodes known nodes, then the array can be processed (loop through to find the desired node).
- nodeObj.children: Get known direct child node of the node array, by after-treatment.
- nodeObj.getElementsByTagName (): all sub-type of the specified node of the current node's child array value
Get the node element by sibling (node existing nodeObj)
- nodeObj.nextSibling: get the next sibling
- nodeObj.previousSibling: get the last sibling
Get the node element by sibling (node existing nodeObj)
- nodeObj.parentNode: get known node's parent
Creating nodes
-
Element node: document.createElement (tagName);
-
Text node: document.createTextNode (text);
-
Property: node.setAttribute (name, value);
Additional nodes (parent parentNode)
-
parentNode.appendChild (child node);
-
parentNode.insertBefore(newnode,oldnode)、
-
parentNode.replaceChild(newnode,oldnode);
Duplication and deletion node (the node is copied copyNode / parent node of the parentNode)
-
copyNode.cloneNode(true/false)
deep copy is true, the node and all child nodes are all replication
false copy as a light: copies only the current node (including attributes) -
parentNode.removeChild (parameters)
Property operations
- Gets the property value node
- itnode: attribute name
- itnode.getAttribute (property name)
-
Set attribute values of nodes
1.itnode. Attribute name = attribute value set
2.itnode.setAttribute (name, value);
//代码中只演示了部分操作
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>js练习</title>
<script type="text/javascript">
function funt1(){
// 1.獲取元素结点
var code1 = document.getElementById('demo1')
// 2.对该结点进行操作
code1.style.backgroundColor = 'blueviolet';
// code1.style.size = 20px;
}
// document.getElementsByTagName(tag标签名称);
function funt2(){
// 1.获取元素结点
var code2 = document.getElementsByTagName('li');
// 访问具体元素结点
code2[0].style.backgroundColor = 'red';
code2.item(1).style.backgroundColor = 'yellow';
}
// document.getElementsByName(name属性值);
function funt3(){
var code3 = document.getElementsByName('demo3');
code3.item(0).style.fontSize = '25px';
code3[0].style.backgroundColor = 'green';
}
// innnerHTML
function funt4(){
// 获取div结点
var code4 = document.getElementById('demo4');
// 重新设置一个html属性
code4.innerHTML = '<h2>那都不是事..........</h2>';
}
function funt5(){
// 获取li对象
var code5 = document.getElementsByTagName('li');
var one_code = code5[0];
// 找出第一个li的下一个<li>
one_code.nextElementSibling.style.backgroundColor = 'red';
// 找出第二个li的上一个li
var two_code = code5[1];
two_code.previousSibling.style.fontSize = '50px';
}
function funt6(){
// 获取结点
var code6 = document.getElementsByTagName('li');
var one_code1 = code6[0];
one_code1.parentNode.style.fontSize = '50px';
}
function funt7(){
var code7 = document.getElementsByTagName('a')[0];
console.log(code7);
console.log('链接'+code7.href);
console.log('提交方式'+code7.method)
}
</script>
</head>
<body>
<!--<di v id="demo1">窗前明月光</div>
<div id="">意识地上霜</div>
<input type="button" value="获取结点" onclick="funt1()" />
-->
<!--
<div>
<ul>
<li>如果努力有用的话</li>
<li>还要天才干什么？</li>
<li>...........</li>
</ul>
<input type="button" value="点我点我" onclick="funt2()" />
</div>
-->
<!--
<ul>
<li name='demo3'>窗前明月光</li>
<li nmae='demo3'>疑是地上霜</li>
<li>举头望明月</li>
<li>低头思故乡</li>
</ul>
-->
<!--
<div id="demo4"></div>
<p>>>>>>>>:</p>
<input type="button" value="点我点我" onclick="funt4()" />
-->
<ul>
<li>床前明月光</li>
<li>疑是地上霜</li>
<li>举头望明月</li>
<li>低头思故乡</li>
</ul>
<a href="www.baidu.com">百度</a>
<a href="www.taobao.com">淘宝</a>
<input type="button" value="点我点我" onclick="funt7()" />
</body>
</html>
BOM (Browser Object Model) objects
Browser object model to rely on the window object represents the browser window and the page visible area.
window object
-
window.alert ()
pop-up warning box -
window.confirm ()
pop-up confirmation box -
window.prompt ()
popup input box -
window.open ( "url address", "_ black or _self", "size of the new window")
to open a new window -
close ()
Close the current page
Timers, Clear Timer
-
setTimeout (function, time)
Timer -
setInterval (function, time)
delay -
clearTimeout (timer value returned)
Clear timers
The location object
- location.herf = 'url address'
- Returns the server host name and port number
- Returns the file name and directory pathname
- Returns the specified port the port number in the URL, such as the port number does not include the url returns an empty string
- portocol Back to the protocol used, http: / https:
Navigator objects
- see the browser version information
screen objects
- height: get high the entire screen.
- width: get the entire width of the screen.
- availHeight: High High subtracting the entire screen system components
- availWidth: Width Width of system components by subtracting the entire screen
//对上述的部分对象属性方法进行使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>作业3</title>
<!-- 作业三：将作业1，2合并为一到题。计数器数字能被3整除变换背景颜色，数字能被8整除自动打开页面，页面计数到5自动关闭页面 -->
<script type="text/javascript">
// 定义一个计数器的初始值
var initial=0;
// 计数器计数函数
function start_count() {
// 获取input对象
var input_obj = document.getElementById('count');
// 通过对象获取input对象的value属性
input_obj.value = '该计数器的值是'+initial;
// 计数+1
initial=initial+1;
// 判断当计数器的值为30时弹出窗口自动关闭网页(自己加了一个提示网页关闭的弹窗)
if (initial % 3 == 0){
setTimeout('funt_color()',1000);
setTimeout("start_count()",1000);
}else if(initial % 8 == 0){
setTimeout('open_win()',1000);
setTimeout('start_count()',1000);
}else if (initial % 3 ==0 && initial % 8 == 0){
setTimeout('funt_color()',1000);
setTimeout('open_win()',1000);
setTimeout('start_count()',1000);
console.log('你好啊..........')
}else{
setTimeout('start_count()',1000);
}
}
//定义一个打开页面的函数
function open_win(){
// 新窗口的url
var win_url = '';
// 窗口名称
var win_name = 'window新窗口'
// 新窗口的属性值
var win_width = 600;
var win_height = 400;
var screen_width = screen.width;
var screen_height = screen.height;
var x = (screen_width-win_width)/2;
var y = (screen_height-win_height)/2-50;
var options = "width="+win_width+",height="+win_height+",left="+x+",top="+y;
win_obj = window.open(win_url,win_name,options);
//新窗口在5秒钟后，自动关闭
win_obj.setTimeout("window.close()",5000);
}
var color_str = '#';
// 定义随机背景函数
function funt_color(){
/*随机产生十六进制的颜色值*/
var arr_color = ["0","1","2","3","4","5","6","7","8","9","A","B","C","D","E","F"];
// 循环从列表中拿取6次，取到6个不同的值
for(var i = 0; i < 6; i++)
{
// 产生一个1---------16之间的整数，作为下标，去数组中取值
var random_color = Math.floor(Math.random()*16);
// 产生的随机数*16,所以取不到0，所以随机数-1
color_str += arr_color[random_color-1];
}
// 将rgb颜色表示弹出来
// document.write('<h3 style="text-align: center;">16进制颜色表示为:'+color_str+'</h3>');
// 设置背景
document.body.bgColor = color_str;
}
</script>
<!-- 计数器显示的input框的样式 -->
<style type="text/css">
input {
width: 200px;
height: 50px;
text-align: center;
font-size: 20px;
line-height: 50px;
margin: 50px 42%;
}
</style>
</head>
<!-- 给body绑定网页打开自动触发函数 -->
<body onload="start_count()">
<input type="button" id="count" value="该计数器的值是0"/>
</body>
</html>
