1, IE and conventional browser compatibility summary
1.1. Variable declaration
1.1.1, let
Let declare that the keyword cannot be used in IE 11 or below, error SCRIPT11011: missing ‘ ‘, the value can be correctly obtained in IE12. It is recommended to use the keyword var in IE11
<body>
<div class="box" id="box" name="121">
<span>First child element</span>
<div class="color">#ccc</div>
</div>
<script>
let box = document.getElementById('box'); // ==> SCRIPT11011: missing '; ', IE 12 above correctly obtained
</script>
</body>
Copy the code1.1.2, const
Const declare keyword unavailable in IE 11 and below, error SCRIPT11011: missing ‘; ‘, the value can be correctly obtained in IE12. It is recommended to use the keyword var in IE11
<body>
<div class="box" id="box" name="121">
<span>First child element</span>
<div class="color">#ccc</div>
</div>
<script>
let box = document.getElementById('box'); // ==> SCRIPT1109: syntax error, IE 12 is correct
</script>
</body>
Copy the code1.2. Element acquisition
1.2.1, document. QuerySelector
Internet Explorer 8 or later is not supported. Internet Explorer 9 or later is supported
//==> IE8
<div class="box"></div>
<script>
==> The object does not support the querySelector attribute or method
var box = document.querySelector('.box');
console.log(box);
</script>//==> IE9 [object object] returns information about the object to be searched for elementsCopy the code1.2.2, document. QuerySelectorAll
Internet Explorer 8 or later is not supported. Internet Explorer 9 or later is supported
<body>
<div class="box"></div>
<script>
==>SCRIPT11109: object does not support "querySelectorAll" attribute or method
// IE 9 [object Object]
var box = document.querySelectorAll('.box');
console.log(box);
</script>
</body>
Copy the code1.2.3, document. GetElementsByClassName
Internet Explorer 9 or later is not supported. Internet Explorer 10 or later is supported
<body>
<div class="box"></div>
<script>
==>SCRIPT11109: the object does not support the "getElementsByClassName" attribute or method
// IE 10 HtmlCollection
var box = document.getElementsByClassName('box');
console.log(box);
</script>
</body>
Copy the code1.3. Node acquisition
1.3.1, element. FirstElementChild
Element. FirstElementChild under IE 9 returns undefined, IE 10 or more to get right, the regular browser support.
Alternative to element. FirstChild in IE 9
<body>
<div class="box" id="box" name="121">
<span>First child element</span>
<div class="color">#ccc</div>
</div>
<script>
var box = document.getElementById('box');
console.log(box.firstChild); // IE 9 does not support output ==> undefined
console.log(box.firstElementChild);// IE 10 HtmlCollection
</script>
</body>
Copy the codeCompatible writing:
<body>
<div class="box" id="box" name="121">
<span>First child element</span>
<div class="color">#ccc</div>
</div>
<script>
var box = document.getElementById('box');
var res = box.firstElementChild ? box.firstElementChild : box.firstChild
console.log(res); //==> [object object] Element object
</script>
</body>
Copy the code1.3.2, element. LastElementChild
Element. LastElementChild returns undefined under IE 9, properly available above IE 10, supported by regular browsers.
Alternative to element. LastChild in IE 9
<body>
<div class="box" id="box" name="121">
<span>First child element</span>
<div class="color">#ccc</div>
</div>
<script>
var box = document.getElementById
console.log(box.lastElementChild);// IE 9 does not support output ==> undefinedd('box');
console.log(box.lastChild);// IE 10 HtmlCollection
</script>
</body>
Copy the codeCompatible writing:
<body>
<div class="box" id="box" name="121">
<span>First child element</span>
<div class="color">#ccc</div>
</div>
<script>
var box = document.getElementById('box');
var res = box.lastElementChild ? box.lastElementChild : box.lastChild
console.log(res); //==> [object object] Element object
</script>
</body>
Copy the code1.3.3, element. PriviousElementSibling
Element. PriviousElementSibling under IE 9 returns undefined, IE 10 or more to get right, the regular browser support.
The following alternatives are available in IE 9: Element. priviousElement
<body>
<div class="box" id="box" name="121">
<span>First child element</span>
<div class="color" id="color">#ccc</div>
<button>determine</button>
</div>
<script>
var box = document.getElementById('color');
console.log(box.previousElementSibling); //==> undefined
console.log(box.previousSibling); //==> [object Object]
</script>
</body>
Copy the codeCompatible writing:
var element = box.previousElementSibling || box.previousSibling
Copy the code1.3.4, element. NextElementSibling
Element. NextElementSibling under IE 9 returns undefined, IE 10 or more to get right, the regular browser support.
Alternative to IE 9: element.nextsibling
<body>
<div class="box" id="box" name="121">
<span>First child element</span>
<div class="color" id="color">#ccc</div>
<button>determine</button>
</div>
<script>
var box = document.getElementById('color');
console.log(box.nextElementSibling); //==> undefined
console.log(box.nextSibling); //==> [object Object]
</script>
</body>
Copy the codeCompatible writing:
var element = box.nextElementSibling || box.nextSibling
Copy the code1.3.5. Return
function nextElementSibling(element){
return element.nextElementSibling ||element.nextSibling
}
Copy the code1.4. Style acquisition
1.4.1, window. GetComputedStyle
Normal browser: window.getComputedStyle(the current element object to operate on, the current element pseudo-class), normally we do not use pseudo-class, write NULL
Note: Window.getComputedStyle (the current element object to operate on, the current element’s pseudo-class) returns a collection of CssStyleDeclarations (pseudo-arrays), either as an object style.width or as a subscript value
<! DOCTYPEhtml>
<html lang="en">
<head>
<meta charset="UTF-9">
<meta name="viewport" content="Width = device - width, initial - scale = 1.0">
<title>Document</title>
<style>
.box {
width: 1000px;
height: 1000px;
border-radius: 50%;
background: #ccc;
}
</style>
</head>
<body>
<div class="box"></div>
<script>
let box = document.querySelector('.box')
let style = window.getComputedStyle(box,null)
console.log(style); //==> CSSStyleDeclaration
</script>
</body>
</html>
Copy the codeInternet Explorer: Element.currentStyle
Element. CurrentStyle will return an object, and only through element. CurrentStyle. Or width traverse object attribute information
<! DOCTYPEhtml>
<html lang="en">
<head>
<meta charset="UTF-9">
<meta name="viewport" content="Width = device - width, initial - scale = 1.0">
<title>Document</title>
<style>
.box {
width: 1000px;
height: 1000px;
border-radius: 50%;
background: #ccc;
}
</style>
</head>
<body>
<div class="box"></div>
<script>
let box = document.querySelector('.box')
let style = box.currentStyle
console.log(style); //==> [object MSCurrentStyleCSSPropertiesPrototype]
</script>
</body>
</html>
Copy the codeCompatible writing:
/ * * * *@param {*} Element gets the class-style element *@param {String} Attr returns all the class styles of the current element
function getStyle(element, attr) {
if (attr) {
return window.getComputedStyle ? window.getComputedStyle(element)[attr] : element.currentStyle[attr]
}else {
return window.getComputedStyle ? window.getComputedStyle(element) : element.currentStyle
}
}
Copy the code1.5, events,
1.5.1 Level 2 Event binding and unbinding
1.5.1.1. Event binding
In common browsers, addEventListener can be used, but it is not supported under IE 9. AttachEvent is required for secondary event binding.
Compatible writing:
/ * * * *@param {*} Element The element to which the event is bound@param {*} Type Indicates the event type *@param {*} The callbak bound callback function */
function getAddEventListener(element, type, callbak) {
return element.getAddEventListener ? element.getAddEventListener(type,callbak):element.attachEvent('on'+type,callbak)
}
Copy the code1.5.1.2 Event unbinding
Common browsers can use removeEventListener to unbind events. However, in Internet Explorer 9, detachEvent is used to unbind events. Callbackname is the name of the bound event
Compatible writing:
/ * * * *@param {*} Element The element for which the event is unbound@param {*} Callbakname Name of the event to be unbound */
function getRemoveEventListener(element, callbakname) {
return element.removeEventListener ? element.removeEventListener(callbakname):element.detachEvent(callbakname)
}
Copy the code1.5.2 event object E
In common browsers, the event object e is the event handler and can be retrieved using the parameter E (the default is the first parameter of the event handler). In Internet Explorer, it is window.event
Compatible writing:
<body>
<div class="box" id="box" name="121">
<span>First child element</span>
<div class="color" id="color">#ccc</div>
<button>determine</button>
</div>
<script>
document.querySelector('button').addEventListener('click'.function(e){
let event = e || window.event //==> You can use this method to get event objects
})
</script>
</body>
Copy the code1.5.3, target
In the event object, access to the target way is: the target = > e. arget | | e.s rcElement
<body>
<div class="box" id="box" name="121">
<span>First child element</span>
<div class="color" id="color">#ccc</div>
<button>determine</button>
</div>
<script>
document.querySelector('button').addEventListener('click'.function(e){
let event = e || window.event
/ / get the target
let target = e.target || e.srcElement
})
</script>
</body>
Copy the code1.5.4, bubbling
Because events can bubble, you need to prevent events from bubbling depending on your requirements. General browser: in the event object E, there is a method called E.topproprogation () that prevents the event from bubbling. No parameter is required in the method. Below IE 9: you need to use the property in the event object, e.cancelBubble = true
Compatible writing:
document.querySelector('button').addEventListener('click'.function(e){
e.stopProprogation ? e.stopProprogation() : e.cancleBubble = true
})
Copy the code1.5.5 keyCode in keyboard events
1.5.5.1 keyDown
Obtain the information about a key click in the keyDown event. There are differences between Internet Explorer and conventional browser. Internet Explorer: E. white
document.addEventListener('keydown'.function(e){
let event = e || window.event
//==> Get keyboard press information
let key = event.which || event.keyCode
})
Copy the code1.5.6 buttons and buttons in mouse events
In the mouse event object E, the normal browser and IE 9 are different in the button, but they are compatible, so there is no need to write compatible with the normal browser: E. button Internet Explorer: E. box
1.5.7. Block the default events that come with tags
Prevent tags from default events, such as a tag jump event, form submission, etc., in regular browsers: e.preventDefault() in IE: e.turnValue = false;