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

第一步：获取到 ul 标签
第二步：创建 li 标签
document.createElement（“标签名称”）;方法
第三步：创建文本
document.createTextNode（“文本内容”）；
第四步：把文本添加到 li 下面
使用 appendChild 方法
第五步：给 li 添加 ul 末尾
使用 appendChild 方法
代码实现：

    <body>
        <ul id="ulid">
            <li>111</li>
            <li>222</li>
            <li>333</li>
        </ul>
        
        <br />
        <input type="button" value="add" onclick="add1()"/>
        <script type="text/javascript">
            //在末尾添加
            function add1(){
                //获取到ul标签
                var ul1 = document.getElementById("ulid");
                //创建标签
                var li1 = document.createElement("li");
                //创建文本
                var text1 = document.createTextNode("555");
                
                li1.appendChild(text1);
                
                ul1.appendChild(li1);
            }
        </script>
    </body>

2.元素对象（element 对象）

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

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

<input type="text" name="name1" id="inputid" value="aaa"/>
//先要获取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 ()`方法'

    <body>
        <ul id="ulid1">
            <li>aaaa</li>
            <li>bbb</li>
            <li>cccc</li>
        </ul>
        <script type="text/javascript">
            //获取到ul下面的所有子标签（子元素）
            //获取ul标签
            var ul11 = document.getElementById("ulid1");
            //获取ul下面的子标签
            //var lis = ul11.childNodes;//不兼容
            var lis =ul11.getElementsByTagName("li");//兼容
            alert(lis.length);
        </script>
    </body>

3.Node 对象属性一

NodeName
nodeType``nodeValue`

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

    <body>
        <span id ="spanid">哈哈</span>
        <script type="text/javascript">
            //获取标签对象
        var span1 = document.getElementById("spanid");
        alert(span1.nodeType);//1
        alert(span1.nodeName);//SPAN
        alert(span1.nodeValue);//空
        //属性
        var id1 = span1.getAttributeNode("id");
        alert(id1.nodeType);//2
        alert(id1.nodeName);//id
        alert(id1.nodeValue);//spanid
        //文本
        var text1 = span1.firstChild;
        alert(text1.nodeType);//3
        alert(text1.nodeName);//#TEXT
        alert(text1.nodeValue);//哈哈
        </script>
    </body>

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

属性节点对应的值

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

文本节点对应的值

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

5.Node 对象的属性二

<ul id="ulid">
<li id="li1">qqq</li>
<li id="li2">www</li>
<li id="li3">www</li>
<li id="li4">www</li>
</ul>

父节点
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：返回一个给定节点的上一个兄弟节点

JavaScript案例

JavaScript案例

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

2.元素对象（element 对象）

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

5.Node 对象的属性二

推荐阅读更多精彩内容