A.今天你学到了什么
1.添加子元素节点方法
<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.获取父元素节点
<div class="parent">
<p id="child">hello world</p>
</div>
<script>
//parentNode 获得父节点
var p=document.getElementById("child");
var parent=p.parentNode;
console.log(parent);
</script>
3.界面删除父节点
<ul>
<li>小米手机<a href="#">删除</a></li>
<li>苹果手机<a href="#">删除</a></li>
<li>华为手机<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.更改子节点属性
<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); 获得所有类型的子节点
for(let i=0;i<childs.length;i++){
if(childs[i].nodeType==1){
childs[i].style.backgroundColor="red";
}
}
</script>
5.获取子节点
<ul id="parent">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<script>
// firstChild 获取第一个子节点
// lastChild 获取最后一个子节点
// firstElementChild 获取第一个元素子节点 i9以下不支持
// lastElementChild 获取最后一个元素子节点
var parent=document.getElementById("parent");
var fc=document.getElementById("parent").firstChild;
var fElement=parent.firstElementChild;
console.log(fc);
console.log(fElement);
</script>
6.兄弟节点
<!-- previousSibling 获取前面的兄弟节点
previousElementSibling 获取获取前面的兄弟元素节点
nextSibings 获取下一个兄弟节点
nextElementSibings 获取下一个兄弟元素节点 -->
<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">
//需要设置div元素的大小，margin值
</div>
<script>
// offsetLeft 获取元素水平方向偏移位置
// offsetTop 获取元素水平方向偏移位置
// offsetWidth 获取元素的宽度， 特点：只读属性
// 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.定时器
<script>
//setTimeout 超时调用
//语法：setTimeout 间隔一段时间，触发函数，只触发一次
setTimeout(function(){
alert(1)
}, 2000);
//使用setTimeout实现setInterval 持续触发，间隔时间为1000毫秒
// function go(){
// alert("hello world")
// setTimeout(go,1000)
// }
// go();
</script>
9.设置属性的方式
9.1第一种
<p id="test">hello world</p>
<script>
var p =document.getElementById("test");
// test.style.color="red";
// test.style["color"]="red"; 什么时候使用:当传入的属性是变量的时候
function changeStyle(ele,attr,value){
ele.style[attr]=value;
}
// changeStyle(p,"background","green");
</script>
9.2第二种
<!-- 设置属性的方式，设置样式 -->
<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() 设置属性值
// removeAttrbute() 移除属性
let test =document.getElementById("test");
test.setAttribute("class","two")
let cValue=test.getAttribute("class");
console.log(cValue);
</script>
11.动态添加 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.获取页面内容窗口大小
<div> // 需要设置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. 箭头函数
<script>
var one=function(){
console.log("one");
}
var go=()=>{
console.log("hello world");
}
go();
</script>
16.函数的传参
// JS中函数传不定参
function go(a,b){
console.log(a);
console.log(a+b);
console.log("没有参数");
}
go();
//js中 如何实现重载 使用arguments对象
function test(){
console.log(arguments);
}
test(2,3,5)
17.js 中实现函数的重载
<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.基本数据类型和引用
<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>
网友评论