Subject to a

  • What kind of basic data structure is DOM? Tree:
  • What are the common apis for DOM manipulation
  • How does DOM node attR differ from property

The property and the attribute

  • Property: Simply changes the properties of a JS object

    var obj = {x:100.y:200}
console.log(obj.x)  / / 100

var p = document.getElementsByTagName('p') [0]
console.log(p.nodeName)  // P this is a string

//nodeName is a property of js object p, the standard property of js objects
Copy the code

  • Attribute: Modifies the attributes of HTML tags

    //attribute changes the attributes in the document code, such as style, class, SRC, etc
var pList = document.querySelectorAll('p')
var p = pList[0]
p.getAttribute('data-name')
p.setAttribute('data-name'.'imooc')
Copy the code

  • In fact, DOM operation is to obtain the JS object, is an object format

Topic 2

  • How do I detect browser types
  • Parse the parts of the URL

navigator &screen&location & history

//screen
console.log(screen.width)
console.log(screen.height)

//history
history.back()  / / return
history.forward()  / / to go forward
Copy the code

The title three

  • Write a generic event listener function
  • Describes the time bubbling process
  • How do I bind events to each image on a page that has an infinite drop-down load of images

The agent

` 
       `
var div1 = document.getElementById('div1')
// Based on the event bubbling mechanism
div1.addEventListener('click'.function (e) {
    var target = e.target
    if (target.nodeName === 'A') {
        alert(target.innerHITML)
    }
})
Copy the code

Write a generic event binding function

function bindEvent(elem, type, selector, fn) {
    if (fn == null) {
        fn = selector
        selector = null
    }
    elem.addEventListener(type, function (e) {
        var target
        if (selector){
            / / agent
            target = e.target
            Matches the dom node matches the selector
            if (target.matches(selector)){
                fn.call(traget, e)
            }
        }else{
            // Not an agent
            fn(e)
        }
            
    })
}

var div1 = document.getElementById('div1')
bindEvent(div1, 'click'.'a'.function(e){
    e.preventDefault()
    console.log(this.innerHTML)
})
Copy the code

The title four

  • Write an Ajax by hand, without relying on third-party libraries
  • Several implementations across domains

Write an Ajax

var xhr = new XMLHttpRequest()
xhr.open('GET'.'/api'.false) //false indicates an asynchronous request
xhr.onreadystatechange = function () {
    if (xhr.readystate == 4) {
        if (xhr.status == 200) {
            alert(xhr.responseText)
        }
    }
}
xhr.send(null)
Copy the code

  • Status Code Description readyState

    0- Not initialized, and the SEND method has not been invoked

    1- Loaded, send has been called, and the request is being sent

    2- Load is complete, send is complete, and all responses have been received

    3- Interaction, parsing the response content

    4- Done, the response content is parsed and can be invoked on the client side

  • Status code Status description

    2xx- Indicates that the request was successfully processed. Such as 200

    3xx- Indicates that redirection is required

    4xx- Client request error, such as 404

    5xx- Server error

What is cross-domain

  • Browsers have a same-origin policy that does not allow Ajax access to other domain interfaces
  • Cross-domain conditions: protocol, domain name, port, if one is different, it can be cross-domain

Cross-domain solutions

  • jsonp
  • The server sets the HTTP header

Topic five

  • Please describe the difference between cookie, sessionStorage and localSttorage

cookie

  • It is used for client and server communication
  • But it has local storage, so it’s ‘borrowed’.
  • Use document.cookie =… Get and modify
Disadvantages of cookies for storage
  • The storage capacity is too small, only 4KB
  • All HTTP requests are carried, which affects the efficiency of retrieving resources
  • The API is simple and requires encapsulation to use

LocalStorage and sessionStorage

  • HTML5 is designed specifically for storage and has a maximum capacity of 5M

  • API plus simple to use

  • localStorage.setItem(key, value), localStorage.getItem(key)

  • Both the difference:

    1, localStorage as long as not clear, will always exist

    2, sessionStorage, is the browser closed, will be cleared

  • In hidden ios Safari mode, localstorage. getItem displays an error message. You are advised to use the try-catch package

AMD (Asynchronous Module Definition)

  • require.js
  • Global define function
  • Global require function
  • Dependent JS loads automatically and asynchronously

CommonJS

  • The NodeJS modular specification is now heavily used in the front end
  • Plug-ins and libraries that front-end development depends on are available from NPM
  • The high degree of automation of build tools makes NPM very cheap to use
  • CommonJS does not load JS asynchronously, but synchronously at once

Usage scenarios for AMD and CommonJS

  • To load JS asynchronously, use AMD
  • Commonjs is recommended after using NPM

Configure webpack.config.js once webpack is installed

var path  = require('path') 
var webpack = require('webpack')

module.exports = {
    context:path.resolve(__dirname, './src'),
    // Import file
    entry: {
        app: './app.js'
    },
    // Package the output file
    output: {
        path: path.resoleve(__dirname, './dist'),
        filename: 'bundle.js'
    },
    // File compression
    plugins: [
            new webpack.optimize.UglifyJsPlugin()
    ]
}
Copy the code

Basic Linux commands need to be mastered

The process of loading a resource

  • The browser obtains the IP address of the domain name from the DNS server
  • Send an HTTP request to the machine at this IP
  • The server receives the HTTP request, processes it, and returns it
  • The browser gets the returned content

The process by which a browser renders a page

  • Generate a DOM Tree based on the HTML structure
  • Generate CSSOM based on CSS
  • Create RenderTree by combining DOM and CSSOM
  • Start rendering and display according to RenderTree
  • When a script is encountered, rendering is executed and blocked

XSS cross-site request attack

  • Write an article in sina blog while secretly inserting a script
  • Attack code, get cookies (generally will have an account what), send their own server
  • Publish a blog, someone view the blog content, will send the viewer’s cookie to the attacker’s server
  • Prevent: front replace text: for example replace < for < > replace with >

XSRF

  • You have logged on to a shopping website and are browsing for products
  • The paid interface is ‘xxx.com/pay?id=100’, but there is no verification
  • Then you get an email hiding ‘‘
  • While you’re checking your email, you’re already quietly buying
  • Method: Add authentication procedures, such as fingerprint, password, and SMS verification code

resume

  • A brief introduction, highlighting project experience and solutions
  • Add your blog to your resume and maintain it regularly
  • Put personal open source projects on your resume and maintain them
  • Don’t fake it. Be authentic in your abilities and experiences
  • Talk about weaknesses: talk about what you are learning recently
  • When you get a question you can’t answer, just tell me what you know