区块链技术博客
www.b2bchain.cn

DaZeng:JavaScript基础二

这篇文章主要介绍了DaZeng:JavaScript基础二的讲解,通过具体代码实例进行17131 讲解,并且分析了DaZeng:JavaScript基础二的详细步骤与相关技巧,需要的朋友可以参考下https://www.b2bchain.cn/?p=17131

本文实例讲述了2、树莓派设置连接WiFi,开启VNC等等的讲解。分享给大家供大家参考文章查询地址https://www.b2bchain.cn/7039.html。具体如下:

JavaScript基础二

  • JS基础一
  • JS基础二
  • DOM文档对象模型
    • 节点node
    • 获取DOM节点
      • getElementById(不带#)
      • getElementsByClassName(不带.)
      • getElementsByTagName
      • getElementsByName
      • querySelector,querySelectorAll(要带.和#)
    • 常用的节点属性和方法
      • childNodes和children(获取多个子节点)
      • 获取单个文本节点(子节点、兄弟节点)
      • 获取根节点
    • 通过todoList掌握节点的增删
      • 增加节点
      • 删除节点
    • DOM获取属性节点对象
    • DOM样式表的获取

JS基础一

JavaScript基础一

JS基础二

查看兼容性

DOM文档对象模型

DaZeng:JavaScript基础二

节点node

节点类型nodeType,节点名称nodeName,节点值nodeValue
DaZeng:JavaScript基础二

nodeType
DaZeng:JavaScript基础二

获取DOM节点

变量,对象,数组,函数都为小驼峰命名法,常量全部大写,类,原型对象为大驼峰命名法。

只能通过元素节点获取属性节点。

getElementById(不带#)

通过Id获取节点,返回唯一一个DOM对象。

let oDiv = document.getElementById("div_id") 

getElementsByClassName(不带.)

通过class来获取节点,返回数组对象,是一个伪数组。

let oDiv = document.getElementsByClassName("div_class") oDiv[0] 

getElementsByTagName

通过标签名来获取节点,返回数组对象,是一个伪数组。

let oDiv = document.getElementsByTagName("div") 

getElementsByName

通过name属性来获取节点,返回数组对象,是一个伪数组。

let oDiv = document.getElementsByName("div_name") 

querySelector,querySelectorAll(要带.和#)

//获取一个节点 var oDiv = document.querySelector("#div1") //返回匹配的第一个DOM节点对象 var oDiv = document.querySelector(".div1") var oDiv = document.querySelector("li")  //返回伪数组,一个节点列表 var oDiv = document.querySelectorAll("#div1") var oDiv = document.querySelectorAll(".div1") var oDiv = document.querySelectorAll("li")  //复合选择 var oDiv = document.querySelectorAll("ul li") 

常用的节点属性和方法

childNodes和children(获取多个子节点)

获取所有子节点:
childNodes:所有子节点,包括元素子节点,文本子节点等
children:元素子节点

var ul = document.getElementsByTagName("ul")[0] ul.hasChildNodes() //判断有无子节点 let arrLi = ul.childNodes; console.log(arrLi)//text节点来源于标签中的回车换行符号。  let arrLiElement = ul.children console.log(arrLiElement)//[li,li,li,li]没有text 

DaZeng:JavaScript基础二
DaZeng:JavaScript基础二

获取单个文本节点(子节点、兄弟节点)

获取单个子节点:firstChild、lastChild
单标签获取文本:
获取下一个兄弟节点:nextSibling
获取下一个元素兄弟节点:nextElementSibling(跳过#text文本标签)
获取上一个兄弟节点:previousSibling
获取上一个元素兄弟节点:previousElementSibling(跳过#text文本标签)
父节点:parentNode

<h1 id = 'title'>Son</h1> <input name = 'sex' type = 'text'>-------------------------------------------------- let title = document.getElementById("title") console.log(title.firstChild)//Son console.log(title.lastChild)//Son  console.log(title.nodeName)//#text console.log(title.nodeType)//3 console.log(title.nodeValue)//Son  let oSex = document.getElementsByName("sex")[0] console.log(oSex.nextSibling) // 男 

获取根节点

document.body
document.documentElement

document.body //body节点 document.documentElement //html节点  document.nodeType //9 document.nodeName //#docuument document.nodeValue //null 

通过todoList掌握节点的增删

增加节点

方法一:
createElement(‘li’)
createTextNode(文本内容或变量)
appendChild(节点对象)

方法二:
createElement(‘li’)
innerHTML(给节点内容赋值)
appendChild(节点对象)

<input type='text' id='addText'> <button type='button' onclick='addTask()'>点击增加</button> <ul id='todoList'> 	<li>哈哈 <button onclick='deleteTask(index)'>删除</button></li> <ul> ----------------------------------------------------------------- //addTask() 1,2 //方法一 function addTask1(){ 	//获取标准属性节点的值(输入框的值) 	var oAddTextValue = document.getElementById('addText').value 	 	//获取ul父节点 	var oToDoList = document.getElementById('todoList')  	//创建一个新的li节点对象,创建出来的节点对象现在存放在内存中没有挂载到页面 	var oLi = document.createElement('li')  	//创建一个文本子节点 document.createTextNode(文本内容或变量) 	var oText = document.createTextNode(oAddTextValue)  	//文本节点挂载到li节点上 	oLi.appendChild(oText) 	 	//ul父节点末尾添加li节点 	oToDoList.appendChild(oLi) }  //方法二 function addTask2(){ 	//获取标准属性节点的值(输入框的值) 	var oAddText = document.getElementById('addText') 	var oAddTextValue = oAddText.value 	 	//获取ul父节点 	var oToDoList = document.getElementById('todoList')  	//获取当前子节点长度 	var len = oToDoList.children.length  	//创建一个新的li节点对象,创建出来的节点对象现在存放在内存中没有挂载到页面 	var oLi = document.createElement('li')  	//给li赋值 	oLi.innerHTML = `${oAddTextValue} <button οnclick='deleteTask(${len})'>删除</button>`;  	//ul父节点末尾添加li节点 	oToDoList.appendChild(oLi)  	//清除输入框的值 	oAddText.value = "" } 

删除节点

父节点对象.removeChild(子节点对象)
使用this(获取当前节点对象)

<input type='text' id='addText'> <button type='button' onclick='addTask()'>点击增加</button> <ul id='todoList'> 	<li>哈哈 <button onclick='deleteTask(index)'>删除</button></li> <ul> ----------------------------------------------------------------- //方法一 //缺点只能按倒着删除 function deleteTask( index ){ 	//获取ul父节点 	var oToDoList = document.getElementById('todoList') 	 	//获取所有li 	var arrLi = oToDoList.children  	 	//arrLi[index] 要删除的li对象 	oToDoList.removeChild(arrLi[index]) }  -------------------------------------------------------------------- //方法二 //改进使用this <button onclick='deleteTask(this)'> //在增加中 oLi.innerHTML = `${oAddTextValue} <button οnclick='deleteTask(this)'>删除</button>`;  function deleteTask(obj){ 	//获取当前的li 	var oLi = obj.parentNode; 	 	//获取ul父节点 	var oToDoList = document.getElementById('todoList') 	 	//删除对应的li节点 	oToDoList.removeChild(oLi) }  

DOM获取属性节点对象

元素节点对象.attributes,返回该元素节点对象上所有的属性节点的集合。

元素节点对象.getAttributeNode(‘html标签属性名’)获取指定的属性节点对象。

元素节点对象.getAttribute(‘属性名’)返回元素节点对象对应属性的值。

元素节点对象.setAttribute(‘html标签’,‘对应标签值’)设置元素节点对象属性。

元素节点对象.removeAttribute(‘html标签名’)删除元素节点对象属性。

注意获取getAttribute和赋值setAttribute可以不用这两个而直接使用对象img,如img.src=‘2.jpg’,但是删除还是要使用removeAttribute。

<div id='div1' class='div1'></div> <img src = '1.jpg' alt="" title='xxxxxx'> <button type='button' onclick='getAttr()'>获取属性节点对象</button> <button type='button' onclick='changImg()'>更改图片</button> --------------------------------------------------------------------- const getAttr = () =>{ 	let oDiv = querySelector('#div1')  	//返回一个伪数组 	let arrayAttrs = oDiv.attributes  	//通过赋值修改属性节点的值 	arrayAttrs[0].nodeValue = 'div2'  	 	//获取class属性节点对象 	oDiv.getAttributeNode('class')  //class = 'div1' }  function changImg(){ 	let img = document.getElementsByTagName('img')[0] 	//1.jpg 	let src = img.getAttribute('src') 	console.log(src) 	//或者直接 	console.log(img.src) 	 	//修改属性值,没有属性就添加,有就修改 	img.setAttribute("src","2.jpg") 	//或者直接 	img.src = '2.jpg' 	 	//删除属性值 	img.removeAttribute('title') } 

DOM样式表的获取

元素节点对象.style.css属性名
oDiv1.style获取内联样式表的style。

最终样式表 :
获取最终样式:多个选择器和样式表重叠后,最后网页上显示的样式;

JS只能获取最终样式中CSS属性的值,不能修通过该属性来修改;!!!

currentStyle  属性,只有IE支持, 如果值是 undefined,表示不支持,如果不支持,就要用现代DOM浏览的方法来获取。

#div1{ 	width:100px; 	height:100px; } <div id='div1'></div> <button type='button' onclick='getStyle()'>获取样式</button> <button type='button' onclick='getEndStyle()'>获取样式</button> const getStyle = () =>{ 	let oDiv1 = document.getElementById('div1') 	 	//oDiv1.style获取内联样式表的style <div id='div1' style='xxxx'> 	let width = oDiv1.style.width 	console.log(width)//"" 	 	//动画写在前面 	oDiv1.style.transition = "all 1s" 	//小驼峰命名法 	oDiv1.style.backgroundColor= 'red'  	 }  const getEndStyle = () =>{ 	let oDiv1 = document.getElementById('div1') 	let w 	if (oDiv1.currentStyle == undefined) {     	/*DOM谷歌,ie9及以上支持*/     	w =  document.defaultView.getComputedStyle(oDiv1, null).width; 	} else {     	/*IE 6-8 */         w = oDiv1.currentStyle.width 	} 	console.log(w) } 

本文转自互联网,侵权联系删除DaZeng:JavaScript基础二

赞(0) 打赏
部分文章转自网络,侵权联系删除b2bchain区块链学习技术社区 » DaZeng:JavaScript基础二
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

b2b链

联系我们联系我们