JavaScript --- GOOD 和 DOM

1.BOM

Browser Introduction

JavaScript and browser relations?

JavaScript is born in order to enable him to run in the browser!

BOM: Browser Object Model

• IE 6~11
• Chrome
• Safari
• FireFox

Third party

• QQ browser
• 360 browser

window (important)

Represents the window of the browser window

window.alert(1)
undefined
window.innerHeight
258
window.innerWidth
919
window.outerHeight
994
window.outerWidth
919

Navigator (not recommended)

Navigator, the browser encapsulates information

navigator.appName
"Netscape"
navigator.appVersion
"5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/63.0.3239.132 Safari/537.36"
navigator.userAgent
"Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/63.0.3239.132 Safari/537.36"
navigator.platform
"Win32"

Most of the time, we do not use the navigatorobject as it will be modified.!

Not recommended to use those attributes to determine and write code

screen

It represents the screen size

screen.width
1920 px
screen.height
1080 px

location (important)

location information represents the URL of the current page

host:"www.baidu.com"
href:"https://www.baidu.com/"
protocol:"https:"
reload:ƒ reload() // 刷新网页
// 设置新的地址
location.assign('https://blog.csdn.net/love_to_share')

document (the content; the DOM)

document represents the current page, HTML DOM document tree

document.title
"百度一下，你就知道"
document.title='YY'
"YY"

For specific document tree node

<dl id="app">
    <dt>Java</dt>
    <dd>JavaSE</dd>
    <dd>JavaEE</dd>
</dl>

<script>
    var dl = document.getElementById('app');
</script>=

Get cookie

document.cookie
"__guid=111872281.88375976493059340.1578110638877.133; monitor_count=1"

Principle cookie hijacking

www.taobao.com

<script src="aa.js"></script>
<!--恶意人员；获取你的cookie上传到他的服务器 -->

You can set the server-side cookie: httpOnly

history (not recommended)

history on behalf of the browser's history

history.back() //后退
history.forward() //前进

2.DOM

core

Dom is a web browser tree!

• Update: Update Dom node
• Traversing the dom node: get Dom node
• Delete: delete a node Dom
• Add: add a new node

To operate a Dom node, you must first obtain the Dom node

Node obtain dom

//对应 css 选择器
var h1 = document.getElementsByTagName('h1');
var p1 = document.getElementById('p1');
var p2 = document.getElementsByClassName('p2');
var father = document.getElementById('father');

var childrens = father.children[index]; //获取父节点下的所有子节点
// father.firstChild
// father.lastChild

This is the native code, and then we all try to use jQuery ();

Updates node

<div id="id1">

</div>

<script>
    var id1 = document.getElementById('id1');
</script>

Operation text

• id1.innerText='456' Value or change text
• id1.innerHTML='<strong>123</strong>' You can parse HTML text label

Operating css

id1.style.color = 'yellow'; // 属性使用 字符串 包裹
id1.style.fontSize='20px'; // - 转 驼峰命名问题
id1.style.padding = '2em'

Delete Node

Delete nodes steps: first get the parent node, the parent node by deleting own

<div id="father">
    <h1>标题一</h1>
    <p id="p1">p1</p>
    <p class="p2">p2</p>
</div>
<script>
   var self = document.getElementById('p1');
   var father =  p1.parentElement;
   father.removeChild(self)
    
    // 删除是一个动态的过程；
    father.removeChild(father.children[0])
    father.removeChild(father.children[1])
    father.removeChild(father.children[2])
</script>

Note: When deleting multiple nodes, children are constantly changing, deleting nodes must pay attention!

Insert Node

We obtained a Dom node, assuming that the dom node is empty, we can increase the innerHTML of an element, but this element of the DOM node already exists, we can not be so done! Will have coverage

add to

<p id="js">JavaScript</p>
<div id="list">
    <p id="se">JavaSE</p>
    <p id="ee">JavaEE</p>
    <p id="me">JavaME</p>
</div>

<script>
    var js = document.getElementById('js');
    var list = document.getElementById('list');
    list.appendChild(js);// 追加到后面
</script>

effect:

Create a new label, insert achieve

<script>

    var js = document.getElementById('js'); //已经存在的节点
    var list = document.getElementById('list');
    //通过JS 创建一个新的节点
    var newP = document.createElement('p');// 创建一个p标签
    newP.id = 'newP';
    newP.innerText = 'Hello,yy';
    // 创建一个标签节点
    var myScript = document.createElement('script');
    myScript.setAttribute('type','text/javascript');
    
    // 可以创建一个Style标签
    var myStyle= document.createElement('style'); //创建了一个空style标签 
    myStyle.setAttribute('type','text/css');
    myStyle.innerHTML = 'body{background-color: chartreuse;}'; //设置标签内容

    document.getElementsByTagName('head')[0].appendChild(myStyle)

</script>

insertBefore

var ee = document.getElementById('ee');
var js = document.getElementById('js');
var list = document.getElementById('list');
// 要包含的节点.insertBefore(newNode,targetNode)
list.insertBefore(js,ee);