DOM: 문서 객체 모델 문서 객체 모델
그는 문서 흐름을 조작(즉, 페이지 요소 조작)할 수 있는 일련의 속성 및 메서드를 제공합니다. 실제로 레이블을 조작하고 레이블을 일부 변경할 수 있습니다(레이블의 스타일, 내용, 클래스 이름, 속성 변경, 레이블 추가, 삭제 등).
실제로 dom을 작동하는 데는 2단계가 있습니다.
1. [요소 가져오기] 레이블 찾기
2. 라벨 [조작 요소]에서 원하는 작업을 수행합니다.
요소 가져오기: js에서 태그는 2개의 카테고리로 나뉩니다. 첫 번째 범주는 일반 요소, 두 번째 범주는 비정형 요소 비정형 요소: html, head, body 및 나머지는 모두 일반 요소
(1) 파격적인 요소를 얻는 방법
获取html: document.documentElement
获取head: document.head
获取body: document. body(2) 일반 요소를 얻는 방법
1.根据标签的id名字来获取元素: document.getElementById( "id名字")
返回值:能找到就是该标签，找不到就是null
2.根据标签的类名来获取元素: document.getElementsByclassName('类名')
返回值:一定是一个'伪数组'(长得和数组一样，也有索引，但是不能使用数组的常用方法，比如push、pop等不能使用)，
会找到该页面中所有叫这个类名的标签，把他们放到数组中，如果找不见，就是一个空数组
//思考:返回值是具体的标签吗?能直接操作吗?(不是具体的标签，不能直接操作)
//要想操作怎么办?根据数组的索引找到具体的标签
3.根据标签名字来获取元素 document.getElementsByTagName( '标签')
返回值:一定是一个'伪数组'，把找到的标签全部被放到伪数组中，一个都找不见结果就是空的伪数组
4.可以根据'选择器'得到一个元素:document.queryselector('选择器')
作用:通过选择器找到符合条件的'第一个'标签
返回值:能找见就是该标签，找不见就是null
5.可以根据'选择器'得到多个元素:document.queryselectorA11('选择器')
作用:通过选择器找到'所有'符合条件的标签
返回值:一定是一个'伪数组'，将符合条件的全部放到伪数组中，如果一个都找不见必然是空数组
요소의 스타일 조작: 요소의 스타일 가져오기, 요소의 스타일 설정
요소의 스타일을 가져오는 방법
//------인라인 스타일 가져오기
구문: element.style.style 이름
기능: 다음을 얻을 수 있습니다. non-inline 스타일을 가져올 요소의 style 값
참고: 이름에 대시가 있으면 카멜 케이스 또는 배열 연관 구문을 통해 가져와야 합니다.
<body>
<div style="width: 300px;font-size: 30px;">文字</div>
</body>
<script>
var divEle= document.queryselector('div') //获取元素（body里面的div标签）
var res1 = divEle.style.fontSize // 驼峰命名法 获取元素样式（font-size的值）
var res2 = divEle.style["font-size"] // 数组关联语法
</script>//--------------------- 인라인이 아닌 스타일 가져오기
구문: window.getComputedstyle(element).스타일 이름
참고: 이름에 대시가 있으면 반드시 pass 카멜 케이스 또는 배열 연관 구문을 사용하여
색상 값을 얻습니다.색상 값을 작성하기 위해 어떤 방법을 사용하든 브라우저는 결국 자동으로 rgb 색상 값으로 변환합니다.
<style>
div{
height: 400px;
}
</style>
<body>
<div>文字</div>
</body>
<script>
var divEle= document.queryselector('div') //获取元素（body里面的div标签）
var res = window.getComputedStyle(divEle).height//获取到非行内样式divEle的高度
var res = window.getComputedStyle(divEle).backgroundColor//获取到外部样式里divEle的背景色
</script>요소의 스타일을 지정하는 방법은 무엇입니까?
구문: element.style.stylename=value
기억: js를 통해 설정된 스타일이 모두 인라인 스타일인 경우
참고: 이름에 대시가 있으면 카멜 케이스 또는 배열 연관 구문을 통해 설정해야 합니다.
divEle.style.border = "5px solid red"
divEle.style.fontFamily = '楷体'
divEle.style.backgroundcolor = 'red'//行内样式优先级最高*/
action 요소의 속성:
요소의 속성: 태그 이름 뒤의 모든 속성을 총칭하여 속성이라고 합니다. 속성은 크게 2가지(속성명 & 속성값)로 나뉘는데, 속성은 js로 분류되는데, 기본속성, 커스텀속성, h5 커스텀속성 으로 나뉘는데 이 세 가지 속성의 동작은 아래에서 자세히 설명하도록 하겠습니다.
기본 속성: class, id, src, alt 등과 같이 w3c 표준에 존재하는 속성입니다.
기본 속성에 대한 작업: 기본 속성의 속성 값 읽기 (얻기) 구문: element.attribute name 참고: 클래스 이름을 얻을 때 class 대신 className 사용
<body>
<div class="d1" id="box1"></div>
</body>
<script>
var d1Ele = document.querySelector('.d1') // 获取body中的d1标签
console.log(d1Ele.className); // 读取d1Ele这个标签的class类名
console.log(d1Ele.id); // 读取d1Ele这个标签的id名
</script> 기본 속성의 속성 값 설정 : 구문: 요소. 속성 이름 = 값
<body>
<div class="d1"></div>
<img src="gimg1.jpg" alt="这是图片">
</body>
<script>
var d1Ele = document.querySelector('.d1') // 获取body中的d1标签
var imgEle = document.querySelector('img') // 获取body中的img标签
d1Ele.className = 'dd1' // 给d1Ele这个元素重新设置类名
imgEle.src="gimg2.jpg" // 给imgEle这个元素的src属性重新赋值
imgEle.alt='这是一个荷花' // 给imgEle这个元素的alt属性重新赋值
</script>사용자 지정 속성: 표준에 포함되어 있지 않으며 아무렇게나 작성합니다. 사용자 지정 속성은 레이블에 특별한 영향을 미치지 않으며 레이블에 의미가 없으며 일부 실행에 필요한 일부 정보를 기록하는 데만 사용됩니다. js 프로그램.
사용자 정의 속성에 대한 작업:
得到自定义属性的值：
语法：元素.getAttribute('属性名')
添加自定义属性：
语法：元素.setAttribute('属性名'，'属性值')
删除自定义属性：
语法：元素.removeAttribute('属性名')
<body>
<div class="d1" hh='哈哈' ll='ll'></div>
</body>
<script>
var d1Ele = document.querySelector('.d1') // 获取元素(标签)
var res = d1Ele.getAttribute('hh') //得到自定义属性'hh'
var res1 = d1Ele.getAttribute('ll') //得到自定义属性'll'
d1Ele.setAttribute('wy','王元') //增加自定义属性'wy'，其属性值为'王元'
d1Ele.removeAttribute('hh') //删除自定义属性'hh'
</script>h5 커스텀 속성: h5 이전에는 커스텀 속성과 네이티브 속성을 구분하기 어려웠기 때문에 h5 이후에는 커스텀 속성에 대한 규정이 생겼습니다. 나중에 데이터로 사용자 정의 속성을 작성하고 데이터 뒤에 속성 이름을 작성하는 것이 가장 좋다고 규정되어 있습니다. 원래 속성과 구별하기 위해 이 데이터를 추가하십시오.
h5 사용자 정의 속성에 대한 작업:
각 요소는 객체 데이터 유형인 dataset 속성으로 생성되며 모든 h5 사용자 정의 속성을 저장합니다. h5의 커스텀 속성은 모두 데이터셋에 저장되어 있기 때문에 우연히 객체 데이터 타입이 되므로 추후에 h5 커스텀 속성을 추가, 삭제, 획득하고자 한다면 위와 같은 방식으로 데이터셋을 운용하면 됩니다. 작동 객체의
得到h5自定义属性的值：
语法：元素.dataset.属性名
添加h5自定义属性
语法：元素.dataset.属性名 = '值'
删除h5自定义属性
语法：delete 元素.dataset.属性名
<body>
<div class="d1" ll="xx" data-hh="哈哈" data-wy="王元"></div>
</body>
<script>
var divEle = document.querySelector('div') //获取body中的div元素
console.log(divEle.dataset.wy); // 获取div中h5自定义属性wy的值
console.log(divEle.dataset); // 获取div中所有的h5自定义属性
divEle.dataset.zs = '张三' // 给div中增加一个h5自定义属性，属性名'zs'，属性值'张三'
delete divEle.dataset.hh // 删除div中名为'hh'的 h5自定义属性
</script>
작업 요소의 클래스 이름:
클래스 이름을 조작하는 목적은 무엇입니까? 스타일을 일괄적으로 변경하기 위한 편의를 위한 것인데, 라벨에 변경해야 할 스타일이 너무 많다면 css로 스타일을 작성하고 해당 스타일의 클래스 이름을 js로 추가하는 것이 가장 좋습니다.
클래스 이름을 가져오는 구문: .className 요소
도 완전한 클래스 이름을 가져옵니다.클래스 이름이 너무 많고 그중 하나만 가져오려면 논리를 직접 작성해야 합니다. 너무 번거롭습니다. 클래스 이름 설정 구문
: element.className = 'Value'
참고: 설정 시 클래스 이름을 완전히 덮어쓰고 새 값이 이전 클래스 이름을 모두 덮어쓰므로 더하기 기호를 사용하여 접합해야 합니다. 위의 작업은
특정 클래스 이름만으로 수행하기를 원하기 때문에 작업 작업이 너무 힘들기 때문에 새 계획을 살펴보십시오 .
新的方案：
在每一个元素的身上天生都有一个classList属性，这是一个伪数组，里面存储了该标签身上所有的类名
所以我们要想去添加类名、获取类名、删除类名只需要操作这个伪数组即可
得到某一个类名：元素.classList[索引]
追加一个类名：元素.classList.add('类名')
删除一个类名：元素.classList.remove('类名')
切换类名：元素.classList.toggle('类名')====原先有就删除，原先没有就添加사례: 버튼 버튼 클릭 시 div 태그의 너비를 400으로 설정하고 배경색을 빨간색으로 설정하고 텍스트를 확대하여 중앙에 배치
<style>
.box {
width: 200px;
height: 200px;
background-color: pink;
font-family: '楷体';
}
.box2 {
width: 400px;
height: 400px;
background-color: red;
color: white;
font-size: 50px;
text-align: center;
line-height: 400px;
}
</style>
<body>
<button>点我</button>
<div class="box a b c">div标签</div>
</body>
<script>
// 1.获取标签
var divEle = document.querySelector('div')
var btn = document.querySelector('button')
// 2.给按钮添加点击事件
/*
btn.onclick = function () {
// 3.修改div的样式
divEle.style.width = '400px'
divEle.style.backgroundColor = 'red'
divEle.style.fontSize = '50px'
divEle.style.textAlign='center'
divEle.style.lineHeight = '400px'
}
--------------------显然，上述用js一个个去操作属性的样式太麻烦了 */
//换种方法：给标签再添加一个box2的类名，在js中给此类名添加更改后的css样式，用js操作该类名：
//divEle.className = 'box2'// 这样写会直接覆盖掉类名box
//若不想覆盖类名 想追加再原类名的后面：**拼接的时候前面要加空格**
divEle.className = divEle.className + ' box2'
//---------------------------------------------------------
//console.log(divEle.classList[2]); // 打印div中的第二个类名
// divEle.classList.add('d') // 给div中添加一个类名'd'
// divEle.classList.remove('box') // 删除div中的box类名
// // 需求：点击按钮的时候：
// // 如果之前有box2这个类名就添加，如果之前没有就删除 ===== 切换
// btn.onclick = function () {
// divEle.classList.toggle('box2')
// }
</script>action 요소의 내용:
1) innerHTML은
태그의 내용을 가져옵니다: element.innnerHTML=== 태그를 포함하여 요소 아래의 모든 내용을 가져옵니다
. 태그를 파싱할 수 있습니다. 레이블을 인식할 수 있습니다.
참고: 원래 내용을 덮어쓰게 됩니다. 원래 내용을 보존하려면 더하기 기호를 사용하여 문자열 접합을 수행하십시오.
2) innerText는
레이블의 내용을 가져옵니다: 요소 .innnerText === 태그를 제외한 모든 '이 요소 아래 텍스트' 콘텐츠를 가져옵니다.
요소 아래에 콘텐츠 쓰기: element.innerText = 'what you want to write', 태그를 구문 분석할 수 없으며 태그가 일반 텍스트로 표시됩니다.
3) value====특정 요소의 값을 얻기 위한 form Syntax
: form element.value
값을 설정하는 문법: form element.value = 'value
요소 크기 가져오기 (요소의 풋프린트 가져오기, 즉 요소의 전체 너비 가져오기)
오프셋 쓰기 방법:
Get width: element.offsetWidth // 요소의 전체 너비 가져오기
표준 상자: 너비 + 좌우 패딩 + 좌우 테두리
odd box: width
get height: element.offsetHeight // 총 높이 가져오기 요소
클라이언트 작성: (이 작성 방법은 경계선을 포함하지 않습니다: 내용 + 패딩 값) 너비
가져오기: element.clientWidth
높이 가져오기: element.clientHeight
요소의 오프셋 값 구하기 오프셋 값 : 참조 객체 오프셋
으로부터의 거리 1. Element.offsetParent=======요소의 배치된 부모 요소 가져오기 2. Element.offsetLeft=====가져오기참조 객체의 상단에서 요소까지 의 거리를 구합니다. 요소 element.clientTop===위쪽 테두리의 두께를 얻습니다 . 경계선
보이는 창의 크기 얻기
BOM 메서드(스크롤바 포함)
window.innerWidth
window.innerHeight
DOM 메서드(스크롤바 없음)
document.documentElement.clientWidth
document.documentElement.clientHeight
DOM 노드 작업
노드를 얻는 방법
1）获取元素节点的方式：（说白了就是获取元素，获取标签）===以下的几个方式只能获取到元素节点
document.getElementById('id名字')
document.getElementsByClassName('类名')
document.getElementsByTagName('标签名')
document.querySelector('选择器')
document.querySelectorALL('选择器')
2)获取节点的方式（可以获取到元素节点、也可以获取到非元素节点）
1.元素.childNodes //返回值：一个伪数组，可以获取到该元素下所有的子一级节点
2.元素.children //返回值：伪数组，可以获取到该元素下所有的子一级元素节点
3.元素.firstChild
元素.lastChild //得到该元素下第一个子节点或者最后一个子节点
4.元素.firstElementChild
元素.lastElementChild //得到该元素下第一个或者最后一个元素节点
5.元素.previousSibling //得到该元素的上一个兄弟节点
6.元素.previousElementSibling //得到该元素的上一个兄弟元素节点
7.元素.nextSibling //得到该元素下一个兄弟节点
8.元素.nextElementSibling //得到该元素下一个兄弟元素节点
9.元素.parentNode //找父节点，html往上还有一个最大的document节点
10.元素.parentElement //找父元素节点，HTML往上就没有元素了，结果就是null
11.元素.attributes //可以得到该元素身上所有的属性节点노드 생성
创建元素节点(即创造一个标签):document.createElement('标签名')
创建文本节点:document.createTextNode('文本内容')
注意:通过js创造的节点不会显示在页面中，要想显示，必须得插入进去。삽입 노드
语法1：父元素.appendChild('子节点')====把子节点放到父元素中，排到最后
语法2：父元素.insertBefore(要插入的子节点，插入到谁的前面)===插入到父元素下指定元素的前面노드 삭제
语法1：父元素.removeChild('子节点')====将子节点从父元素中删除
语法2：节点.remove()====将自己删除,自杀노드 교체
父节点.replacechild(新节点，老节点)클론 노드
节点.cloneNode(参数)===把该节点复制一份出来
参数可以写false，也可以写true
写false===只复制自己，不复制后代=====默认值
写true：自己和后代都复制出来노드 속성(이해)
1）nodeType属性====可以获取到节点的类型，可以通过数字判断你这个节点到底是哪种类型的节点
元素节点：1
属性节点：2
文本节点：3
注释节点：8
2)nodeName=====可以得到节点名称
元素节点：节点名称就是大写的标签名称
属性节点：节点名称就是属性名字
文本节点：节点名称就是#text
注释节点：节点名称就是#comment
3）nodeValue====节点的内容
元素节点：是null
属性节点：就是属性值
文本节点：就是文本内容（包含换行和空格的）
注释节点：就是注释内容