2017.11.13第九课
来源:互联网 发布:网络虚拟现实技术 编辑:程序博客网 时间:2024/06/18 10:52
一、节点对象的方法
1.Node.appendChild()
接收一个对象节点作为参数,将其作为最后一个节点,插入当前节点。
var addCountry = function() { var cinput = document.getElementById("country"); var cvalue = cinput.value; var cli = "<li id='" + cvalue + "'>" + cvalue + "</li>"; var culInnerHtml = document.getElementById("_asia").innerHTML; culInnerHtml = culInnerHtml + cli; document.getElementById("_asia").innerHTML = culInnerHtml;};var addCountry2 = function() { var cinput = document.getElementById("country"); var cvalue = cinput.value; var cli = document.createElement("li"); cli.innerHTML = cvalue; document.getElementById("_asia").appendChild(cli);};
2.Node.hasChildNodes()
返回一个布尔值,判断当前节点是否有子节点。
var _asiaUl = document.getElementById("_asia");if (_asiaUl.hasChildNodes()) { _asiaUl.innerHTML = "";}
3.Node.insertBefore()
方法用于将某个节点插入当前节点的指定位置。接收两个参数,第一个参数是所要插入的节点,第二个参数是当前节点的一个子节点。新的节点将插在这个节点的前面。该方法返回被插入的新节点。
var getIndexLi = function(index) { var _asiaChilds = document.getElementById("_asia").childNodes; var k = 1; for (var i = 0; i < _asiaChilds.length; i++) { var cnode = _asiaChilds[i]; if (cnode.nodeName === 'LI') { if (index === k) { return cnode; } k++; } }}var addCountry3 = function() { var cinput = document.getElementById("country"); var cvalue = cinput.value; var cli = document.createElement("li"); cli.innerHTML = cvalue; var _asiaEle = document.getElementById("_asia"); var cindex = document.getElementById("cindex").value; var cele = getIndexLi(parseInt(cindex)); _asiaEle.insertBefore(cli, cele);};
4.Node.removeChild()
方法接收一个子节点作为参数,用于从当前节点移除该子节点。返回被移除的子节点。
var removeCountry1 = function(id) { var _asiaEle = document.getElementById("_asia"); _asiaEle.removeChild(document.getElementById(id));}
5.Node.replaceChild()
方法用于将一个新的节点替换当前节点的某一个子节点。接收两个参数,第一个参数是用来替换的新节点,第二个参数是将要被替换的节点。
var repalceCountry = function() { var newEle = document.createElement("LI"); newEle.innerHTML = "Tailand"; var _asiaEle = document.getElementById("_asia"); _asiaEle.replaceChild(newEle, document.getElementById("_japan"));}
二、Element对象
1. 特征相关的属性
Element.id,Element.tagName,Element.innerHTML,Element.outerHTML(包含标签定义本身)Element.classNameElement.classList:add/remove/contains/toggle/item/toStringvar toggleCred = function() { var cl = document.getElementById("_div").classList; // cl.toggle("cred"); if (cl.contains("cred")) { cl.remove("cred"); } else { cl.add("cred"); }}
2.盒子模型相关属性
Element.clientHeight/clientWidth
返回元素可见部分的高度和宽度:注意包含了 padding 的值
Element.clientLeft/Top
获取元素左边框、顶部边框的宽度
3.相关节点的属性
Element.children
返回当前元素节点的所有子元素。
Element.childElementCount
返回当前元素节点所有子元素的个数。
var _asia = document.getElementById("_asia");console.log(_asia.children);console.log(_asia.childElementCount);console.log(_asia.children.length);Element.firstElementChild/lastElementChildElement.nextElementSibling/previousElementSibling
4.查找相关属性
Element.querySelector()
该方法接收 CSS 选择器作为参数,返回父元素第一个匹配的子元素。
<ul id="_asia"><li id="_china" class="t2">China <input type="button" id="btn" value="X" onclick="removeCountry1('_china');"/></li><li id="_korea" class="t1">Korea <input type="button" id="btn" value="X" onclick="removeCountry1('_korea');"/></li><li id="_japan" class="t1 t2">Japan <input type="button" id="btn" value="X" onclick="removeCountry1('_japan');"/></li> </ul>var _ali = document.getElementById("_asia").querySelector(".t1");console.log(_ali); // _korea
Element.querySelectorAll()方法接收 CSS 选择器作为参数,返回一个 NodeList 对象,包含所有匹配的子元素。
Element.getElementsByTagName()注意是标签的参数大小写不敏感
Element.getElementsByClassName()
方法接收类名,返回当前节点所有匹配类名的元素
Element.closest()
方法接收 CSS 选择器作为参数,返回当前元素节点最接近的父元素
<div id="_d" class="ddd"> Here is _d <div id="_d1" class="ddd"> Here is _d1 <div id="_d2"> Here is _d2 <div id="_d3"> Here is _d3 </div> </div> </div></div>var _d1 = document.getElementById("_d3").closest(".ddd");console.log(_d1.textContent); // _d1
5.其他方法
Element.remove()
将当前节点从 DOM 树上删除。
二、Attribute 对象
HTML 元素中包含标签名和若干个键值对,这个键值对我们称为“属性”(Attribute)
在 DOM 中,我们很少直接对属性进行操作,一般都是元素节点对象(Element对象)来操作属性。
1.Element.attributes属性
返回一个类似数组的动态对象
示例:遍历元素节点的所有属性
var d1Ele = document.getElementById("_d3").nextElementSibling;if (d1Ele.hasAttributes()) { var d1Att = d1Ele.attributes; for (var i = 0; i < d1Att.length; i++) { console.log(d1Att[i].name + ":" + d1Att[i].value); }} else { console.log("No attributes To show!");}
2. 元素节点对象的属性
HTML元素节点的标准属性,会自动成为元素节点对象的属性。
var _abaidu = document.getElementById("_abaidu");console.log(_abaidu.href); // http://www.baidu.comconsole.log(_abaidu.target); // _blankconsole.log(_abaidu.test); // undefined
虽然在Html中大小写是不敏感的,但是在 Javascript 中,属性大小写敏感,而且属性一般都是采用小写。
有些HTML属性名是 Javascript 的保留字,转为 Javascript 属性时,需要改名字,主要由class-className,for-htmlFor
3.属性操作的标准方法
getAttribute()
setAttribute()
上述两个方法对所有的属性都适用(包含用户自定义的方法)
_abaidu.setAttribute("href","http://www.sina.com");console.log(_abaidu.getAttribute("href"));_abaidu.setAttribute("test","xxx");console.log(_abaidu.getAttribute("test"));hasAttribute()removeAttribute()
4.dataset 属性
有时需要在 Html 上附加数据,供 Javascript 脚本使用。一种解决方法是自定义属性。
虽然自己随意定义的属性名可以通过相关的方法进行定义和赋值,但是会使得HTML元素的属性不符合规范,导致网页的HTML代码通不过校验。
更好的解决方法是,使用标准提供的data-*属性。
再使用元素对象的 dataset 属性对自定义的属性进行操作。
注意:data-后面的属性有限制,只能包含字母、数字、连词线(-)、点(.)、冒号(:)和下划线(_)。而且属性名不应该使用大写字母。比如data-helloWorld,我们不这么写,而写成data-hello-world。
在转成dataset的键名的时候,连词线后面如果跟着一个小写字母,那么连词线会被移除,该小写字母转为大写字母,其他字符不变。
console.log(_abaidu.getAttribute("data-hello-world"));console.log(_abaidu.dataset.helloWorld); // 驼峰命名
课后作业:
•完成CODING COFFEE菜单页的增删改功能。
部分代码
初步实现了通过表单输入的内容进行相应的增删及替换功能,然而还有一些问题,例如替换成功后的内容,格式并没有同原先的文本内容一样换行,还需要继续修改调试
function addCoffee(){ var coffeename=document.getElementById('cofname').value; var coffeecontent=document.getElementById('cofcontent').value; var coffeeimg=document.getElementById('cofimg').value; var html1='<div class="main"><hr><div class="img"><img class="im" src="'+coffeeimg+'"></div>'; var html2='<div class="text"><h2>'+coffeename+'</h2>'; var html3='<p>'+coffeecontent+'</P></div>'; var html4='<div style="clear:both;"></div></div>'; var add=html1+html2+html3+html4; var newhtml = document.getElementById('all').innerHTML+add; document.getElementById('all').innerHTML=newhtml; } function removeCoffee(){ var id=document.getElementById('cofname').value; var all=document.getElementById('all'); all.removeChild(document.getElementById(id)); } function replaceCoffee(){ var name=document.getElementById('cofname').value; var content=document.getElementById('cofcontent').value; var img=document.getElementById('cofimg').value; var newcoffee=document.createElement('main'); newcoffee.setAttribute('id','name'); newcoffee.innerHTML='<hr><div class="img"><img src="'+img+'" class="im"></div><div class="text"><h2>'+name+'</h2><p>'+content+'</P></div><div style="clear:both;"></div>'; var id=document.getElementById('old').value; var all=document.getElementById('all'); all.replaceChild(newcoffee,document.getElementById(id)); }
- 2017.11.13第九课
- 第九课 适配器模式
- 第九课 字符串比较
- 第九课学习
- 吉他第九课
- Java第九课
- C语言第九课
- OC第九课
- 第九课:SDL计时器
- 第九课 输出语句
- 第九课:VBO索引
- 第九课 right部分
- 第九次课总结
- 第九课 Learing Theory
- 第九课 协同程序
- 数据库学习第九课
- C语言第九课
- 第九课 汇总数据
- 英伟达首席执行官:自动驾驶汽车将于2020年上路 | 行业
- String、StringBuffer与StringBuilder之间区别
- SGU 416 Optimal Dartboard(找规律)
- python编写冒泡排序
- Spring AOP+注解的方式实现缓存的获取
- 2017.11.13第九课
- 李彦宏何时能再乘无人车上五环?需要解决17条法规 | 分析
- GPU计算光流:gpu_flow
- 使用聊天机器人做客服工作是一种什么体验? | 行业
- Opencv Mat类的取值操作
- 让你完全理解base64是怎么回事
- 循环结构的区别
- 创建表的规范写法
- CentOS 修改主机名