今天是正二八经的胡说八道之DOM。_childnode mousedown-CSDN博客

本文链接：https://blog.csdn.net/zjy1070168724/article/details/75304097

今天讲的是DOM。真的是
Mouse事件
Onmouseover：鼠标放在该区域上。
Onmouseout：鼠标离开该区域。
Onclick：script上发生鼠标点击触发。
Ondbclick：双击触发。
Onmouseup：松开元素。
Onmousedown：按下元素。
Onmousemove：鼠标在元素上动时都会触发改元素。
Parentnode childnode.
Parentnode：获取对象(父元素)。
Nodename：获取元素名字
Nodetype：元素节点1，属性节点2，文本节点3。
Nodevalue:h 获取节点值。
找子元素。
Firstchild：
获取第一个子元素。

<body>
        <ul id="a1">
            <<li title="第一段文字">第一个</li>
            <li title="第二段文字">第二个</li>
        </ul>
        <script type="text/javascript">
        /*获取子节点时，要注意父节点与子节点之间的换行，把换行当作子节点*/
        var arr = document.getElementById("a1");
        /*获取任意一个节点，childNodes[]得到的是子节点组成的数组，下标为第几个元素*/
        alert(arr.parentNode);
        alert(arr.childNodes[1]);
        </script>
</body>

<li/> <ul/> <body/>都是元素节点。里面的文本是他的子节点，文本节点。
<li/>和其中的文本存在父子关系。即<li/>父节点，“第一个”是文本节点。

Nodevalue 在文本节点中输出的就是文本内容。
获取属性节点

alert(document.getElementById("a1").getAttributeNode("id").nodeValue);
 var p = document.getElementsByTagName("div");
 /*取到页面上所有的div标签*/
for(var i = 0;i < p.length;i++){     
alert(document.getElementsByTagName("div")[0].childNodes[1].firstChild.nodeValue);
}

通过class来查找

        <p class="a1">我是p</p>
        <div class="a1">
            我是div1
        </div>
        <div class="a1">
            我是div2
        </div>
        <div class="a1">
            我是div3
        </div>
        <hr />
        <script type="text/javascript">
            var arrs = document.getElementsByClassName("a1");
            var text = "";
            for (var i = 0;i < arrs.length;i ++) {
                text += arrs[i].innerHTML;
            }
            document.write(text);//这里没在方法里就可在构建页面时进行write，不会覆盖。
        </script>

添加一个span的方法

var span = document.createElement("span"); /*创建一个span*/
            var text = document.createTextNode("我是span");/*创建一个文本节点*/
            span.appendChild(text);/*给span中添加文本节点*/
            var parent = document.getElementById("a1");
            parent.getAttribute("id");
            a1.appendChild(span);/*给div中添加span*/

Insertbefore

var ndiv = document.createElement("div");
var nt = document.createTextNode("我是新的div");
ndiv.appendChild(nt);
var father = document.getElementById("a1");
father.insertBefore(ndiv,document.getElementById("a2"));
/*a.insertbefore(b,c)
* a：找到父劫点
* b：信号到要超入得文本
* c：插入的位置
*/


// replacechild() 替换

var replace = document.createElement("div");
var text2 = document.createTextNode("我是替换上去的额");
var child = document.getElementById("a2");
replace.appendChild(text2);
/*parent.removeChild(child);*/
/*child.parentNode.remove(child);*/
parent.replaceChild(replace,document.getElementById("a3"));
/*A.Repalcechild(B.C);    用B替换C
A：父节点。
B：新节点。
C：老节点。*/

属性节点(更改与获取)

var div = document.getElementById("d");
div.setAttribute("title","我是div");
alert(div.getAttribute("id"));