A.今天你學(xué)到了什么
1.添加子元素節(jié)點(diǎn)方法
<div>
<input type="text" id="txt"> <button id="add">添加</button>
</div>
<ul id="parent">
</ul>
<script>
var txt =document.getElementById("txt");
var add=document.getElementById("add");
var parent=document.getElementById("parent");
add.onclick=function(){
var value=txt.value;
var li=document.createElement("li");
li.innerHTML=value;
console.log(li);
parent.appendChild(li);
}
</script>
2.獲取父元素節(jié)點(diǎn)
<div class="parent">
<p id="child">hello world</p>
</div>
<script>
//parentNode 獲得父節(jié)點(diǎn)
var p=document.getElementById("child");
var parent=p.parentNode;
console.log(parent);
</script>
3.界面刪除父節(jié)點(diǎn)
<ul>
<li>小米手機(jī)<a href="#">刪除</a></li>
<li>蘋果手機(jī)<a href="#">刪除</a></li>
<li>華為手機(jī)<a href="#">刪除</a></li>
</ul>
<script>
var shows=document.getElementsByTagName("a");
for(let i=0;i<shows.length;i++){
shows[i].onclick=function(){
this.parentNode.style.display="none";
}
}
</script>
4.更改子節(jié)點(diǎn)屬性
<ul id="parent">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<script>
let parent = document.getElementById("parent");
let childs=parent.childNodes;
// console.log(childs); 獲得所有類型的子節(jié)點(diǎn)
for(let i=0;i<childs.length;i++){
if(childs[i].nodeType==1){
childs[i].style.backgroundColor="red";
}
}
</script>
5.獲取子節(jié)點(diǎn)
<ul id="parent">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<script>
// firstChild 獲取第一個(gè)子節(jié)點(diǎn)
// lastChild 獲取最后一個(gè)子節(jié)點(diǎn)
// firstElementChild 獲取第一個(gè)元素子節(jié)點(diǎn) i9以下不支持
// lastElementChild 獲取最后一個(gè)元素子節(jié)點(diǎn)
var parent=document.getElementById("parent");
var fc=document.getElementById("parent").firstChild;
var fElement=parent.firstElementChild;
console.log(fc);
console.log(fElement);
</script>
6.兄弟節(jié)點(diǎn)
<!-- previousSibling 獲取前面的兄弟節(jié)點(diǎn)
previousElementSibling 獲取獲取前面的兄弟元素節(jié)點(diǎn)
nextSibings 獲取下一個(gè)兄弟節(jié)點(diǎn)
nextElementSibings 獲取下一個(gè)兄弟元素節(jié)點(diǎn) -->
<div>
<p>hello world 01</p>
<p id="test">hello world 02</p>
<p>hello world 03</p>
</div>
<script>
let test =document.getElementById("test");
let pSiblings=test.previousSibling;
let eSiblings=test.previousElementSibling;
console.log(pSiblings);
console.log(eSiblings);
</script>
7.獲取元素偏移量
<div id="test">
//需要設(shè)置div元素的大小苛让，margin值
</div>
<script>
// offsetLeft 獲取元素水平方向偏移位置
// offsetTop 獲取元素水平方向偏移位置
// offsetWidth 獲取元素的寬度， 特點(diǎn)：只讀屬性
// offsetHeight 獲取元素的高度
let test=document.getElementById("test");
let offl=test.offsetLeft;
let offt=test.offsetTop;
let offw=test.offsetWidth;
let offh=test.offsetHeight;
console.log(offl);
console.log(offt);
console.log(offw);
console.log(offh);
</script>
8.定時(shí)器
<script>
//setTimeout 超時(shí)調(diào)用
//語(yǔ)法：setTimeout 間隔一段時(shí)間脖旱，觸發(fā)函數(shù)纲缓，只觸發(fā)一次
setTimeout(function(){
alert(1)
}, 2000);
//使用setTimeout實(shí)現(xiàn)setInterval 持續(xù)觸發(fā)，間隔時(shí)間為1000毫秒
// function go(){
// alert("hello world")
// setTimeout(go,1000)
// }
// go();
</script>
9.設(shè)置屬性的方式
9.1第一種
<p id="test">hello world</p>
<script>
var p =document.getElementById("test");
// test.style.color="red";
// test.style["color"]="red"; 什么時(shí)候使用:當(dāng)傳入的屬性是變量的時(shí)候
function changeStyle(ele,attr,value){
ele.style[attr]=value;
}
// changeStyle(p,"background","green");
</script>
9.2第二種
<!-- 設(shè)置屬性的方式，設(shè)置樣式 -->
<p id="test">hello world</p>
<script>
let test =document.getElementById("test");
test.setAttribute("Style","color:red");
</script>
10 操作屬性
<p class="one" id="test">
hello world
</p>
<script>
// getAttribute() 得到屬性值
// setAttribute() 設(shè)置屬性值
// removeAttrbute() 移除屬性
let test =document.getElementById("test");
test.setAttribute("class","two")
let cValue=test.getAttribute("class");
console.log(cValue);
</script>
11.動(dòng)態(tài)添加 title
<p id="test">hello world</p>
<script>
let test=document.getElementById("test");
test.setAttribute("title","title");
</script>
12.獲取瀏覽器窗口大小
<script>
var windowWidth=window.innerWidth;
var windowHeight=window.innerHeight;
console.log(windowWidth); //寬度
console.log(windowHeight);//高度
</script>
13.獲取頁(yè)面內(nèi)容窗口大小
<div> // 需要設(shè)置div屬性</div>
<script>
var width=document.documentElement.scrollWidth;
var height=document.documentElement.scrollHeight;
console.log(width+":"+height);
</script>
14.frame 文檔碎片
<ul id="parent"></ul>
<button id="btn">btn</button>
<script>
/*
createDocumentFragment()文檔碎片 好處:提高渲染效率
*/
var btn=document.getElementById("btn");
var parent=document.getElementById("parent");
var frame=document.createDocumentFragment();
btn.onclick=function(){
for(let i=0;i<10;i++){
let i=document.createElement("li");
frame.appendChild(i);
}
parent.appendChild(frame);
}
</script>
15. 箭頭函數(shù)
<script>
var one=function(){
console.log("one");
}
var go=()=>{
console.log("hello world");
}
go();
</script>
16.函數(shù)的傳參
// JS中函數(shù)傳不定參
function go(a,b){
console.log(a);
console.log(a+b);
console.log("沒有參數(shù)");
}
go();
//js中 如何實(shí)現(xiàn)重載 使用arguments對(duì)象
function test(){
console.log(arguments);
}
test(2,3,5)
17.js 中實(shí)現(xiàn)函數(shù)的重載
<script>
function test(){
if(arguments.length==1){
cosole.log(argument[0])
}if(arguments.length==2){
console.log(argument[0]+argument[1]); fdsf
}else{
console.log("hello world")
}
}
test();
test(1);
test(1,3);
</script>
18.基本數(shù)據(jù)類型和引用
<script>
// 1.基本類型只傳值
// 2.引用類型傳值又傳址
// var a =10;
// var b = a;
// console.log(b);
var arr = [1,2,3];
var b = arr;
arr[arr.length] =4;
var obj = {
name:"chengchao"
}
var jiang = obj;
obj.age = 30;
console.log(jiang);
</script>
