js_DOM操作
2024-08-29 16:28:28
嗯,大过年的上次更新应该还是在,大年30前一天,说好的一天更一篇,感觉食言了,虽然没有更,但是,每天还是坚持在学习的,所以今天的任务就是把这几天学的都发上来。
博客,我觉得不仅仅是交流知识的地方,我宁愿把它写成我的生活日记。有差的,欢迎拍砖。
好了,进入正题吧。
DOM操作,我觉得可以归结成三个,一个标签节点,一个属性节点,一个文本节点。
这里的
li 就是标签节点;
alt就是属性节点;
第一个是文本节点(不是alt里面的);
接下来我将分别用两个例子来解释,这三个点。
我先把html放上来:
<body>
<ul>
<li alt="第一个">第一个</li>
<li>第二个<br />换行了</li>
<li>第三个</li>
</ul>
<!--<uL id="father"><li>第四个</li><li>第五个</li><li id="tt">第六个</li></uL> 这里我把叠起来,跟下面等会的操作是有区别的-->
<uL id="father">
<li>第四个</li>
<li>第五个</li>
<li id="tt">第六个</li>
</uL>
<button id="dd">点击获取第六个内容</button>
</body>
标签节点:
window.onload = function(){
var a = document.getElementById("dd");/*这里就是获取标签节点,获取button按钮,我这里是通过Id,还有其他很多方式,注意一点其他的是类数组*/
a.onclick = function(){/*点击事件*/
var d = document.getElementById("tt").childNodes[0].nodeValue;/*得到含有id=“tt”的标签,然后他的字节点,看html,只有“第六个”这几个字,这就是文本节点,nodeValue这个就是其所含的内容*/
alert(d);/*输出,注意我这里文本节点稍微带了一下*/
}
var por = document.getElementsByTagName("li")/*这是通过标签选择器,得到li标签数组,赋值给por*/
alert(por.length+" "+por[0].tagName+" "+por[1].childNodes[1].nodeName);/*输出,得到,por[]数组长度,第一个li标签的名字,第二个li的文本节点的内容*/
属性节点,文本节点:
/*得到节点*/
var first = document.getElementsByTagName("li")[0];/*标签选择器得到第一个li标签*/
console.log(first.getAttribute("alt"));/*getAttribute()方法就是得到目标对象的(里面属性)的值*/ /*创建节点*/
var Pcreate = document.createElement("p");/*创建一个p标签*/
var Textcreate = document.createTextNode("我创建了文本节点");/*createTextNode创建文本节点,并赋予内容*/
var Attcreate = document.createAttribute("style");/*createAttribute创建属性,创建的属性是style*/
Attcreate.value = "color:red";/*赋予属性值*/
Pcreate.setAttributeNode(Attcreate);/*setAttributeNode,把创建的属性节点放入创建的p标签里*/
Pcreate.appendChild(Textcreate);/*appendchild把创建的文本节点放入p标签里*/
document.body.appendChild(Pcreate);/*然后把p标签放入到body*/
最新文章
- 为Gradle添加tomcat插件,调试WEB应用
- Optimize str2date function
- Android_Service
- node.js使用经验记录
- bzoj 3653 [湖南集训]谈笑风生
- 基于hi-nginx的web开发(python篇)——utf-8编码
- 关于如何在mac系统上安装Git并在码市上建立项目
- php 守护进程(Daemon)
- 洛谷P3379 【模板】最近公共祖先(LCA)(树链剖分)
- Django(十二)—关于查询知识点总结
- Android 记录点滴
- 【转】python文件和目录操作方法大全(含实例)
- 基于Html的SEO(很基础,更是前端必须掌握之点)
- git log 高级用法
- 使用Fidder从安卓模拟器获取APP内H5游戏网址
- 移动互联网App兼容性测试
- I.MX6 OTG set as slave device hacking
- Mockplus是如何节省你的原型时间的?
- 微信小程序中用户唯一ID的获取
- C#如何用OpenFileDialog控件打开图片显示到PictureBox这个控件
热门文章
- 浅谈Spring事务隔离级别
- ionic中将service中异步返回的数据赋值给controller的$scope
- (H5)FormData+AJAX+SpringMVC跨域异步上传文件
- 如何解决找不到方法HttpServletRequest.getServletContext() ---- NoSuchMethodError
- CodeForces 598E Chocolate Bar
- 使用RGBa和Filter实现不影响子元素的CSS透明背景
- 一个很好玩的命令:stty
- PHP header使用
- JS表单原生验证器
- 通过Jenkins跑Jmeter接口测试脚本,我想当有接口跑失败时Jenkins发送邮件通知,这个如何弄呢