JavaScript access to HTML elements

js dynamic modification of html elements, access to html elements

1. Access html elements according to ID
2. Access html elements according to CSS selector
3. Access html elements by using node relationship

  • Access HTML elements based on ID
    • Document.getelementbyid (idval): returns the HTML element in the document whose id attribute value is idval.
<! DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>id</title>
	<script >
		var accessById = function(){
			alert(document.querySelector("#a").innerHTML +"\n"+document.getElementById("b").value);
		}
	</script >
	
</head>
<body >
	<div id="a">wo shi java</div>
	<textarea id="b" rows="3" cols='25'>javaee</textarea>
	<input type="button" value="Access to two elements" onclick="accessById();">
</body >

Result

  • Access html elements according to CSS selectors
    • Eelemnt querySelector (Selectos): the parameter of this method can be either a css selector or multiple css selectors separated by commas; this method returns the first html element in the html document that matches the selector parameter.
    • NodeList querySelectorAll (Selectos): this method is similar to the previous one except that it returns all html elements that match the css selector.
<! DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>,,</title>
	<script >
		var change = function(){
			var divList = document.querySelectorAll("div");
			alert(divList);
			for (var i in divList){
				divList[i].innerHTML = "Test content"+ i;
				divList[i].style.width = "300px";
				divList[i].style.height = "50px";
				divList[i].style.margin = "10px";
				divList[i].style.backgroundColor = "#faa";
			}
		}
	</script >
	
</head>
<body >
	<div ></div>
	<div ></div>
	<div ></div>
	<input type="button" onclick="change()" value="Modify all div element">
	
</body >

Result

  • Using node relationship to access html elements
    • Node parentNode: returns the parent node of the current node, read-only attribute
    • Node previousSibling: returns the previous sibling of the current node, read-only attribute
    • Node nextSibling: returns the next sibling of the current node, read-only attribute
    • Node [] childNodes: returns all the child nodes of the current node, read-only attribute
    • Node [] getelementbytagname (tagname): returns all children of the current node with the specified tag name.
    • Node firstChild: returns the first node of the current node, read-only attribute
    • Node lastChild: returns the last node of the current node, read-only attribute
<! DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Using node relationship access html element</title>
	<style >
		.selected{
			background-color:#66f;
		}
	</style >
	
</head>
<body >
	<ol id="books">
		<li id="java">java1	</li>
		<li id="c">c1</li>
		<li id="ajax" class="selected">c++1</li>
		<li id="python">python1	</li>
		<li id="php">php1</li>
		<li id="go">go1</li>
	</ol>
	<input type="button" value="Parent node" onclick="change(curTarget.parentNode);" />
	<input type="button" value="First" onclick="change(curTarget.parentNode.firstChild.nextSibling);" />
	<input type="button" value="The previous" onclick="change(curTarget.previousSibling.previousSibling);" />
	<input type="button" value="Next" onclick="change(curTarget.nextSibling.nextSibling);" />
	<input type="button" value="The last one" onclick="change(curTarget.parentNode.lastChild.previousSibling);" />
	<script type="text/javascript">
		var curTarget = document.getElementById("ajax");
		var change = function(target){
			alert(target.innerHTML);
		}
	</script>
</body >

Result

Tags: Attribute Java JavaEE Python

Posted on Sun, 10 Nov 2019 08:31:46 -0800 by bigmichael