前端基础之JavaScript_(5)_DOM对象总结
DOM 定义了访问和操作HTML文档的标准方法
访问(查找标签)
//---- 直接查找
document.getElementById(“idname”)
document.getElementsByTagName(“tagname”)
document.getElementsByName(“name”)
document.getElementsByClassName(“name”) //---- 导航属性
NodeElement.parentElement // 父节点标签元素
NodeElement.children // 所有子标签
NodeElement.firstElementChild // 第一个子标签元素
NodeElement.lastElementChild // 最后一个子标签元素
NodeElement.nextElementtSibling // 下一个兄弟标签元素
NodeElement.previousElementSibling // 上一个兄弟标签元素
操作标签:
1 文本操作
取值操作
element.innerHTML (关于标签的操作)
element.innerText (关于文本操作)
赋值操作:
element.innerHTML=""
element.innerText=""
2 属性操作
取属性值: (1)element.getAttribute(属性名)
(2)element.属性名 (推荐)
赋值操作: (1)element.setAttribute(属性名,属性值)
(2)element.属性名=属性值
针对class属性:
(1) element.classlist.add("class值")
(2) element.classlist.remove("class值")
关于select标签:
ele_select.options.length=0 清空操作
ele_select.selectedIndex 选中option的索引值
关于style属性:实现对标签的css操作:
element.style.样式属性="值"
3 节点操作
-----添加标签
生成一个标签:var ele_create=document.createElement("标签名") // <p></p> <img>
添加标签: 父标签.appendChild(添加标签对象)
.insertBefore
-----删除节点: 父标签.removeChild(查找到的标签对象)
-----替换节点:
父标签.replaceChild(newnode,查找到的标签对象)
----- 拷贝一个节点
要拷贝的标签:ElementNode.cloneNode(true); // true 为深度拷贝,拷贝ElementNode标签及子标签,不加true为浅拷贝,只拷贝ElementNode标签
DOM:两种绑定事件方式:
//方式1
<script>
function foo(self){
alert(123) // self: <p onclick="foo(this)"></p>
}
</script>
<p onclick="foo(this)"></p> //方式2:
一个标签对象.on事件=function(){
alert(456) // this:绑定事件的标签对象
}
具体事件
点击事件 onclick
获取/失去焦点 onfocus onblur
内容发生变化 onchange (selecte)
onmouse 与鼠标相关的事件
提交事件:onsubmit
加载事件:onload
最新文章
- Entity Framework 使用Mysql的配置文件
- eap-ttls/mschapv2
- 如何在MFC中创建非矩形button
- 理解SQL Server是如何执行查询的 (2/3)
- 第2章 面向对象的设计原则(SOLID):2_里氏替换原则(LSP)
- NSURLConnection &; NSRULSession
- Web App 讲义教程
- W3Cschool学习笔记——CSS3教程
- laravel5单元测试
- Lesson 28 No parking
- Linux静态库与动态库制作过程
- __x__(14)0906第三天__<;iframe>; 内联框架 引入有一个外部html页面
- 字符模式console usb串口安装centos
- web(六)css的基本语法、取值与单位
- 从零开始学 Web 之 CSS3(二)颜色模式,文字阴影,盒模型,边框圆角,边框阴影
- [转]Building a REST-Backend for Angular with Node.js &; Express
- C#开发Unity游戏教程之Unity中方法的参数
- Android -- 自定义标题栏,背景颜色填充满
- mysql 数据操作 单表查询 group by 注意
- 【FAQ】调用接口序列化问题