첫 번째 면경

1.document.getElementByClassName 구현

document.getElementsByClassName=function(className){
    let all=document.all;
    return Array.prototype.filter.call(all,(item)=>{
        return item.classList.contains(className);
    });
}

2.bind 함수 구현

Function.prototype.bind=function(obj,...arg){
    let self=this;
    let res=function(...newArg){
        var total=arg.concat(newArg);
        self.apply(obj,total);
    };
    res.prototype=Object.create(self.prototype);
    return res;
}

3. 양방향 귀속 실현

let data={
    name: 'jc'
};
let nameEle=document.getElementById('name');
nameEle.value=data.name;
nameEle.addEventListener('input',function(){
    data.name=this.value;
    console.log(this.value);
});
Object.defineProperty(data,'name',{
    set: function(newValue){
        nameEle.value=newValue;
        return newValue;
    }
});

4. 태그 질문

p에 ul을 넣을 수 있습니까? 아니요. li는 구조화된 블록 요소이기 때문에 문서를 구조화시키고 내용을 포함할 수 있을 뿐만 아니라 다른 블록 요소도 포함할 수 있습니다. p는 단말기 블록 요소에 속하기 때문에 그 아래에 다른 블록 요소가 나타날 수 없고 내용만 포함할 수 있습니다. 추천하지 않습니다

texttext

5. 호환 처리 투명도

autoprefix를 사용하여 브라우저 접두사를 추가합니다

IE 에서 필터를 사용합니다

.opacity{
  filter: alpha(opacity=50);   // IE
  opacity: 0.5;
}

6. 부동점수와 그 연산

어떤 소수는 자릿수가 무한하다는 것을 나타내고, 피할 수 없는 정밀도 분실 해결 방법은

결과를 판단하기 전에 계산 결과에 대해 정밀도를 축소하면 정밀도가 축소되는 과정에서 자동으로 반올림이 된다

계산하기 전에 그 소수 자릿수를 계산하고 이를 정수로 전환한 후에 계산한 다음에 계산 결과를 소수로 환원한다

7. 부동 원리 제거

display 설정:table는 용기와 하위 원소의 수직 바깥쪽 거리가 합쳐지는 것을 방지하고zoom1 효과와 일치합니다

IE6/7에서 레이아웃을 터치하여 부동을 제거합니다

8. 원소가 중앙에 있는 다른 방법

.outer{
      position: relative;
      width: 500px;
      height: 500px;
      background-color: #000;
    }

    .inner{
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      width: 100px;
      height: 100px;
      margin: auto;
      background-color: #fff;
    }

9.offsetWidth/clientWidth/scrollWidth

offsetWidth 반환값은 content+padding+border를 포함하고 효과는 getBoundingClientRect와 같습니다

clientWidth는 콘텐츠 +padding만 포함하고 스크롤 바가 있으면 스크롤 바도 포함하지 않습니다

scrollWidth는 content+padding+넘치는 내용 사이즈만 포함합니다

10.readyState 값 가져오기

0 객체가 생성되었습니다

1 오픈이 성공적으로 호출되었습니다. 이 상태에서 요청 헤더를 설정하거나send로 요청을 보낼 수 있습니다

2 send 방법을 호출하지만 응답을 받지 못했습니다

3 일부 응답 데이터를 받았습니다

4 응답 데이터가 모두 수신되었습니다

11. 거품 이벤트 없음

focus와blur는 거품이 나지 않고 focusin과focusout는 거품이 난다

로드에 거품이 생기지 않습니다

mouseover와mouseout은 거품이 나고mouseenter와mouseleave는 거품이 나지 않습니다

12. CORS에서 쿠키 보내기

응답 메시지의 Access-Control-Allow-Credentials 헤더를true로 설정하고 서버에서 요청에 쿠키를 휴대할 수 있도록 허가합니다

Access-Control-Expose-Headers 클라이언트가 접근할 수 있는 응답 메시지 헤더

다른 한편, 브라우저는 withCredentials 속성을true로 설정해야 합니다

쿠키를 보내려면 Access-Control-Allow-Origin에서 별표를 설정할 수 없습니다. 요청한 페이지와 일치하는 도메인 이름을 명확하게 지정해야 합니다

13. 단순 요청 및 비단순 요청

13.1 간단한 요청

요청 방법

HEAD

GET

POST

헤더 정보는 다음 필드를 초과하지 않습니다.

Accept

Accept-Language

Content-Type은 간단한 요청에 대해 표준 세 개의 값에만 한정되며, 브라우저는 CORS 요청을 직접 보내고 요청 헤더에 Origin 필드를 추가합니다

13.2 비단순 요청

요청 방법은 PUT 또는 DELETE, 또는 Content-Type 필드 형식은 application/json이 간단하지 않은 요청에 대해 정식으로 통신하기 전에 HTTP 조회 옵션 요청을 한 번 추가하여 자신의 출처를 표시합니다

HEAD 요청은 하이퍼링크의 유효성을 테스트하는 데 사용됩니다

13.3void 연산자

모든 반환에 대해 undefined를 되돌려줍니다. 예를 들어void (0)