핵심 DOM의 공개 속성 및 메서드

핵심 DOM의 공용 속성 및 메서드

참고: 핵심 DOM의 노드(마커) 검색은 루트 노드(html 노드)부터 시작됩니다.

노드 액세스

nodeName: 노드 이름.
nodeValue: 노드의 값입니다. 텍스트 노드에만 값이 있고 요소 노드에는 값이 없습니다. nodeValue의 값은 "일반 텍스트"만 가능하며 HTML 태그나 CSS 속성을 포함할 수 없습니다.
firstChild: 첫 번째 하위 노드입니다.
lastChild: 마지막 자식 노드입니다.
childNodes: 배열인 하위 노드 목록입니다.
parentNode: 상위 노드입니다.

태그 찾는 방법

document.firstChild
document.firstChild.lastChild
document.body

노드의 속성

setAttribute(name, value): 노드에 속성을 추가합니다.
getAttribute(name): 노드 속성 값을 가져옵니다.
removeAttribute(name): 노드의 속성을 삭제합니다.

<!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>

노드 생성

document.createElement(tagName): 지정된 HTML 태그, 노드 생성

tagName: HTML 태그 이름이 없음을 의미합니다. 꺾쇠 괄호 안에.
예: var imgObj = document.createElement("img")

parentNode.appendChild(childNode): 생성된 노드를 상위 노드에 추가합니다.

parentNode는 부모 노드를 나타내며, 부모 노드가 반드시 존재해야 합니다.
childNode는 하위 노드를 나타냅니다.

예: document.body.appendChild(imgObj)
parentNode.removeChild(childNode): 상위 노드 아래의 하위 노드를 삭제합니다.

parentNode는 상위 노드를 나타냅니다.
childNode는 삭제할 하위 노드를 나타냅니다.
예: 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>

지속적인 학습

새로운 파일

<!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>

제출하다 코드 재설정

자동운전