Public properti...LOGIN
简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）

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

    ##document.firstChild

    • document.firstChild.lastChild

    • document.body

##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")

    • ##parentNode.appendChild(childNode): Append the created node to a parent node.

    • parentNode represents the parent node, and the parent node must exist.

  • childNode represents the child node.

    • Example: document.body.appendChild(imgObj)

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

    • #parentNode represents 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>
    Next Section
<!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>
submitReset Code
ChapterCourseware