JavaScript案例

1.案例一：在末尾添加节点

• 第一步：获取到 ul 标签

• 第二步：创建 li 标签
  document.createElement（“标签名称”）;方法

• 第三步：创建文本
  document.createTextNode（“文本内容”）；

• 第四步：把文本添加到 li 下面
  使用 appendChild 方法

• 第五步：给 li 添加 ul 末尾
  使用 appendChild 方法
  代码实现：

    
        

            
111
            
222
            
333
        
        
        

        
        
    

2.元素对象（element 对象）

要操作 element 对象，首先必须要获取到 element
——使用 document 里面相应的方法获取
方法：

获取属性里面的值
getAttribute（“属性名称”）;
代码实现：

//先要获取input标签
var  input1=document.getElementById（“inputid”）；
alert（input1.value）;   //弹出 aaa
alert（input1.getAttribute（“value”））； //弹出 aaa

设置属性的值

input1.setAttribute（“class”，“haha”）；

删除属性值

input1.removeAttribute（“name”）；

不能删除 value 值

3.想要获取标签下面的子标签

使用属性 childNodes,但是这个属性兼容性很差
获得标签下面子标签的唯一有效方法，使用 getElementByTagName ()`方法'

    
        

            
aaaa
            
bbb
            
cccc
        
        
    

3.Node 对象属性一

NodeName
nodeType``nodeValue`

使用 dom 解析 html 时，需要 html 里面的标签，属性和文本都封装成对象
标签节点对应的值

    
        哈哈
        
    

nodeType：1
NodeName：大写标签名称 比如 SPAN
nodeValue：null

属性节点对应的值

nodeType：2
NodeName：属性名称
nodeValue：属性的值

文本节点对应的值

nodeType：3
NodeName：#text
nodeValue：文本内容

5.Node 对象的属性二

qqq
www
www
www

父节点
ul 是 li 的父节点
parentNode

var li1=document.getElementById("li1");
var ul1=li1.parentNode;
alert（ul1.id）;//ulid

子节点
li 是 ul 的子节点

childNodes：得到所有子节点，但是兼容性很差
firstchild：获取第一个子节点

var ul1=document.getElementById（“ulid”）；
var li1=ul1.firstchild;
alert（li1.id）;//li1

lastchild：获取最后一个子节点

var ul1=document.getElementById（“ulid”）；
var li4=ul1.lastchild;
alert（li4.id）;//li4

同辈节点
li 直接关系是同辈节点
nextSibing：返回一个给定节点的下一个兄弟节点
previousSibling：返回一个给定节点的上一个兄弟节点