About prompt (message) function, it returns a value, the return value is a string type, the following is the code:
<DOCTYPE <HTML>!
<Head>
<Meta HTTP-equiv = "the Type-the Content" Content = "text / html; charset = utf -8" />
<Title> Untitled </ title>
<script type="text/javascript">
var name = prompt ( "Enter your name");
document.write ( "Welcome <strong>" + name + "here </ strong>!");
</ Script>
</ head>
<body>
</ body>
</ HTML>
When the output parameters, the message "Welcome to the parameter values to be here!"
But when Clicking Cancel "Welcome to null here!"
Here are some of the contents of the document
11 attributes of document:
1.title
While we generally have set the document title in the title tag in h5 in, but we can also use js to dynamically change the title of the document, such as my code
as follows:
<HTML>
<head>
<Meta HTTP-equiv = "the Type-the Content" Content = "text / HTML; charset = UTF-. 8" />
<Title> Untitled </ title>
<script type="text/javascript">
There are a = 0;
window.οnlοad=function(){
var t=setInterval("movtitle()",1000);
}
function movtitle(){
if(a==1){
document.title = "Welcome to here!"
a=0;
}else{
document.title="welcome here！";
a=1;
}
}
</ Script>
</ head>
<body>
</ body>
</ HTML>
2.url
to display the current page URL
3.fileCreateDate (creation date)
4.fileModifiedDate (accurate to days)
5.lastModigied (can accurate to the second)
6.fileSize
Here is the code for the calling file date,
<DOCTYPE HTML!>
<head>
<Meta HTTP-equiv = "the Type-the Content" Content = "text / HTML; charset = UTF-. 8" />
<Title> Untitled </ title>
<Script type = "text / JavaScript">
document.write ( "current date document is:" + document.fileCreateDate + "a");
document.write ( "modified date document is:" + document.fileModifiedDate + "a");
document.write ( "last modified date when the document is:" + document.lastModified + "a");
document.write ( "the size of the document is:" + document.fileSize + " <br/> ");
</ Script>
</ head>
<body>
</ body>
</ HTML>
However, only the last modified date can be obtained, and the date is not obtained, while the other date is undefined. I do not know what the reasons are, there are known
road of the great God gets advice
7.fgcolor (former background document)
8.bgcolor (background color of the document)
In fact, this is a two color text color, a background color, background color before is the color of the article, I do not know why the two browser can not display
, one is Baidu, one is Google,
9.linkColor (unvisited hyperlinks)
10.alinkColor (activation status hyperlink)
11.vlinkColor ( hyperlinks visited)
these three methods, Xiao Bian here can not give the demo a result, we do not know the reasons for the browser, just can not show
four basic methods of document
1.document.write ()
2. document.writeln ()
above two methods is actually about the same, all the contents of output, but the output is writeln spaces, but there is no space write, writeln (
"string") = write ( "string \ n "), the <pre> and <xme> the tab reveals different, writeln line is displayed, and the write is a peer
, such as:
document.writeln ( "<pre> output string. 1 </ pre>")
<pre> output string 2 </ pre>
<pre> output string 3 </ pre>
operation result is a 3 line.
3.document.getElementById ()
4.document.getElementsByName ()
The last method should be noted, calling the name of the element of time, when the method is different from the name of the third method
today to learn about some of the new knowledge dom of
First dom in some basic node attributes
1.parentNode
2.childNodes (child nodes)
3.fristChild
4.lastChild
5.previousSibling (a sibling of the current node)
6.nextSibling (next current node)
7.attributes ( attribute list of nodes)
8.nodeValue
9.nodeType
10.nodeName
It should be noted that
the added tag js preferably placed above the closure body, if placed inside the head of the code is not the same as
before when the closure tab into the body code is:
var = E document.getElementById ( "myul");
IF (e.parentNode) {
Alert ( "parent node list is there!");
} (here, "myul" is an element tag id I defined above)
and the head was placed back:
window.οnlοad function = ( ) {
var w=document.querySelector(".fristli");
if(w.firstChild){
alert ( "child node does not exist");
}
} (Here, ".fristli" I classname is defined a tag)
in the node operation is the most common operation node below 5
1. Create a node
2. Remove the node
3. Copy node
4. Replace node
5. Node inserted
Let me say before about how these operations found elements, there are two ways
1.document.getElementById ()
2.doucment.getElementsByName ()
these two are different, the first element of the returned id number the second return an array, returns an index of the element array
of a very simple not to add the code, the code following second method:
<HTML>
<head>
<Meta HTTP-equiv = "Content-Type" content = " text / html; charset = utf-8" />
<title>无标题</title>
</head>
<body>
<input type="radio" value="btn_1" name="btn"/>
<input type="radio" value="btn_2" name="btn"/>
<input type="radio" value="btn_3" name="btn"/>
<input type="radio" value="btn_4" name="btn"/>
<input type="radio" value="btn_5" name="btn"/>
<script type="text/javascript">
alert(document.getElementsByName("btn")[1].value); </script> </body> </html> <Meta HTTP-equiv = "the Type-the Content" Content = "text / HTML; charset = UTF- 8 "/> <head> <HTML> simply requires only four steps can be a string, such as inserting a row insertion node Displays "btn_2"
<title>无标题</title>
</head>
<body>
<input type="radio" value="btn_1" name="btn"/>
<input type="radio" value="btn_2" name="btn"/>
<input type="radio" value="btn_3" name="btn"/>
<input type="radio" value="btn_4" name="btn"/>
<input type="radio" value="btn_5" name="btn"/>
<script type="text/javascript">
var e=document.createElement(
"h1 of")
var TXT = document.createTextNode ( "newly added element here!");
e.appendChild (TXT);
document.body.appendChild (E);
</ Script>
</ body>
</ HTML>
the first row, select the name tag to be inserted, the second line of text to be added, the third line of text is added to the label, the fourth line is to add a label to the page
when the complex is added a button, such as a button button, as follows:
<HTML>
<head>
<Meta HTTP-equiv = "the Type-the Content" Content = "text / HTML; charset = UTF-. 8" />
<title>无标题</title>
</head>
<body>
<input type="radio" value="btn_1" name="btn"/>
<input type="radio" value="btn_2" name="btn"/>
<input type="radio" value="btn_3" name="btn"/>
<input type="radio" value="btn_4" name="btn"/>
<input type="radio" value="btn_5" name="btn"/>
<script type="text/javascript">
var t=document.createElement("input");
t.id="btn_6";
t.type="button";
t.value="按钮";
t.οnclick=function(){
alert(
"Adding new button!");
}
document.body.appendChild (T);
</ Script>
</ body>
</ HTML>
The following is the insertion node, there are two methods,
1.appendChild ()
2.insertBefore ()
The following is added to the li element ul element Code:
<HTML>
<head>
<Meta HTTP-equiv = "the Type-the Content" Content = "text / HTML; charset = UTF-. 8" />
<title>无标题</title>
</head>
<body>
<div>
<ul id="myul">
<li>HTML</li>
<li>javascript</li>
<li>css</li>
</ul>
<input type="text" id="mytext"/>
<input type="button" value="提交按钮" id="mybtn" οnclick="myclick()"/>
</div>
<script type="text/javascript">
function myclick(){
var x=document.createElement("li");
var txt=document.createTextNode(document.getElementById("mytext").value);
var d=document.getElementById("myul");
x.appendChild(txt);
d.appendChild(x);
}
</ Script>
</ body>
</ HTML>
insertBefore () action is to add a new node to the end node of the current
usage: parent node .insertBefore (a new child node, the current node)
the specific code as follows:
<HTML>
<head>
<Meta HTTP-equiv = "the Type-the Content" Content = "text / HTML; charset = UTF-. 8" />
<title>无标题</title>
</head>
<body>
<ul id="myul">
<li>水杯</li>
<li id="myli">手机</li>
<li class="my_li">鼠标</li>
</ul>
<p>请输入内容：<input type="text" id="myinput"/></p>
<p>请输入内容：<input type="text" id="my_input"/></p>
<input type="button" value="添加内容" id="mybtn" οnclick="myclick()"/>
<script type="text/javascript">
function myclick(){
var e=document.createElement("li");
var w=document.createElement("li");
var txt=document.createTextNode(document.getElementById("myinput").value);
var _txt=document.createTextNode(document.getElementById("my_input").value);
e.appendChild(txt);
w.appendChild(_txt);
document.getElementById myul = var ( 'myul');
myul.insertBefore (E, document.getElementById ( 'myli'));
myul.insertBefore (W, document.querySelector ( 'my_li.'));
}
</ Script>
</ body>
</ HTML>
the removeChild () delete node
usage: document.body
for removing byte point, for a, p, span, li is possible, as follows:
<HTML>
<head>
<Meta http- equiv = "Content-Type" content = "text / html; charset = utf-8" />
<title>无标题</title>
</head>
<body>
<ul id="myul">
<li id="myli">手机</li>
<li>鼠标</li>
<li>水杯</li>
</ul>
<a href="#" id="mya">测试</a>
<p id="myp">测试代码</p>
<span id="myspan"> 测试代码2</span>
<input type="button" value="删除" οnclick="mybtn()"/>
<script type="text/javascript">
function mybtn(){
confirm("确定要删除吗？");
var s=document.getElementById('myp');
document.body.removeChild(s);
var sf=document.getElementById('myspan');
document.body.removeChild(sf);
var f=document.getElementById('mya');
document.body.removeChild(f);
var t=document.getElementById('myli');
var l=document.getElementById('myul');
l.removeChild(t);
}
</script>
</body>
</ HTML>
obj.cloneChild (arg) This node is copied, or 1 when arg is true, that the copied node and child node when the copy is 0 or arg is false
the node itself, it does not contain child nodes . Wherein, the node is copied obj in position, as follows:
<HTML>
<head>
<Meta HTTP-equiv = "the Type-the Content" Content = "text / HTML; charset = UTF-. 8" />
<title>无标题</title>
</head>
<body>
<ul id="myul">
<li id="myli">手机</li>
<li>鼠标</li>
<li>水杯</li>
</ul>
<input type="button" value="复制添加" οnclick="myadd()">
<script type="text/javascript">
function myadd(){
var i=document.getElementById('myul');
document.body.appendChild (i.cloneNode (. 1));
}
</ Script>
</ body>
</ HTML>
obj.replaceChild (new new, Old) replacement node, wherein obj is the parent node of node replacement, new new new node, old old node, as follows:
<HTML>
<head>
<Meta HTTP-equiv = "the Type-the Content" Content = "text / HTML; charset = UTF-. 8" />
<title>无标题</title>
</head>
<body>
<h1 id="tit">原文字</h1>
<hr/>
<p> 输入标签：<input type="text" id="reinput"/></p>
<p> 输入文本：<input type="text" id="re_input"/></p>
<input type="button" value="替换" id="rebtn" οnclick="rebtn()" />
<script type="text/javascript">
function rebtn(){
var a=document.getElementById('tit');
var b=document.getElementById('reinput').value;
var c=document.getElementById('re_input').value;
var d=document.createElement(b);
var txt=document.createTextNode(c);
d.appendChild(txt);
document.body.replaceChild(d,a);
}
</script>
</body>
</html>
<DOCTYPE <HTML>!
<Head>
<Meta HTTP-equiv = "the Type-the Content" Content = "text / html; charset = utf -8" />
<Title> Untitled </ title>
<script type="text/javascript">
var name = prompt ( "Enter your name");
document.write ( "Welcome <strong>" + name + "here </ strong>!");
</ Script>
</ head>
<body>
</ body>
</ HTML>
When the output parameters, the message "Welcome to the parameter values to be here!"
But when Clicking Cancel "Welcome to null here!"
Here are some of the contents of the document
11 attributes of document:
1.title
While we generally have set the document title in the title tag in h5 in, but we can also use js to dynamically change the title of the document, such as my code
as follows:
<HTML>
<head>
<Meta HTTP-equiv = "the Type-the Content" Content = "text / HTML; charset = UTF-. 8" />
<Title> Untitled </ title>
<script type="text/javascript">
There are a = 0;
window.οnlοad=function(){
var t=setInterval("movtitle()",1000);
}
function movtitle(){
if(a==1){
document.title = "Welcome to here!"
a=0;
}else{
document.title="welcome here！";
a=1;
}
}
</ Script>
</ head>
<body>
</ body>
</ HTML>
2.url
to display the current page URL
3.fileCreateDate (creation date)
4.fileModifiedDate (accurate to days)
5.lastModigied (can accurate to the second)
6.fileSize
Here is the code for the calling file date,
<DOCTYPE HTML!>
<head>
<Meta HTTP-equiv = "the Type-the Content" Content = "text / HTML; charset = UTF-. 8" />
<Title> Untitled </ title>
<Script type = "text / JavaScript">
document.write ( "current date document is:" + document.fileCreateDate + "a");
document.write ( "modified date document is:" + document.fileModifiedDate + "a");
document.write ( "last modified date when the document is:" + document.lastModified + "a");
document.write ( "the size of the document is:" + document.fileSize + " <br/> ");
</ Script>
</ head>
<body>
</ body>
</ HTML>
However, only the last modified date can be obtained, and the date is not obtained, while the other date is undefined. I do not know what the reasons are, there are known
road of the great God gets advice
7.fgcolor (former background document)
8.bgcolor (background color of the document)
In fact, this is a two color text color, a background color, background color before is the color of the article, I do not know why the two browser can not display
, one is Baidu, one is Google,
9.linkColor (unvisited hyperlinks)
10.alinkColor (activation status hyperlink)
11.vlinkColor ( hyperlinks visited)
these three methods, Xiao Bian here can not give the demo a result, we do not know the reasons for the browser, just can not show
four basic methods of document
1.document.write ()
2. document.writeln ()
above two methods is actually about the same, all the contents of output, but the output is writeln spaces, but there is no space write, writeln (
"string") = write ( "string \ n "), the <pre> and <xme> the tab reveals different, writeln line is displayed, and the write is a peer
, such as:
document.writeln ( "<pre> output string. 1 </ pre>")
<pre> output string 2 </ pre>
<pre> output string 3 </ pre>
operation result is a 3 line.
3.document.getElementById ()
4.document.getElementsByName ()
The last method should be noted, calling the name of the element of time, when the method is different from the name of the third method
today to learn about some of the new knowledge dom of
First dom in some basic node attributes
1.parentNode
2.childNodes (child nodes)
3.fristChild
4.lastChild
5.previousSibling (a sibling of the current node)
6.nextSibling (next current node)
7.attributes ( attribute list of nodes)
8.nodeValue
9.nodeType
10.nodeName
It should be noted that
the added tag js preferably placed above the closure body, if placed inside the head of the code is not the same as
before when the closure tab into the body code is:
var = E document.getElementById ( "myul");
IF (e.parentNode) {
Alert ( "parent node list is there!");
} (here, "myul" is an element tag id I defined above)
and the head was placed back:
window.οnlοad function = ( ) {
var w=document.querySelector(".fristli");
if(w.firstChild){
alert ( "child node does not exist");
}
} (Here, ".fristli" I classname is defined a tag)
in the node operation is the most common operation node below 5
1. Create a node
2. Remove the node
3. Copy node
4. Replace node
5. Node inserted
Let me say before about how these operations found elements, there are two ways
1.document.getElementById ()
2.doucment.getElementsByName ()
these two are different, the first element of the returned id number the second return an array, returns an index of the element array
of a very simple not to add the code, the code following second method:
<HTML>
<head>
<Meta HTTP-equiv = "Content-Type" content = " text / html; charset = utf-8" />
<title>无标题</title>
</head>
<body>
<input type="radio" value="btn_1" name="btn"/>
<input type="radio" value="btn_2" name="btn"/>
<input type="radio" value="btn_3" name="btn"/>
<input type="radio" value="btn_4" name="btn"/>
<input type="radio" value="btn_5" name="btn"/>
<script type="text/javascript">
alert(document.getElementsByName("btn")[1].value); </script> </body> </html> <Meta HTTP-equiv = "the Type-the Content" Content = "text / HTML; charset = UTF- 8 "/> <head> <HTML> simply requires only four steps can be a string, such as inserting a row insertion node Displays "btn_2"
<title>无标题</title>
</head>
<body>
<input type="radio" value="btn_1" name="btn"/>
<input type="radio" value="btn_2" name="btn"/>
<input type="radio" value="btn_3" name="btn"/>
<input type="radio" value="btn_4" name="btn"/>
<input type="radio" value="btn_5" name="btn"/>
<script type="text/javascript">
var e=document.createElement(
"h1 of")
var TXT = document.createTextNode ( "newly added element here!");
e.appendChild (TXT);
document.body.appendChild (E);
</ Script>
</ body>
</ HTML>
the first row, select the name tag to be inserted, the second line of text to be added, the third line of text is added to the label, the fourth line is to add a label to the page
when the complex is added a button, such as a button button, as follows:
<HTML>
<head>
<Meta HTTP-equiv = "the Type-the Content" Content = "text / HTML; charset = UTF-. 8" />
<title>无标题</title>
</head>
<body>
<input type="radio" value="btn_1" name="btn"/>
<input type="radio" value="btn_2" name="btn"/>
<input type="radio" value="btn_3" name="btn"/>
<input type="radio" value="btn_4" name="btn"/>
<input type="radio" value="btn_5" name="btn"/>
<script type="text/javascript">
var t=document.createElement("input");
t.id="btn_6";
t.type="button";
t.value="按钮";
t.οnclick=function(){
alert(
"Adding new button!");
}
document.body.appendChild (T);
</ Script>
</ body>
</ HTML>
The following is the insertion node, there are two methods,
1.appendChild ()
2.insertBefore ()
The following is added to the li element ul element Code:
<HTML>
<head>
<Meta HTTP-equiv = "the Type-the Content" Content = "text / HTML; charset = UTF-. 8" />
<title>无标题</title>
</head>
<body>
<div>
<ul id="myul">
<li>HTML</li>
<li>javascript</li>
<li>css</li>
</ul>
<input type="text" id="mytext"/>
<input type="button" value="提交按钮" id="mybtn" οnclick="myclick()"/>
</div>
<script type="text/javascript">
function myclick(){
var x=document.createElement("li");
var txt=document.createTextNode(document.getElementById("mytext").value);
var d=document.getElementById("myul");
x.appendChild(txt);
d.appendChild(x);
}
</ Script>
</ body>
</ HTML>
insertBefore () action is to add a new node to the end node of the current
usage: parent node .insertBefore (a new child node, the current node)
the specific code as follows:
<HTML>
<head>
<Meta HTTP-equiv = "the Type-the Content" Content = "text / HTML; charset = UTF-. 8" />
<title>无标题</title>
</head>
<body>
<ul id="myul">
<li>水杯</li>
<li id="myli">手机</li>
<li class="my_li">鼠标</li>
</ul>
<p>请输入内容：<input type="text" id="myinput"/></p>
<p>请输入内容：<input type="text" id="my_input"/></p>
<input type="button" value="添加内容" id="mybtn" οnclick="myclick()"/>
<script type="text/javascript">
function myclick(){
var e=document.createElement("li");
var w=document.createElement("li");
var txt=document.createTextNode(document.getElementById("myinput").value);
var _txt=document.createTextNode(document.getElementById("my_input").value);
e.appendChild(txt);
w.appendChild(_txt);
document.getElementById myul = var ( 'myul');
myul.insertBefore (E, document.getElementById ( 'myli'));
myul.insertBefore (W, document.querySelector ( 'my_li.'));
}
</ Script>
</ body>
</ HTML>
the removeChild () delete node
usage: document.body
for removing byte point, for a, p, span, li is possible, as follows:
<HTML>
<head>
<Meta http- equiv = "Content-Type" content = "text / html; charset = utf-8" />
<title>无标题</title>
</head>
<body>
<ul id="myul">
<li id="myli">手机</li>
<li>鼠标</li>
<li>水杯</li>
</ul>
<a href="#" id="mya">测试</a>
<p id="myp">测试代码</p>
<span id="myspan"> 测试代码2</span>
<input type="button" value="删除" οnclick="mybtn()"/>
<script type="text/javascript">
function mybtn(){
confirm("确定要删除吗？");
var s=document.getElementById('myp');
document.body.removeChild(s);
var sf=document.getElementById('myspan');
document.body.removeChild(sf);
var f=document.getElementById('mya');
document.body.removeChild(f);
var t=document.getElementById('myli');
var l=document.getElementById('myul');
l.removeChild(t);
}
</script>
</body>
</ HTML>
obj.cloneChild (arg) This node is copied, or 1 when arg is true, that the copied node and child node when the copy is 0 or arg is false
the node itself, it does not contain child nodes . Wherein, the node is copied obj in position, as follows:
<HTML>
<head>
<Meta HTTP-equiv = "the Type-the Content" Content = "text / HTML; charset = UTF-. 8" />
<title>无标题</title>
</head>
<body>
<ul id="myul">
<li id="myli">手机</li>
<li>鼠标</li>
<li>水杯</li>
</ul>
<input type="button" value="复制添加" οnclick="myadd()">
<script type="text/javascript">
function myadd(){
var i=document.getElementById('myul');
document.body.appendChild (i.cloneNode (. 1));
}
</ Script>
</ body>
</ HTML>
obj.replaceChild (new new, Old) replacement node, wherein obj is the parent node of node replacement, new new new node, old old node, as follows:
<HTML>
<head>
<Meta HTTP-equiv = "the Type-the Content" Content = "text / HTML; charset = UTF-. 8" />
<title>无标题</title>
</head>
<body>
<h1 id="tit">原文字</h1>
<hr/>
<p> 输入标签：<input type="text" id="reinput"/></p>
<p> 输入文本：<input type="text" id="re_input"/></p>
<input type="button" value="替换" id="rebtn" οnclick="rebtn()" />
<script type="text/javascript">
function rebtn(){
var a=document.getElementById('tit');
var b=document.getElementById('reinput').value;
var c=document.getElementById('re_input').value;
var d=document.createElement(b);
var txt=document.createTextNode(c);
d.appendChild(txt);
document.body.replaceChild(d,a);
}
</script>
</body>
</html>
