js 기본에서 DOM 요소 객체의 속성 및 메서드 자세히 설명

HTML DOM(문서 객체 모델)에서는 각 부분이 노드입니다.

노드는 DOM 구조에서 가장 기본적인 구성 요소이며, 각 HTML 태그가 DOM 구조의 노드입니다.

文档是一个文档节点。

所有的HTML元素都是元素节点

所有 HTML 属性都是属性节点

文本插入到 HTML 元素是文本节点

注释是注释节点。

最基本的节点类型是Node类型，其他所有类型都继承自Node，DOM操作往往是js中开销最大的部分，因而NodeList导致的问题最多。要注意：NodeList是‘动态的'，也就是说，每次访问NodeList对象，都会运行一次查询，虽然这样增加了开销，但可以保证我们新添加的节点都能在NodeList中访问的到。

所有的元素节点都有共用的属性和方法，让我们来详细看一看：

先来看较为常用的通用属性

1　 element.id : 设置或返回元素的 id。

2　 element.innerHTML : 设置或者返回元素的内容，可包含节点中的子标签以及内容

3　 element.innerText : 设置或者返回元素的内容，不包含节点中的子标签以及内容

4　 element.className : 设置或者返回元素的类名

5　 element.nodeName : 返回该节点的大写字母标签名

6　 element.nodeType : 返回该结点的节点类型，1表示元素节点　 2表示属性节点……

7　 element.nodeValue : 返回该节点的value值，元素节点的该值为null

8　 element.childNodes : 返回元素的子节点的nodeslist对象，nodelist类似于数组，有length属性，可以使用方括号 [index] 访问指定索引的值(也可以使用item(index)方法)。但nodelist并不是数组。

9　 element.firstChild/element.lastChild : 返回元素的第一个/最后一个子节点(包含注释节点和文本节点)

10　 element.parentNode : 返回该结点的父节点

11　 element.previousSibling : 返回与当前节点同级的上一个节点(包含注释节点和文本节点)

12　 element.nextSibling : 返回与当前节点同级的下一个节点(包含注释节点和文本节点)

13　 element.chileElementCount : 返回子元素(不包括文本节点以及注释节点)的个数

14　 element.firstElementChild /lastElementChild 반환 첫 번째/마지막 자식 요소(텍스트 노드 및 주석 노드 제외)

15　 element.previousElementSibling/nextElementSibling　 이전을 반환/다음 형제 요소(텍스트 노드 및 주석 노드 제외)

16　 element.clientHeight/clientWidth　 내용의 시각적 높이를 반환/너비(봉장, 마진 또는 스크롤바 제외)

17　 element.offsetHeight/offsetWidth /offsetLeft/offset/Top 요소의 높이를 반환/너비/부모 요소에 대한 상대적 왼쪽 이동/오른쪽 이동(봉장과 채우기 포함, 마진 제외)

18　 element.style　 요소의 스타일 속성을 설정 또는 반환, 예시: element.style.backgroundColor　 주의, CSS와 달리 style의 속성은 하이픈을 제거하고 두 번째 단어의 첫 글자는 대문자로 만듭니다

19　 element.tagName　 반환 요소의 태그 이름(대문자)

!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .form_style{
      color: #5b5b5b;
      font-size: large;
      border: 5px solid rebeccapurple;
      background-color: antiquewhite;
      width: 440px;
      height: 120px;
      position: relative;
      left: 20px;
      top:20px;
      margin:10px;
    }
    p {
      color: #5b5b5b;
      font-size: larger;
      text-indent: 40px;
    }
  </style>
</head>
<body>
  <form id='first_form' class="form_style" name="cangjingge">
    공법을 선택하세요：<br/>
    <input type="radio" name="gongfa" value="jysg">구양신공<br/>
    <input type="radio" name="gongfa" value="qkdny">쌍구대농이<br/>
    <input type="radio" name="gongfa" value="khbd">금화보典<br/>
    <input type="radio" name="gongfa" value="xxdf">흡성대법<br/>
  </form>
  <p>아이야, 세심히 생각해보세요!!!</p><!--주석태그-->
  <p>추천공법-->경화보典</p>
  <script>
    //JavaScript 데모 코드는 여기에 추가하십시오
    var a=document.getElementById('first_form'),
      b = document.getElementsByTagName('p')[0];
    console.log(a.id);
    console.log(a.innerHTML);
    console.log(a.className);
    console.log(a.childNodes);
    console.log(a.firstChild);
    console.log(a.lastChild);
    console.log(a.nodeName);
    console.log(a.nodeType);
    console.log(a.nodeValue);
    console.log(a.parentNode);
    console.log(a.clientHeight);
    console.log(a.offsetHeight);
    console.log(b.nextSibling);
    console.log(b.nextElementSibling);
  </script>
</body>
</html>

브라우저가 표시하는 결과：

또한 특정 속성이 있습니다

특정 태그에만 belonging하는 속성을 특정 속성이라고 합니다. 예를 들어, <a> 태그는 href와 target 속성을 가지고 있습니다. <img>는 src 속성을 가지고 있으며, <form>는 entype 및 action 속성을 가지고 있습니다……

a_element.href　현재 노드가 지정하는 URL을 반환합니다

다음은 더 많이 사용되는 일반적인 메서드를 보겠습니다：

!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .form_style{
      color: #5b5b5b;
      font-size: large;
    }
    p {
      color: #5b5b5b;
      font-size: larger;
    }
  </style>
</head>
<body>
  <form id='first_form' class="form_style" name="cangjingge">
    공법을 선택하세요：<br/>
    <input type="radio" name="gongfa" value="jysg">구양신공<br/>
    <input type="radio" name="gongfa" value="qkdny">쌍구대농이<br/>
    <input type="radio" name="gongfa" value="khbd">금화보典<br/>
    <input type="radio" name="gongfa" value="xxdf">흡성대법<br/>
  </form>
  <p>아이야, 세심히 생각해보세요!!!</p>
  <script>
    //JavaScript 데모 코드는 여기에 추가하십시오
  </script>
</body>
</html>

(이 모든 JavaScript 데모 코드는 이 문서의 예제 HTML 코드를 실험 대상으로 합니다)

1　 element.appendChild(nodeName)　　 요소에 새로운 자식 노드를 추가하여 마지막 자식 노드로 반환합니다. HTML DOM에 새로운 요소를 추가하려면, 먼저 해당 요소를 생성한 후, 기존 요소에 추가해야 합니다.

js 표시 코드:

var a=document.getElementById('first_form');   
var textnode=document.createTextNode("慎重选择");  
a.appendChild(textnode)

2　 element.getAttribute(para)　　 요소 노드의 지정된 속성 값을 반환합니다。

js 표시 코드:

var a=document.getElementById('first_form');
console.log(a.getAttribute('name'))      //콘솔 출력 name의 값

3　 element.getAttributeNode(para)　　 지정된 속성 노드를 반환합니다。

js 표시 코드:

var a=document.getElementById('first_form');
console.log(a.getAttributeNode('name'))      //콘솔 출력 name 속성 노드

4　 element.getElementsByTagName(para) 지정된 태그 이름을 가진 모든 자식 요소의 집합을 반환합니다。

js 표시 코드:

var a=document.getElementById('first_form');
console.log(a.getElementsByTagName('input'))      //콘솔 출력

5　 element.hasAttribute(para)　 요소가 지정된 속성을 가지고 있다면 true를 반환하며, 그렇지 않으면 false를 반환합니다。

js 표시 코드:

var a=document.getElementById('first_form');
console.log(a.hasAttribute('name'))      //콘솔 출력

6　 element.insertBefore(insertNode,appointedNode)　 지정된 기존 자식 노드 앞에 새 노드를 삽입합니다。

js 표시 코드:

var a=document.getElementById('first_form');
    var inputList=document.getElementsByTagName('input');
    var newNode=document.createElement('input');
    var newNode2=document.createTextNode('天马流星拳');
    var br=document.createElement('br');
    newNode.type='radio';
    newNode.name='gongfa';
    newNode.value='tmlxq';
    a.insertBefore(newNode,inputList[2});
    a.insertBefore(newNode2,inputList[3});
    a.insertBefore(br,inputList[3});

7　 element.removeAttribute(); 지정된 속성을 요소에서 제거합니다。

js 예제 코드:

var a=document.getElementById('first_form');
a.removeAttribute('name');
console.log(a.hasAttribute('name'))

8　 element.removeChild()　　 요소에서 자식 노드를 제거합니다. 제거된 노드는 문서 트리에서는 아니지만 실제로는 메모리에 계속 있습니다. 언제든지 참조할 수 있습니다.

js 예제 코드:

var a=document.getElementById('first_form');
    a.removeChild(a.childNodes[3});

9　 element.replaceChild(newNode,replaceNode)　 지정된 노드를 새 노드로 대체합니다.

10　 element.setAttribute(attrName,attrValue)　 지정된 속성을 지정된 값으로 설정하거나 변경합니다.

js 예제 코드:

var a=document.getElementById('first_form');
    a.setAttribute('name','shaolinsi');
    console.log(a.name)

11　 element.setAttributeNode()　　　 지정된 속성 노드를 수정합니다

js 예제 코드:

var a=document.getElementById('first_form');
    var attr = document.createAttribute('id');
    attr.value='the_first';
    a.setAttributeNode(attr);
　　　　 console.log(a.id)

12　 nodelist.item() NodeList에서 지정된 인덱스에 위치한 노드를 반환합니다.

js 예제 코드:

var a=document.getElementsByTagName('input')
console.log(a.item(2))

이제 저는 여러분께 제공한 js 기본의 DOM 요소 객체의 속성 메서드 상세 설명이 모두 끝났습니다. 많은 지지와 격려를 부탁드립니다. 강의 교재~

기본 튜토리얼

좋아하는 것