JavaWeb Learning Notes Sharing (must-read)

Author：Eve Cole Update Time：2025-04-09 04:32:01

Custom list

<dl></dl>: represents the range of the list

**Inside <dt></dt>: upper content

**Inside <dd></dd>: Lower content

Ordered list

<ol></ol>: Range of ordered list

--Attribute type: Set the sorting method, 1 (default), a, i,

**In the ol tag <li>specific content</li>

Unordered list

<ul></ul>: Range of unordered list

--Attribute type: circle (hollow circle), disc (default solid circle), square (solid square)

**In the ul tag <li>specific content</li>

Image tags

--Attributes: src, width, height, alt (the text displayed on the picture, move the mouse to the picture, stay for a while to display the content or the text displayed when the picture is displayed incorrectly, but some browsers do not display it, and there is no effect)

** <img src="Page of Picture"/>

Introduction to paths

*Category: Two categories

**Absolute path eg. http://www.baidu.com/b.jpg

***Three relative paths The location of one file relative to another file

--The html file and picture are in the same path (directory), and the file name can be written directly

--In the html file, use the a.jpg file under the img folder under the same path as it is: img/a.jpg

**d:/htmlstudy/code/4.html

**d:/htmlstudy/code/img/a.jpg

--The picture is in the upper directory of the html file. At this time, the image usage method: ../c.png ../ represents the upper path

Hyperlink tags

** Link Resources

-- <a href="Path to Link to Resource">Content displayed on the page</a>

**href: The address of the linked resource

**target: Set the opening method, the default is to open on the current page

--_blank : Opens in a new window

--_self: Open the default page

--<a href="#">Link title</a>: When the hyperlink does not need to jump to the page, just add # (placeholder) to the href

**Location resources

--If you want to locate resources: define a location

--Back to this location

--As-is-output tag: <pre>Content that needs to be entered as-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is-is

Table tags

* Function: It can format the data to make the data display clearer

*Attribute border (table line thickness) bordercolor (table line color) cellpacing (cell distance) width height

*<table></table> : Indicates the range of the table

**In the table, it means a line <tr></tr>

--Set the alignment align: left center right

***In tr, it indicates the cell in a row <td></td>

**Use th can also represent cells: it can achieve centering and bolding

*The title of the table is placed in the table <caption></caption>

*Operation skills:

**First count how many rows are there, and count how many cells are there in each row

*Merge cells

**rowspan: Cross-row (vertical merge)

**colspan: Cross-column (horizontal merge)

<td colspan="3" align="center">Form exercises</td>

Form Tags

*For example, when registering Kaixin.com, you can submit data to Kaixin.com’s server. This process can be implemented using form tags.

* <form></form> : Define a form scope

*property:

** action: The address submitted to, the default submission to the current page

** method: the form submission method

--There are two commonly used ones: get and post, which is the default get request

** The difference between get and post

1) The get request address bar will carry the submitted data, and the post will not carry it (the data is in the request body)

2) Get request security level is lower and post is higher

3) There is a limit on the data size of the get request, but there is no limit on the post

** enctype: This property is not required for requests, and this property needs to be set when uploading files.

**Input item: The part where content can be entered or selected

-- Most input items can be used with <input type="input item type"/>

**********In the input item, you need to have a name attribute

***Normal input: <input type="text"/>

*** Password input item: <input type="password"/>

***Single-choice input: <input type="radio"/>

--Attribute name is required inside

--name attribute value must be the same

-- There must be a value value

****Implement the default selected properties

***checked="checked"

***Check input: <input type="checkbox"/>

**Attribute name is required inside

**name attribute value must be the same

** There must be a value value

****Implement the default selected properties

----checked="checked"

***File input item: <input type="file"/>

*** Pull-down input item (not in the input tag)

<option value="0">Please select</option>

</select>

****Implement the default selected properties

----selected="selected"

*** Text field (such as: fill in the box for profile of personal information when registering an account)

***Hidden item (not displayed on the page, but exists in the html code)

***Submit Button

--Address before submission: C:/Users/HappyDog/Desktop/index.html

**When the name attribute is written in the input item

--file:///c:/users/happydog/desktop/index.html?phone=123123&pwd=12321312&sex=man&love=y&love=pp&birth=1992&tex=1231245

**? The value of the input item name = the value of the input&

** Parameters are similar to key-value form

***Use (click) images to submit

***Reset button: Return to the initial state of the input item

*** Normal buttons (used with js)

Case: Use form tags to implement registration page

When the content of a table cell is empty, placeholders ((escaped spaces)) are generally filled.

Use of other common tags in html

** b(bold) s(strike line) u(underline) i(italic) pre(output as is) sub(subscript) sup(superscript) div(line wrap) span(display on one line) p(paragraph label)

Use of html header tag

**html two parts make up the head and body

**The label in the head is the head label

**title tag: indicates the content displayed on the tag

**<meta> tag: some related content of the setting page

--<meta name="keywords" content="" />

--<meta http-equiv="refresh" content="10;url=Test_form.html" />Speed to the specified page regularly

**base tag: set basic settings for hyperlinks

--The hyperlink opening method can be set uniformly<base target="_blank" />

**link tag: Introduce external files

Use of frame tags

**<frameset>

**rows: divide by row

<frameset rows="80,*"> Divide into two parts, top 80, bottom 80

**cols: divide by column

<frameset cols="80,*"> Divide into two parts, left and right at 80, any one on the left and right at any time

**<frame> The specific page displayed

**<frame name="lower_left" src="b.html">

*When using frame tags, they cannot be written in the head and body. If the frame tag is used, the body needs to be removed and written outside the head.

*If the hyperlink on the page on the left and want the content to be displayed on the page on the right, you can set the target property in the hyperlink and set the value of the target to the name in the frame.

**<a href="http://www.baidu.com" target="right">Baidu</a><br/>

</frameset>

Knowledge summary

1) HTML operation idea: use tags to wrap the data to be operated, and change the data style in the tag by modifying the attribute value of the tag.

2) font tag attribute: size value range 1-7 color: hexadecimal number #ffffff

3) Title tag <h1></h1>......<h6></h6>: From h1 to h6, the font is getting smaller and smaller, and the line is automatically changed

4) Comments

Introduction to CSS

**CSS: Cascading Style Sheet

** Layered: layer by layer

** Stylesheet: Many attributes and attribute values

**Make the page display better

**CSS separates web page content and display style, improving display function

How to combine CSS and html (four ways to combine)

1) There is a property style on each html tag, combining CSS and html together

-- <div style="background-color:red;color:green;" id="" >The way of heaven reduces the excess and makes up for the deficiency. Therefore, the emptiness defeats the real, and the insufficient one overcomes the excess. </div>

2) Use a tag of html to implement the <style> tag and write it in the head

-- <style type="text/css">

css code;

</style>

--- Code implementation <head>

div{

background-color:blue;

color:red;

}

</style>

</head>

<body>

The way of heaven reduces the excess and makes up for the deficiency. Therefore, the emptiness overcomes the real, and the lack of deficiency overcomes the excess.

</div>

</body>

3) Use statements in the style tag

@import url(path of css file);

-- Step 1: Create a css file

--- <style type="text/css">

@import url(div.css);

</style>

4) Use the header tag link to introduce external css file and place it in <head></head>

-- Step 1: Create a css file

-- <link rel="stylesheet" type="text/css" href="path of css file"/>

****The disadvantage of the third combination method: it does not work in some browsers, and the fourth method is generally used

****Priority (General)

From top to bottom, from inside to outside, priority from low to high.

The priority of the post-load is high

****Format: Selector name {Attribute name:Attribute value;Attribute name:Attribute value;......}

Basic selectors for css (three types)

**Operate the data in that tag

1) Tag selector div {css code}

--Use the label name as the name of the selector

<head>

div{

background-color:blue;

color:red;

}

</style>

</head>

<body>

<div>aaaaa</div>

</body>

2) class selector. Name {}

**Each html tag has a property class

**<head>

div.test{

background-color:blue;

color:red;

}

p.test{

background-color:blue;

color:red;

}

It can be abbreviated as:

.test{

background-color:blue;

color:red;

}

</style>

</head>

**<body>

<div>aaaaa</div>

<p>bbbbbbbbbb</p>

</body>

3) id selector #name {}

** Each html tag has an attribute id

--<div id="test">cccccccccccc</div>

--<head>

div#test{

background-color:blue;

color:red;

}

p#test{

background-color:blue;

color:red;

}

It can be abbreviated as:

#test {

background-color:blue;

color:red;

}

</style>

</head>

--<body>

<div id="test">aaaaa</div>

<p id="test">bbbbbbbbbb</p>

</body>

**Priority style > id selector > class selector > tag selector

CSS Extension Selector (Learn)

1) Settings of styles for nested labels for association selectors

**<div><p>wwwwwwwww</p></div>

**Set the style of the p tag in the div tag and the style of the nested tag

--<head>

div p {

background-color:blue;

color:red;

}

</style>

</head>

--<body>

<div><p>wwwwwwwww</p></div>

<p>aaaaa</p>

</body>

2) Combining selector different labels set the same style

**<div>1111</div>

**Set div and p tags to the same style, and set different tags to the same style

--<head>

div,p {

background-color:blue;

color:red;

}

</style>

</head>

--<body>

</body>

3) Pseudo (class) element selector

** css provides some well-defined styles, which can be used

**For example, hyperlink

**Status of hyperlinks

--After clicking and clicking on the original state

:link :hover :active :visited

Code implementation:

<head>

/*Original state*/

a:link {

background-color:red;

}

/*Hoom status*/

a:hover {

background-color:green;

}

/*Click Status*/

a:active {

background-color:blue;

}

/*Status after click*/

a: visited {

background-color:gray;

}

</style>

</head>

<body>

<a href="http://www.baidu.com">Click on the link to Baidu web page</a>

</body>

CSS's box model (understand) To operate on data, you need to put the data into an area (div)

1) Border border: Unified settings

You can also set it separately: upper border-top lower: border-bottom left: border-left right: border-right

--<head>

div {

width: 200px;

height: 100px;

border: 2px solid blue;

}

#div12 {

border-right: 2px dashed yellow;

}

</style>

</head>

--<body>

<div id="div11">AAAAAAAAAA</div>

<div id="div12">BBBBBBBBB</div>

</body>

2) Inner margin padding: Set the distance between the content from the upper, lower, left and right sides

You can also set it separately: up, down, left and right

<head>

div {

width: 200px;

height: 100px;

border: 2px solid blue;

}

#div21 {

padding: 20px;

}

#div22 {

padding-left: 30px;

}

</style>

</head>

<body>

<div id="div21">AAAAAAAAAA</div>

<div id="div22">BBBBBBBBB</div>

</body>

3) Margin: Set the distance between the div from the outermost four sides

You can also set it separately: up, down, left and right. . .

CSS's layout float (understand) float: left right

Positioning of CSS layout (understand)

*position

**Attribute value:

--static: default value, no special positioning

--absolute:

Drag the object from the document stream and use left, right, top, bottom and other properties to absolutely locate it

--relative: The object will not be dragged out from the document stream. The object cannot be stacked, but it will be offset in the normal document stream based on the properties such as left, right, top, bottom, etc.

Case: mixed picture and text

**Pictures and texts are displayed together

Case: Image Signature

Introduction to javascript: It is an object-driven scripting language, mainly used in the client

*Object-based: Many objects are provided, you can use them directly

* Event-driven: HTML makes website static effects, JavaScript dynamic effects

*Client: specifically refers to the browser

* Features of js:

1) Dynamic interaction of interactive information

2) Security js cannot access files on local disk

3) Cross-platform Java, virtual machines; as long as browsers that can support JS, they can run

*Difference between javascript and java: There is no relationship between the two

1) Java is Sun Company, now Oracle; js is Netscape Company

2) Java is object-oriented, and js is object-based

3) Java is a strongly typed language, and js is a weakly typed language

--For example: int i = "10" in java; will report an error

--js: var i = 10; var i = "10"; no errors are reported

4) JS only needs to be parsed to execute, while java needs to be compiled into a bytecode file first, and then execute it

*JS composition (three parts):

1) ECMAScript

-- ECMA: European Computer Association

--JS syntax and statements organized by ECMA...

2) BOM

--broswer object model:browser object model

3) DOM

--document object model: document object model

How to combine js and html (two types)

1) Use a tag <script type="text/javascript"> js code;</script>

2) Use script tags to introduce an external js file

-- Create a js file and write js code

-- <script type="text/javascript" src="js path"></script>

Note: When using the second method, don't write js code in the script tag, it won't be executed.

js' primitive types and declare variables

*Basic data type of java: byte short int long float double char bolean

*JS defines variables with keyword var

*JS's original type (five)

--string string var str = "abc";

--number numeric type var m = 123;

--boolean true and false var flag = true;

--null var date = new Date();

** Get the reference to the object. null means that the object reference is empty, and all references to the object are also object.

--undifined Defines a variable, but does not assign var aa;

* typeof(variable name) View the data type of the current variable

js statement

**The statement if judgment in java ("=" means assignment; "==" equal to, means judgment) switch statement loop statement (for while do-while)

**JS's statements

--if judgment statement

--switch(a) {

case 5: ...

break;

case 6: ...

break;

default:...

...........

}

**Loop statement for while do-while

--var i = 5;

while(i>0) {

alert(i);

i--;

}

--for(var i = 0;i<=5;i++){

alert(i);

}

js operator

**JS does not distinguish between integers and decimals

--var j = 123;

alert(j/1000*1000);

** j/1000*1000 The result in java is 0

** In js, there is no distinction between integers and decimals, 123/1000*1000 = 0.123*1000 = 123

**Add and subtracting string operations

--var str = "123";

alert(str + 1); The result in java and js is 1231, which is a string connection

alert(str - 1); When subtracting, perform the subtraction operation. If str is not a number, it will prompt NaN: It means it is not a number

**Bolean type can also be operated

***If set to true, it is equivalent to 1; if set to false, it is equivalent to 0;

** == and === Difference

**It's all about making judgments

** == Comparison is only the value; === Comparison is the value and type

**Sentences that are directly output to the page (the content can be displayed on the page) can output variables, fixed values and html code to the page. Document.write("") contains double quotes, and if you set the attributes of the label, you need to use single quotes.

-- document.write("aaaa");

-- document.write("<hr/>");

***document.write("<table border='1' bordercolor='red'>");

***document.write("</table>");

Exercise: Implementing the 99 multiplication table

js array

*The array definition in java int[] arr = {1,2,3};

*JS array definition method (three types)

1) var arr = [1,2,3];var arr = [1,"2",3];var arr = [1,2,true];

2) Use built-in object Array object

var arr1 = new Array(5); // Define an array, the length of the array is 5

arr1[0] = "1";

......

3) Use built-in object Array object

var arr2 = new Array(3,4,5); // Define an array, the elements in the array are 3,4,5

* There is a property length in the array: get the length of the array

* The length of the array is variable, and the array can store data of different data types.

js function (method)

**Define functions (methods) in js. There are three ways to define functions. In the parameter list of functions, you do not need to write var, just write the parameter name.

1) Use a keyword function

*** function method name (parameter list) {

Method body;

The return value is optional (depending on actual needs);

}

Code implementation:// Create function using the first method

function test() {

alert("qqqqqq");

}

// Call method

test();

// Define a method with parameters to implement the addition of two numbers

function add1(a,b) {

var sum = a+b;

alert(sum);

}

add1(3,5);

function add2(a,b,c) {

var sum1 = a+b+c;

return sum1;

}

alert(add2(7,8,9));

2) Anonymous functions

var add = function(parameter list) {

Method body and return value;

}

Code implementation: var add3 = function(m,n) {

alert(m+n);

}

// Call method

add3(8,9);

3) It is also generally called a dynamic function. If you use it less, just understand it.

*Use a built-in object function in js

var add = new Function("parameter list", "method body and return value");

var add4 = new Function("x,y","var sum;sum=x+y;return sum;");

alert(add4(9,10));

// Or the following code

var canshu = "x,y";

var fangfati = "var sum;sum=x+y;return sum;";

var add4 = new Function(canshu,fangfati);

alert(add4(5,3));

Global and local variables of js

**Global variable: define a variable in the script tag, which can be used in the js part of the page

--Use outside the method, inside the method, use in another script tag

**Local variable: define a variable inside a method, and can only be used inside the method.

--It can only be used inside the method. If this variable is called outside the method, an error will be shown

--ie comes with a debugging tool. In the version of ie8 or above, F12 on the keyboard, and a bar appears at the bottom of the page to see the error when you look at the console.

Where should script tags be placed

**It is recommended to put script tags behind</body>

**If there is a requirement now:

--In js, you need to get the value in input. If you put the script tag in the head, there will be problems

--html parsing is parsed from top to bottom. The script tag is placed in the head and directly takes the input value. Because the page has not yet parsed to the input line, it will definitely not be able to get it.

JS overloading js does not have overloading, but it can be simulated and implemented.

Example: function add11(a,b) {

return a+b;

}

function add11(a,b,c) {

return a+b+c;

}

function add11(a,b,c,d) {

return a+b+c+d;

}

alert(add11(2,2)); // NaN

alert(add11(2,2,3)); // NaN

alert(add11(2,2,4,5)); // 13

String object of js

** Create String object var str = "abc';

**Methods and Properties (Document)

--Attribute length: length of string

--method

1) Methods related to html

-- bold(): bold fontcolor(): set the color of the string fontsize(): set the size of the font link(): display the string as a hyperlink

2) Similar methods to java

--concat():Connect the string charAt(): Return the string indexOf(): Return the string position of the string split(): Slice the string into an array replace("",""): Replace the string-pass two parameters: the first parameter is the original character, and the second parameter is the character to be replaced with substr(5,3). Start from the fifth bit and intercept three characters backwards substring(3,5) Start from the third bit, including the third bit to the fifth bit end, excluding the fifth bit [3,5)

Array object for js

**Three ways to create an array

1) var arr1 = [1,2,3];

2) var arr1 = new Array(3); // The length is three

3) var arr1 = new Array(1,2,3); // The element is 1,2,3

var arr = []; //Create an empty array

**Attribute length: View the length of the array

**method

concat(); join(); split the array according to the specified characters push(); add elements to the end of the array, return the new length of the array** If the added array is an array, add the array as a whole string pop(); delete and return the last element of the array reverse(); reverse the order of the elements in the array

Date object of js

** Get the current time in java

Date date = new Date();

// Format // toLocaleString()

** Get the current time in js

var date = new Date();

// Convert to the customary format date.toLocaleString();

Math object math operation of js

** All the inside are static methods, you can use Math. method() directly when using it;

global functions of js

**Because it does not belong to any object, write the name directly to use it

** eval(); Execute js code (if the string is a js code, use the method to execute it directly)

-- var str = "alert('1234');";

// alert(str); // alert('1234');

eval(str); // 1234

** .....

Overloading of js functions What is overloading? The method name is the same, the parameters are different

*js does not have overloading of functions, and only the last method will be called, but the overload can be simulated in other ways. The js function saves the passed parameters into the arguments array. You can use the judgment of the length of the arguments array to return different processing results accordingly.

Simulate reload effect code implementation:

function add1() {

if(arguments.length ==2 ) {

return arguments[0] + arguments[1];

} else if ( arguments.length == 3) {

return arguments[0] + arguments[1] + arguments[2];

} else if ( arguments.length == 4) {

return arguments[0] + arguments[1] + arguments[2] + arguments[3];

} else {

return 0;

}

// Call

alert(add1(1,2)); //3

alert(add1(1,2,3)); //6

alert(add1(1,2,3,4)); //10

alert(add1(1,2,3,4,5)); //0

js bom object

**bom:broswer object model:browser object model

**What are the objects?

-- navigator: Get client information (browser information)

-- screen : Get screen information

-- location: the requested URL address

*** href attribute

1) Get the requested URL address

--document.write(location.href);

2) Set the URL address

--A button is placed on the page, and an event is bound to the button. When clicking this button, the page can jump to another page

<body>

function href1() {

//alert("aaaa");

location.href = "http://www.baidu.com";

}

</script>

</body>

-- history: the history of the requested url

-- Create three pages (simulate the effect of up and down history)

1) Create a page a.html and write a hyperlink to b.html

2) Create a b.html hyperlink to c.html

3) Create c.html

-- to the previous page visited

history.back();

history,go(-1);

-- Go to the next page you visited

history.forward();

history.go(1);

-- window (key mastery) top-level object of window object (all bom objects are operated in window)

**method

-- window.alert(); abbreviation is: alert(); A window pops up on the page to display the content

-- confirm("Show message content"); The confirmation prompt box has the return value true and false

-- prompt(); The input dialog box (not many are used now), has two parameters: display content and default value

-- open("url address","","window features, such as window width and height"); Open a new window

-- close(); Close window (the browser compatibility is relatively poor)

-- Make some timers

*** setInterval("js code", milliseconds); window.setInterval("alert('123');",3000); Indicates that the alert method is executed every three seconds

*** setTimeout("js code", milliseconds); means that it is executed after milliseconds, but it will only be executed once.

***clearInterval(); Clear the timer set by setInterval

-- var id1 = setInterval("alert('123');",3000);

clearInterval(id1);

***clearTimeout(); Clear the timer setTimeout

JS dom object

**dom: document object model: document object type

**Document: Hypertext document (Hypertext tagged document) html, xml

**Object: Provided properties and methods

**Model: Use properties and methods to manipulate hypertext tagged documents

*** You can use the objects provided in the dom in js, use the properties and methods of these objects to operate on markup documents.

***To operate on a tagged document, you must first encapsulate all the contents in the tagged document into objects

-- You need to encapsulate the tags, attributes, and text content in the html into objects

***To operate on marker documents, parse marker documents

***Parse process: According to the hierarchical structure of the html, a tree structure will be allocated in memory, and each part of the html needs to be encapsulated into an object

*Only one root node

There can be multiple child nodes under the root node. Nodes without child nodes are called leaf nodes

-- document object: the entire html document

-- element object: tag object

-- Attribute Object

-- Text object

** Node node object: is the parent object of these objects

DHTML: It is the abbreviation of many technologies

** html: Encapsulate data

** css: Use attributes and attribute values to style

** dom: Operate html documents (marked documents)

** javascript: specifically refers to the syntax statement of js (ECMAScript)

The document object represents the entire document

**Common methods

-- write() method: 1) Output variables to the page 2) Output html code to the page

-- getElementById(); means to get element (label) through id

<body>

// Use getElementById to get the input tag object

var input1 = document.getElementById("nameid");

// Get the value value in input

alert(input1.value);

// Set a value into the input

input1.value = "bbbbbbbb";

</script>

</body>

-- getElementsByName(); The name attribute of the tag is worthy of the tag, and the return is a collection (array)

<body>

var input1 = document.getElementsByName("name1"); // The passed parameter is the value of the name in the label

for(var i =0;i<input1.length;i++) { // Through traversal, get the specific value in each tag

var inputs = input1[i]; // Each loop gets the input object and assigns the value to the inputs

alert(inputs.value); // Get the value value in each input tag

}

</script>

</body>

-- getElementsByTagName("name of tag"); returns a collection (array)

<body>

var inputs1 = document.getElementsByTagName("input"); //The passed parameter is the name of the tag

for(var i =0;i<inputs1.length;i++) {

var input1 = inputs1[i];

alert(input1.value);

}

</script>

</body>

****Note: There is only one label, and this label can only be obtained using name. At this time, using getElementsByName returns an array, but now there is only one element. At this time, there is no need to traverse, but you can directly get the value through the subscript of the array.

var input1 = document.getElementsByName("name1")[0];

alert(input1.value);

Case: window pop-up case

**Implementation process: 1) You need to create a page: two input items and a button, and there is an event on the button, which is a new window popup

2) Create a pop-up page: Each row of the table has a button, number and name; there is an event on the button: assign the current number and name to the corresponding position of the first page.

** Cross-page operation opener: You can get the window that creates this window, that is, you can get the parent window

Case: Add node at the end

1) Create a li tag

2) Create text

3) Add the text to li

4) Add li to ul

<body>

</ul> <br/>

function add1() {

// Get the ul tag

var ul1 = document.getElementById("ulid");

// Create tags

var li1 = document.createElement("li");

// Create text

var tex1 = document.createTextNode("4444");

// Add text to li

li1.appendChild(tex1);

// Add li to ul

ul1.appendChild(li1);

}

</script>

</body>

Element object (element object): To operate element, you must first obtain element using the corresponding method in the document to obtain it.

**method

****Get the value in the attribute getAttribute("attribute name");

****Set the value of the attribute setAttribute(name,value);

****Remove attribute removeAttribute("attribute name"); value cannot be deleted

// Get the input tag first

var input1 = document.getElementById("inputid");

// alert(input1.value);

alert(input1.getAttribute("value")); //Get the value in the attribute

alert(input1.getAttribute("class"));

input1.setAttribute("class","haha"); // Set the value of the attribute

alert(input1.getAttribute("class"));

input1.removeAttribute("name");

</script>

** Want to get the subtitle below the tag

**Use attribute childNodes, but this attribute has poor compatibility

**The only effective way to get the tags under the tag, use the getElementsByTagName method

<body>

<li>aaaaaa</li>

<li>bbbbbb</li>

<li>cccccccc</li>

</ul>

// Get the ul tag

var ul1 = document.getElementById("ulid1");

// Get the subtitle below ul

// var lis = ul1.childNodes;// Poor compatibility

// alert(lis.length); // Some display 3 Some display 7

var lis = ul1.getElementsByTagName("li");

alert(lis.length);

</script>

</body>

Properties of Node object

**nodeName

**nodeType

**nodeValue

**When parsing html using dom, the tags, attributes and text in the html need to be encapsulated into objects

**The value corresponding to the tag node

nodeType: 1

nodeName: Caps tag name, such as SPAN

nodeValue : null

**The value corresponding to the attribute node

nodeType: 2

nodeName: attribute name

nodeValue : The value of the property

**The value corresponding to the text node

nodeType: 3

nodeName : #text

nodeValue : Text content

**<body>

<span id="spanid">Text content</span>

// Get the tag object

var span1 = document.getElementById("spanid");

// alert(span1.nodeType); // 1

// alert(span1.nodeName); // SAPN

// alert(span1.nodeValue); // null

// Attributes

var id1 = span1.getAttributeNode("id");

// alert(id1.nodeType); // 2

// alert(id1.nodeName); //id

// alert(id1.nodeValue); // spanid

//Get text

var text1 = span1.getfirstChild;

// alert(text1.nodeType); // 3

// alert(text1.nodeName); //#text

// alert(text1.nodeValue); // text content

</script>

</body>

Property 2 of Node object

<ul>

<li>aaaaaa</li>

<li>bbbbbb</li>

</ul>

**Parent node ul is the parent node of li

*** parentNode: parent node

**Child node li is a child node of ul

*** childNodes: Get all child nodes, but poor compatibility

*** firstChild: Get the first child node

*** lastChild: Get the last child node

**Peer nodes are peer nodes

**nextSibling: Returns the next sibling node of a given node

**previousSibling: Returns the previous sibling node of a given node

<body>

<li id="li1">aaaaa</li>

<li id="li2">bbbbbb</li>

<li id="li3">ccccc</li>

<li id="li4">ddddd</li>

</ul>

/* // Get li1

var li1 = document.getElementById("li1");

// Get ul

var ul1 = li1.parentNode;

alert(ul1.id); */

/* // Get the first child node of ul

// Get ul

var ul1 = document.getElementById("ulid");

// The first child node

var li1 = ul1.firstChild;

alert(li1.id);

var li4 = ul1.lastChild;

alert(li4.id); */

//The id of obtaining li is the previous and next brother nodes of li3

var li3 = document.getElementById("li3");

var li4 = li3.nextSibling;

var li2 = li3.previousSibling;

alert(li4.id);

alert(li2.id);

</script>

</body>

Operate the dom tree

** appendChild method:

*** Add child nodes to the end

*** Features: Similar to cut and paste effects

** insertBefore(newNode,oldNode);

*** Insert a new node before a node to add it through the parent node

*** Two parameters 1) node to be inserted 2) before

*** Insert a node, the node does not exist, create

1) Create a tag

2) Create text

3) Add text to the tag

**Code implementation: (Added <li>Diao Chan</li> before <li>Diao Chan</li>)

<body>

<li id="li12">Wang Zhaojun</li>

<li id="li14">Yang Yuhuan</li>

</ul>

// Add <li>Diao Chan</li> before <li>Diao Chan</li>

function insert1() {

// 1. Obtain the li13 tag

var li13 = document.getElementById("li13");

// 2. Create li

var li15 = document.createElement("li");

// 3. Create text

var text15 = document.createTextNode("Dong Xiaowan");

// 4. Add text to li

li15.appendChild(text15);

// 5. Get ul

var ul21 = document.getElementById("ulid21");

// 6. Add li to ul (add <li>Diao Chan</li> before <li>Diao Chan</li>)

ul21.insertBefore(li15,li13);

}

</script>

</body>

**removeChild method: delete node

*** Delete through the parent node, you cannot delete yourself

**Code implementation: Delete <li id="li24">Yang Yuhuan</li>

<body>

<li id="li22">Wang Zhaojun</li>

<li id="li24">Yang Yuhuan</li>

</ul>

// Delete <li id="li24">Yang Yuhuan</li>

function remove1() {

// 1. Obtain the li24 tag

var li24 = document.getElementById("li24");

// 2. Get the parent node ul tag

// There are two ways 1) get through id 2) get through property parentNode

var ul31 = document.getElementById("ulid31");

// 3. Execute deletion (delete through parent node)

ul31.removeChild(li24);

}

</script>

</body>

** replaceChild(newNode,oldNode); replace node

***Two parameters: 1) New node (replaced node) 2) Old node (replaced node)

***不能自己替换自己，通过父节点替换

** cloneNode(boolean) : 复制节点

**代码实现：把ul列表复制到另外一个div里面

<body>

</ul>

</div>

// 把ul列表复制到另外一个div里面

1、获取到ul

2、执行复制方法cloneNode方法复制参数true

3、把复制之后的内容放到div里面去

** 获取到div

** appendChild方法

function clone1() {

// 1、获取ul

var ul41 = document.getElementById("ulid41");

// 2、复制ul，放到类似剪切板里面

var ulcopy = ul41.cloneNode(true);

// 3、获取到div

var divv = document.getElementById("divv");

// 4、把副本放到div里面去

divv.appendChild(ulcopy);

}

</script>

</body>

**操作dom总结：

**获取节点使用方法

getElementById() : 通过节点的id属性，查找对应节点

getElementsByName() : 通过节点的name属性，查找对应节点

getElementsByTagName() : 通过节点名称，查找对应节点

**插入节点的方法

insertBefore方法: 在某个节点之前插入

appendChild方法: 在末尾添加，类似于剪贴粘贴

**删除节点的方法

removeChild方法: 通过父节点删除

**替换节点的方法

replaceChild方法: 通过父节点替换

innerHTML属性（重点）

** 这个属性不是dom的组成部分，但是大多数浏览器都支持的属性

** 第一个作用：获取文本内容

var span1 = document.getElementById("sid");

alert(span1.innerHTML);

** 第二个作用：向标签里面设置内容（可以是html代码）

<body>

</div>

// 获取span标签

var span1 = document.getElementById("sid");

//alert(span1.innerHTML); // 测试文本

// 向div里面设置内容<h1>AAAAA</h1>

// 获取div

var div11 = document.getElementById("div11");

div11.innerHTML = "<h1>AAAAA</h1>"; // 设置内容

</script>

</body>

** 练习：向div里面添加一个表格

var tab = "<table border='1'><tr><td>aaaaa</td></tr><tr><td>bbbb</td></tr></table>";

div11.innerHTML = tab;

案例：动态显示时间

** 得到当前时间

var date = new Date();

var d1 = date.toLocaleString();

** 需要让页面每一秒获取时间

setInterval方法定时器

** 显示到页面上

每一秒向div里面写一次时间使用innerHTML属性

** 代码实现动态显示时间

<body>

</div>

function getD1() {

// 当前时间

var date = new Date();

// 格式化

var d1 = date.toLocaleString();

// 获取div

var div1 = document.getElementById("times");

div1.innerHTML = d1;

}

// 使用定时器实现每一秒写一次时间

setInterval("getD1();",1000);

</script>

</body>

案例：全选练习

** 使用复选框上面一个属性判断是否选中

** checked 属性

** checked = true; 选中

** checked = false; 未选中

** 创建一个页面

** 复选框和按钮

***四个复选框表示爱好

***还有一个复选框操作全选和全不选有一个事件

***三个按钮全选全不选反选每个按键都分别有事件

**代码实现

<body>

<input type="checkbox" id="boxid" onclick="selAllNo();"/>全选/全不选

<br/>

<input type="checkbox" name="love"/>篮球

<input type="checkbox" name="love"/>排球

<input type="checkbox" name="love"/>羽毛球

<input type="checkbox" name="love"/>乒乓球

<br/>

// 实现全选操作

function selAll() {

1、获取要操作的复选框使用getElementsByName();

2、返回的是数组

**属性checked 判断复选框是否选中

** checked = true; // 表示选中

** checked = false; // 表示未选中

**遍历数组，得到的是每一个checkbox

** 把每一个checkbox属性设置为true 即checked = true;

// 获取要操作的复选框

var loves = document.getElementsByName("love");

// 遍历数组，得到每一个复选框

for(var i=0;i<loves.length;i++) {

var love1 = loves[i]; // 得到每一个复选框

love1.checked = true; // 设置属性为true

}

// 实现全不选操作

function selNo() {

1、获取到要操作的复选框

2、返回的是数组，遍历数组

3、得到每一个复选框

4、设置复选框的属性checked = false;

// 获取要操作的复选框

var loves = document.getElementsByName("love");

// 遍历数组，得到每一个复选框

for(var i=0;i<loves.length;i++) {

var love1 = loves[i]; // 得到每一个复选框

love1.checked = false; // 设置属性为true

}

function selOther() { // 实现反选

var loves = document.getElementsByName("love");

// 遍历数组，得到每一个复选框

for(var i=0;i<loves.length;i++) {

var love1 = loves[i]; // 得到每一个复选框

if(love1.checked == true) {

love1.checked = false;

}

else {

love1.checked = true;

}

function selAllNo() { // 一个多选框实现全选全不选切换

1、得到上边的复选框通过id来获取

2、判断该复选框是否选中if条件checked == true

3、如果是选中，下面是全选

4、如果不是选中，下面是全不选

var box1 = document.getElementById("boxid");

if(box1.checked == true) {

selAll();

}

else {

selNo();

}

</script>

</body>

案例：下拉列表左右选择

** 下拉选择框

</select>

** 创建一个页面

** 两个下拉框设置属性multiple

** 四个按钮，都有事件

** 代码实现：

<body>

<div>

</select>

</div>

<div>

</div>

<div>

<option>AAAAAAAA</option>

<option>BBBBBBBB</option>

</select>

</div>

<div>

</div>

// 实现选中添加到右边

function selToRight() {

1、获取select1 里面的option

* 使用getElementsByTagName(); 返回的是数组

* 遍历数组，得到每一个option

2、判断option是否被选中

* 属性selected ，判断是否被选中

** selected = true; 选中

** selected = false;未选中

3、如果选中，把选择的添加到右边去

4、得到select2

5、添加选择的部分

* appendChild 方法

// 获取到select1 里面的option

// 得到select1

var select1 = document.getElementById("select1");

// 得到select2

var select2 = document.getElementById("select2");

// 得到option

var options1 = select1.getElementsByTagName("option");

// 遍历数组

for(var i=0;i<options1.length;i++) {

// 第一次循环i=0 length:5

// 第二次循环i=1 length:4

// 第三次循环i=2 length:3

// 再往后就不满足条件了后边的都循环不到了

var option1 = options1[i]; // 得到每一个option对象

// 判断是否被选中

if(option1.selected == true) {

// 添加到select2 里面

select2.appendChild(option1);

i--; // 注意这一点，不写会出问题

}

// 全部添加到右边

function allToRight() {

var select2 = document.getElementById("select2");

var select1 = document.getElementById("select1");

var options1 = select1.getElementsByTagName("option");

for(var i=0;i<options1.length;i++) {

var option1 = options1[i];

select2.appendChild(option1);

i--;

}

// 右边的添加到左边的操作类似

</script>

</body>

案例：下拉框联动效果(省市联动)

** 创建一个页面，有两个下拉选择框

** 在第一个下拉框里面有一个事件：改变事件onchange事件

** 方法add1(this.value); 表示当前改变的option 里面的value值

** 创建一个二维数组，存储数据

** 每个数组中第一个元素是国家名称，后面的元素是国家里面的城市

**代码实现：

<body>

</select>

</select>

// 创建一个数组存储数据

// 使用二维数组

var arr = new Array(4);

arr[0] = ["中国","南京","抚州","临洮","日喀则","哈密"];

arr[1] = ["美国","华盛顿","底特律","休斯顿","纽约"];

arr[2] = ["德国","慕尼黑","柏林","法兰克福","狼堡"];

arr[3] = ["日本","东京","北海道","大阪","广岛","长崎"];

function add1(val) {

/* 实现步骤：

1、遍历二维数组

2、得到的也是一个数组（国家对应关系）

3、拿到数组中的第一个值和传递过来开的值作比较

4、如果相同，获取到第一个值后面的元素

5、得到city 的select

6、添加过去使用appendChild 方法

** 需要创建option （三步操作）

// 由于每次都要向city里面添加option，第二次添加，前边第一次的会保留，追加

// 所以每次添加之前，判断一下city里面是否有option，如果有，删除

// 获取city 的select

var city1 = document.getElementById("cityid");

// 得到city 里面的option

var options1 = city1.getElementsByTagName("option");

// 遍历数组

for(var k=0;k<options1.length;k++) {

// 得到每一个option

var op = options1[k];

// 删除这个option 通过父节点删除

city1.removeChild(op);

k--;// 每次删除长度都会减一k都会增加一不执行此操作会出错

}

// 遍历二维数组

for(var i=0;i<arr.length;i++) {

// 得到二维数组里面的每一个数组

var arr1 = arr[i];

// 得到遍历之后的数组的第一个值

var firstvalue = arr1[0];

// 判断传递过来的值和第一个值是否相同

if(firstvalue == val) { // 相同

// 得到第一个值后面的元素

// 遍历数组arr1

for(var j=1;j<arr1.length;j++) {

var value1 = arr1[j]; // 得到国家之后城市的名称

// alert(value1);

// 创建option

var option1 = document.createElement("option");

// 创建文本

var text1 = document.createTextNode(value1);

// 把文本添加到option里面

option1.appendChild(text1);

// 添加值到city 的select 里面

city1.appendChild(option1);

}

</script>

</body>

以上这篇JavaWeb学习笔记分享(必看篇)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持武林网。