1.案例一:在末尾添加节点
第一步:获取到ul标签
第二部:获取到li标签
document.createElement("标签名称")方法
第三步: 创建文本
document.createTextNode("文本内容")
第四步:把文本添加到li下面
使用appendChild()方法
第五步:把li添加到ul末尾
使用appendChild()方法
2.元素对象(element对象)
要操作element对象,首先必须要获取到element,
使用document里面相应的方法获取
方法:
获取属性里面的值
getAttribute("属性名称")
var input1 = document.getElementById("inputid");
//alert(input1.value);
alert(input1.getAttribute("value"));
设置属性的值
input1.setAttribute("class","haha");
删除属性
input1.removeAttribute("name");
不能删除value
想要获取标签下面的子标签
使用属性 childNodes,但是这个属性兼容性很差,一般不使用
获得标签下面子标签的唯一有效办法:getElementsByTagName
var ul11 = document.getElementById("ulid1");
//获取ul下面的子标签
// var lis=ul11.childNodes;
// alert(lis.length);
var lis=ulid1.getElementsByTagName("li");
alert(lis.length);
3.Node对象的属性一
nodeName
nodeType
nodeValue
使用dom解释html的时候,需要html 里面的标签、属性、文本都封装成对象。他们各自对应上面三种对象都有不同的值。
标签节点对应的值
nodeType : 1
nodeName : 大写的标签名称
nodeValue : null
属性节点对应的值
nodeType : 2
nodeName : 属性的名称
nodeValue : 属性的值
文本节点对应的值
nodeType : 3
nodeName : #text
nodeValue : 文本内容
4.Node对象的属性二
<ul>
<li>CCBZ</li>
<li>CBZZ</li>
</ul>
父节点
ul是li的父节点
parentNode
子节点
li是ul的子节点
childNodes 得到所有的子节点,但是兼容性很差
firstChild 第一个子节点
var ul1 = document.getElementById("ulid");
var li1 = ul1.firstChild;
alert(li1.id);
lastChild 最后一个子节点
var ul1 = document.getElementById("ulid");
var li1 = ul1.lastChild;
alert(li1.id);
同辈节点
li直接关系是同辈节点
nextSibling : 返回给定节点的下一个兄弟节点
var li3=document.getElementById("li3");
alert(li3.nextSibling.id);
previousSibling : 返回给定节点的上一个兄弟节点
var li3=document.getElementById
JavaScript笔记03
最新推荐文章于 2024-09-22 11:17:00 发布
本文主要探讨JavaScript的核心概念,包括变量、数据类型、作用域、闭包、原型链等重要知识点,帮助读者深入理解这门编程语言的底层机制,并提供实践应用中的技巧和注意事项。
摘要由CSDN通过智能技术生成