Public properties and methods in the core DOM

Public properties and methods in the core DOM

Note: Searching for nodes (markers) in the core DOM starts from the root node of (html node).

##Node access

nodeName: Node name.
nodeValue: The value of the node. Only text nodes have values, element nodes have no values. The value of nodeValue can only be "plain text" and cannot contain any HTML tags or CSS attributes.
firstChild: The 1st child node.
lastChild: the last child node.
childNodes: A list of child nodes, which is an array.
parentNode: parent node.

Methods to find tags

##Attribute operations on nodes

setAttribute(name,value): Add an attribute to a node.

getAttribute(name): Get the value of a node attribute.
removeAttribute(name): Delete the attribute of a node.

<!DOCTYPE HTML>
<html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <title>php.cn</title>
 <script type="text/javascript">
 window.onload = function(){
 //查找body节点
 var node_body = document.all.div1;
 //查找img节点
 var imgObj = node_body.firstChild;
 
 //增加属性
 imgObj.setAttribute("src","https://img.php.cn/upload/course/000/000/009/580ae23c4a88a881.jpg");
 imgObj.setAttribute("width","400");
 imgObj.setAttribute("border","2");
 imgObj.setAttribute("style","cursor:pointer;");
 //删除border属性
 imgObj.removeAttribute("border");
}
</script>
 </head>
 <body ><div id="div1"><img /></div></body>
</html>

Creation of nodes

document.createElement(tagName): Creates a specified HTML tag, a node

tagName: refers to without angle brackets The name of the HTML tag.

Example: var imgObj = document.createElement("img")

childNode represents the child node.

parentNode.removeChild(childNode): Delete a certain Child nodes under the parent node.

childNode represents the child node to be deleted.
Example: document.body.removeChild(imgObj)

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<title>php.cn</title>
<script >
//网页加载完成后
window.onload = function(){
    //创建一个<img>标记
    var imgObj = document.createElement("img");
    //增加属性
    imgObj.setAttribute("src","/upload/course/000/000/009/580ae23c4a88a881.jpg");
    imgObj.setAttribute("width","400");
    //将创建的图片节点，挂载到某个父节点下
    document.body.appendChild(imgObj);
}
</script>
</head>
<body>
</body>
</html>

Continuing Learning

new file

<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>php.cn</title> <script type="text/javascript"> window.onload = function(){ //查找body节点 var node_body = document.all.div1; //查找img节点 var imgObj = node_body.firstChild; //增加属性 imgObj.setAttribute("src","https://img.php.cn/upload/course/000/000/009/580ae23c4a88a881.jpg"); imgObj.setAttribute("width","400"); imgObj.setAttribute("border","2"); imgObj.setAttribute("style","cursor:pointer;"); //删除border属性 imgObj.removeAttribute("border"); } </script> </head> <body ><div id="div1"><img /></div></body> </html>

submit Reset Code

Automatic operation

Public properties and methods in the core DOM

ElementaryImperial CMS enterprise imitation website tutorial

ElementaryNewbies with zero foundation in WordPress build personal blogs and corporate websites

ElementaryUltimate CMS zero-based website building instruction video

ElementaryFront-end project-Shangyou [HTML/CSS/JS technology comprehensive practice]

IntermediateVue3.0 from 0 to build a universal backend management system project practice

ElementaryZero-based front-end course [Vue advanced learning and practical application]

ElementaryWEB front-end tutorial [HTML5+CSS3+JS]

ElementaryQuick introduction to apipost

IntermediateVue3+TypeScript practical tutorial-enterprise-level project practice

ElementaryLet's briefly talk about starting a business in PHP

IntermediateVUE e-commerce project (front-end & back-end dual project actual combat)

ElementaryApipost practical application [api, interface, automated testing, mock]