前端之javascript的DOM对象和标签

2023-01-03 09:50:06

一 DOM对象介绍

什么是HTML DOM

　　1.1 HTML Document Object Model（文档对象模型）

　　1.2 HTML DOM 定义了访问和操作HTML文档的标准方法。

　　1.3 HTML DOM 把 HTML 文档呈现为带有元素，属性和文本的树结构（节点树）

　DOM本身就是对象，DOM的结构如下：

　　节点关系：而根标签html有两个字标签，分别是head和body标签。而他们下面可以有任意个标签

　DOM节点如下：

　节点类型

　　HTML 文档中每一个成分都是一个节点

　　DOM的规定：

　　　整个文档是一个文档节点

　　　每个HTML标签是一个元素节点

　　　包含在HTML元素中的文本是文本节点

　　　每一个HTML属性是一个属性节点

　　document：整个节点，也就是这个文档

　　element：标签节点

　　text：文本节点

　　attribute：属性节点

　节点关系

　　节点树中的节点彼此拥有层级关系

　　父（parent），子（child）和兄弟（sibling）等术语用于描述这些关系。父节点拥有子节点。同级的子节点被称为兄弟节点。

　　　3.1在节点树中，顶端节点被称为根（root）

　　　3.2 每个节点都有父节点，除了根（它没有父节点）

　　　3.3 一个节点可拥有任意数量的子节点

　　　3.4 兄弟节点是拥有相同父节点的节点

　　节点之间的关系，如图：

访问HTML元素（节点），访问HTML元素等同于访问节点，我们能够以不同的方式来访问HTML元素。

二查找标签

　直接查找：

　　document.getElementById：以id查找标签，返回的对象是一个DOM对象，也就是标签对象

　　document.getElementsByClassName：以class值查找标签，返回的是一个数组的类型，数组里面是标签对象。

　　document.getElementsByTagName：以标签名查找标签，返回的是一个数字类型，数组里面是标签对象。

　　document.getElemensByName：以name查找标签，查找到所有的标签

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<div id="d1">111</div>

<div class="d1">222</div>

<div class="d1">333</div>

<div class="d1">444</div>

<p>ppp</p>

<script>

    console.log(document.getElementById('d1'));

    console.log(document.getElementsByClassName('d1'));

    console.log(document.getElementsByTagName('div'));

</script>

</body>

</html>

　导航查找：根据某个表情查找到同文档下的其他标签。

　　element.parentElement：拿到整个父级标签的所有内容

　　element.children：查找到所有的字标签。

　　element.nextElementsibling：拿到下一个兄弟标签

　　element.previousElementsibling：拿到上一个兄弟标签

　　element.firstElementchild：拿到第一子标签

　　element.lastElementchild：拿到最后一个子标签

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<div class="d1">

    <div class="d6">444</div>

    <div class="d2">

        <div class="d3">111</div>

        <div class="d4">222</div>

        <div class="d5">333</div>

    </div>

    <div class="d7">555</div>

    <div class="d8">666</div>

</div>

<script>

    var ele_d2=document.getElementsByClassName('d2')[0]

    console.log(ele_d2.parentElement);

    console.log(ele_d2.children);

    console.log(ele_d2.nextElementSibling);

    console.log(ele_d2.previousElementSibling);

    console.log(ele_d2.firstElementChild);

    console.log(ele_d2.lastElementChild);

</script>

</body>

</html>

三节点操作

　创建节点：

1	`createElement(标签名) ：创建一个指定名称的元素。`

　添加节点：

追加一个子节点（作为最后的子节点）

somenode.appendChild(newnode)

把增加的节点放到某个节点的前边

somenode.insertBefore(newnode,某个节点);

　删除节点：

1	`removeChild()：获得要删除的元素，通过父元素调用删除`

替换节点：

1	`somenode.replaceChild(newnode, 某个节点);`

节点属性操作：

　　1、获取文本节点的值：innerText innerHTML

　　2、attribute操作

     elementNode.setAttribute(name,value)    

     elementNode.getAttribute(属性名)        <-------------->elementNode.属性名(DHTML)

     elementNode.removeAttribute(“属性名”);

　　3、value获取当前选中的value值
1.input
2.select （selectedIndex）
3.textarea
　　4、innerHTML 给节点添加html代码：
该方法不是w3c的标准，但是主流浏览器支持
tag.innerHTML = “<p>要显示内容</p>”;

　文本操作：

　　innerText：只打印标签下面的文本，赋值时，只能够认识文本，不认识标签。

　　innerHLML：是什么取什么，赋值时能够识别标签。

　　　注意，在赋值时，是先清空了该表情下的所有内容，在赋值。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<div class="d1">

    <div class="d2">hello</div>

</div>

<script>

    var ele_div=document.getElementsByClassName('d1')[0];

    console.log(ele_div.innerText);

    console.log(ele_div.innerHTML);

    ele_div.innerText='<div>egon</div>';

    console.log(ele_div);

    ele_div.innerHTML='<div>alex</div>';

    console.log(ele_div);

</script>

</body>

</html>

　属性操作：

　　原生js操作：

　　　element.setAttribute：设置值

　　　element.getAttribute：取值

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<div class="d1" fang="">hello</div>

<script>

    var ele_div=document.getElementsByClassName('d1')[0];

    console.log(ele_div.getAttribute('d1'));

    ele_div.setAttribute('fang','jie');

    console.log(ele_div.getAttribute('d1'));

</script>

</body>

</html>

　　DHTML的简化方式：

　　　element.属性名：取值

　　　element.属性名='值'：设置一个值

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<div class="c1" id="" fang="">hello</div>

<script>

    var ele_div=document.getElementsByClassName('c1')[0];

    console.log(ele_div.id)

    ele_div.id='d1';

    console.log(ele_div.id)

</script>

</body>

</html>

　　class操作：

　　　className：取出类的所有操作

　　　classList.add：给class加上一个值

　　　classList.remove：删除class的一个值

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<div class="d1 d2">hello</div>

<script>

    var ele_div=document.getElementsByClassName('d1')[0];

    console.log(ele_div.class);

    ele_div.classList.add(d3);

    ele_div.classList.remove(d2);

    console.log(ele_div);

</script>

</body>

</html>

　　value操作：

　　　textarea；select；input这三个标签都有value属性，而他们的操作方法都是一样的。

　其他：

　　this：代指当前标签，this是一个全局变量，只能被当做一个实参，不能被当做形参。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<input type="text" value="hello" class="i1"></input>

<script>

    var ele_input=document.getElementsByClassName('i1')[0]

    console.log(ele_input.value)

</script>

</body>

</html>

　改变css样式：

<p id="p2">Hello world!</p>

document.getElementById("p2").style.color="blue";

.style.fontSize=48px

练习1：左侧菜单

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        *{

            margin: 0;

            padding: 0;

        }

        .left,.right{

            float: left;

        }

        .left{

            width: 20%;

            height: 600px;

            background-color: #d0d0cf;

        }

        .right{

            width: 80%;

            height: 600px;

            background-color: #00e676;

        }

        .title{

            background-color: #00b6ee;

            margin: 10px;

            width: 93%;

            height: 50px;

            text-align: center;

            line-height: 50px;

        }

        .text {

            margin: 10px;

        }

        .hide{

            display:none;

        }

    </style>

</head>

<body>

<div class="left">

    <div class="item">

        <div class="title" onclick="foo(this)">菜单一</div>

        <div class="text">

            <div >111</div>

            <div >111</div>

            <div >111</div>

        </div>

    </div>

    <div class="item">

        <div class="title" onclick="foo(this)">菜单二</div>

        <div class="text hide">

            <div >222</div>

            <div>222</div>

            <div>222</div>

        </div>

    </div>

    <div class="item">

        <div class="title" onclick="foo(this)">菜单三</div>

        <div class="text hide">

            <div>333</div>

            <div>333</div>

            <div>333</div>

        </div>

    </div>

</div>

<div class="right"></div>

<script>

    function foo(self){

        var ele_title=document.getElementsByClassName('title');

        for (var b=0;b<ele_title.length;b++){

            ele_title[b].nextElementSibling.classList.add('hide');

        }

        for (var a=0;a<ele_title.length;a++){

            if (ele_title[a].innerText===self.innerText){

                console.log(ele_title[a].innerHTML);

            ele_title[a].nextElementSibling.classList.remove('hide');

            }

        }

    }

</script>

</body>

</html>

练习2：事件绑定

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        *{

            margin:0;

            padding:0;

        }

        .item{

            list-style: none;

        }

    </style>

</head>

<body>

<ul>

    <li class="item">111</li>

    <li class="item">222</li>

    <li class="item">333</li>

</ul>

<script>

    var ele_item=document.getElementsByClassName('item');

        for (var i=0;i<ele_item.length;i++) {

            ele_item[i].onclick =function (){

                alert(this.innerText)

        }

    }

</script>

</body>

</html>

码农公寓

相关文章