JavaScript操作DOM对象

DOM 是 JavaScript 操作网页的接口，全称为“文档对象模型”

（Document Object Model）。它的作用是将网页转为一个

JavaScript 对象，从而可以用脚本进行各种操作（比如对元素增删

内容）

节点的类型有七种 :

Document：整个文档树的顶层节点

DocumentType：doctype标签

Element：网页的各种HTML标签 ,比如a标签 br等

Attribute：网页元素的属性（比如class="right"）

Text：标签之间或标签包含的文本 ，文本也算节点

Comment：注释

DocumentFragment：文档的片段（不常用忽略）

节点树：

浏览器原生提供document节点，代表整个文档

document
// 整个文档树

除了根节点，其他节点都有三种层级关系

父节点关系（parentNode）：直接的那个上级节点
子节点关系（childNodes）：直接的下级节点
同级节点关系（sibling）：拥有同一个父节点的节点

Node.nodeType属性：

不同节点的nodeType值不同

文档节点（顶层节点）：9，，对应常量 Node.DOCUMENT_NODE

元素节点：1 ，对应常量Node.ELEMENT_NODE

属性节点：2，对应常量Node.ATTRIBUTE_NODE

文本节点：3，对应常量Node.TEXT_NODE

文档片断节点：11，对应常量Node.DOCUMENT_FRAGMENT_NODE

可以用来判断节点类型：

 if (document.nodeType==9){
        console.log("这是document文档节点")
    }

访问节点：

使用getElement系列方法访问指定节点：

getElementById()：根据id获取特定DOM元素

getElementsByName()：根据name属性的值获取元素

getElementsByTagName()：根据标签名获取元素



document.getElementsByName('myInput')。

document.getElementsByTagName('div')：

通过这个str可以是一个数组，访问0来获取对应的值

var str = document.getElementsByTagName("div")[0]
console.log(str);

否则就显示：

var str = document.getElementsByTagName("div");
console.log(str);

修改标签内的内容：innerHTML

这样就可以达到通过JS修改页面内容

<div>aaa</div>
<div>bbb</div>

<script>
    var str = document.getElementsByTagName("div")[0]
    str.innerHTML="蛋蛋";
</script>

document.getElementsByClassName()：

也可以通过innerHtml修改

<input class="input01">aa</input>

<script>
    var str02 = document.getElementsByClassName("input01");
    console.log(str02);
</script>

输出内容就是这样，可以用这种数组的方式输出具体的

var str02 = document.getElementsByClassName("input01")[0];

document.getElementById('myElement')：

通过s这个方法可以直接输出，就不像上面的需要读一群然后挨个输出，因为id只有一个

var str03 = document.getElementById("打打");
console.log(str03);

document.querySelector() ：

方法接受一个 CSS 选择器作为参数，返回匹配该选择器的元素节点。如果有多个节点满足匹配条件，则返回第一个匹配的节点。如果没有发现匹配的节点，则返回 null。

var el1 = document.querySelector('.myclass');

document.querySelectorAll()：

document.querySelectorAll 方法与 querySelector 用法类似，区别是返回一个NodeList 对象，包含所有匹配给定选择器的节点

var elementList =document.querySelectorAll('.myclass');

根据层次关系访问节点：

访问节点：

感觉跟脱了裤子放屁一样。。。

属性名称	描述
parentNode	返回节点的父节点	document.getElementById("child").parentNode;
childNodes	返回子节点集合，childNodes[i]	var childNode = document.getElementById("child").parentNode;这个返回的值childNode是一个集合
firstChild	返回节点的第一个子节点
lastChild	返回节点的最后一个子节点
nextSibing	获取当前节点的下一个兄弟节点	document.getElementById("first").nextSibling;
previousSibing	获取当前节点的上一个兄弟节点

element属性：

和上面比多了一个element，是因为上面的会把换行也当作节点，而带element的不会这样

属性名称	描述
firstElementChild	返回节点的第一个子节点
lastElementChild	返回节点的最后一个子节点
nextElementSibling	下一个节点
previousElementSibing	上一个节点

element对象属性：

Element.id：

Element.id 属性返回指定元素的 id 属性，该属性可读写

var p = document.querySelector('p');
p.id

Element.className：

var div = document.getElementById('myDiv');
div.className

节点信息

nodeName：节点名称

nodeValue：节点值

nodeType：节点类型

需要举例子补充

操作节点:

操作节点属性：

getAttribute("属性名")

setAttribute("属性名","属性值")

创建节点：

createElement（tagName）创建一个标签名为tagName的新元素节点

var newDiv = document.createElement('div');
newDiv.innerHTML="你好小蛋蛋";
// 将新创建的div添加到body中
document.body.appendChild(newDiv); 
//打印标签
console.log(newDiv);

document.createTextNode()：

用来生成文本节点（ Text 实例），并返回该节点。

A.appendChild(B) 把B节点追加至A节点的末尾

也可以添加内容

var newDiv = document.createElement('div');
// 使用 document.createTextNode 创建文本节点
var newContent = document.createTextNode('Hello');
//新创建的节点添加这个新建内容
newDiv.appendChild(newContent);
// 将新创建的 div 添加到 body 中
document.body.appendChild(newDiv);

document.createAttribute()：

生成一个新的属性节点（ Attr 实例），并返回它

这里放入属性值和属性不再使用appendChild

使用value给属性赋值

使用setAttributeNode把赋值后的属性放到标签里面

 var text = document.createElement("p");
    //创建属性
    var id = document.createAttribute("id");
    //直接用value给属性赋值
    id.value = "first";
    //把赋值后的属性放到标签p里
    text.setAttributeNode(id);
    console.log(text);

insertBefore（A，B）把A节点插入到B节点之前

cloneNode（deep）复制某个指定的节点

删除和替换节点:

removeChild( node) 删除指定的节点

replaceChild( newNode, oldNode) 用其他的节点替换指定的节点

container.replaceChild(newNode, oldNode);

操作节点的样式：

style属性：

document.getElementById("titles").style.color="#ff0000"; 
document.getElementById("titles").style.fontSize="25px ";

onclik：当用户单击某个对象时调用事件
onmouseover：鼠标移到某元素之上
onmouseout：鼠标从某元素移开
onmousedown：鼠标按钮被按下


  <div id="myDiv" onclick="changeColor()">点击我!</div>

    <script>
        function changeColor() {
            // 随机生成颜色
            const randomColor = '#' + Math.floor(Math.random()*16777215).toString(16);
            // 改变 div 的背景颜色
            document.getElementById('myDiv').style.backgroundColor = randomColor;
        }
    </script>

function over(){
        document.getElementById("cart").style.backgroundColor="#ffffff";
        document.getElementById("cart").style.zIndex="100";
        document.getElementById("cart").style.borderBottom="none";
        document.getElementById("cartList").style.display="block";
        document.getElementById("cartList").style.position="relative";
        document.getElementById("cartList").style.top="-1px";
}

className属性：

HTML元素.className="样式名称"

function over(){
     document.getElementById("cart").className="cartOver";
     document.getElementById("cartList").className="cartListOver";
     }
function out(){
     document.getElementById("cart").className="cartOut";
     document.getElementById("cartList").className="cartListOut";
     }

获取元素的样式：

HTML元素.style.样式属性;

document.getElementById("titles").style.color="#ff0000"; 
document.getElementById("titles").style.fontSize="25px ";

总结：操作元素属性，内容，样式

方法	说明
getAttribute（"属性名"）	根据元素名获得元素属性值
setAttribute（"属性名"，"属性值"）	设置元素某个属性的值
className	操作元素的class属性（）	e.className = "chen";
innerHTML	操作元素内容	li.innerHTML = "孙悟空";
innerText	操作元素文本内容	li.innerText= "孙悟空";
e.style.css	操作css，只能操作行内样式
value	操作表单元素值	赋值：document.getElementById("cityname").value = 103;

注意：checked是boolean值，在单选框和多选框里面经常出现，像这种给checked赋值就就可以等于true或false

//单选框赋值，性别
var sexs = document.getElementsByName("sex");
//默认男
sexs[0].checked = true;

重要例题：表单取值，和表单赋值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form>
    用户名：<input type="text" id="username"/><br>
    密码：<input type="password" id="userpassword" autocomplete="current-password"><br>
<!--    多选框-->
    爱好：<br>
    <input  class="lovers" value="111" type="checkbox">唱
    <input class="lovers" value="222" type="checkbox">跳
    <input class="lovers" value="333" type="checkbox">RAP
    <br>



<!--    单选框-->
    性别：<br>
         <input name="sex" value="1"  type="radio">男
         <input name="sex" value="0" type="radio">女<br>
<!--    下拉列表-->
    国家:
    <select id="cityname">
        <option value="101">中国</option>
        <option value="102">美国</option>
        <option value="103">鹰国</option>
    </select>
    <br>
</form>
<button onclick="qvZhi()">立即注册</button>
<button onclick="fuZhi()">表单赋值</button>

<script>
    function qvZhi(){
        //用户名
       var user =  document.getElementById("username").value;
       console.log("用户名"+user);
       //密码
        var password =  document.getElementById("userpassword").value;
        console.log("密码"+password);

        //爱好,多选框
        var lovervalue = document.getElementsByClassName("lovers");
        var lovers = new Array();
        for (var i=0;i<lovervalue.length;i++){
            //如果被选中，放到lovers数组中
            if (lovervalue[i].checked){
                lovers.push(lovervalue[i].value);

            }

        }
        console.log("爱好value有:"+lovers)

        //性别单选框
        //当用户选择一个单选框时，它的 checked 属性会变为 true。这意味着该单选框被选中。如果单选框没有被选中，则其 checked 属性为 false
        var sexs = document.getElementsByName("sex");
        var sex = 1;
        for (var i = 0;i <sexs.length;i++){
            //判断boolean值
            if (sexs[i].checked){
                sex = sexs[i].value;
            }
        }
        console.log("性别value为："+sex);

        //下拉列表，国家
        var city = document.getElementById("cityname").value;
        console.log("国家value为："+city)

    }
    function fuZhi() {
        //用户名赋值
        document.getElementById("username").value="张三";
        //密码赋值
        document.getElementById("userpassword").value="111222";
        //爱好赋值

        var lovers = document.getElementsByClassName("lovers");
        for (var i=0;i<lovers.length;i++){
            lovers[2].checked = true;
            lovers[0].checked = true;
        }
        //单选框赋值，性别
        var sexs = document.getElementsByName("sex");
            //默认男
            sexs[0].checked = true;


        document.getElementsByName("sex").checked="0";
        //下拉列表赋值，国家
        document.getElementById("cityname").value = 103;

    }

</script>

</body>
</html>