27-Web-文档对象模型

最新推荐文章于 2022-05-27 14:01:40 发布

qq_48486897

最新推荐文章于 2022-05-27 14:01:40 发布

阅读量161

点赞数

本文链接：https://blog.csdn.net/qq_48486897/article/details/107760821

版权

1.DOM操作的概念

<!--
 1. 什么是DOM  - Document Object Model的缩写
 DOM又叫文档对象模型
 DOM操作指的就是用js代码来操作网页中的内容
 
 js中提供了 document 对象，指向整个网页内容的部分。如果要操作网页内容，必须通过 document 对象直接或者间接
 的获取到内容对象的标签。
 
 2.DOM的基本结构
 document是一个根节点，下面每一个标签会对应一个子节点，整个结构是一个倒立的树状结构
 -->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	</body>
</html>

2.DOM基本操作

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
        <h1>获取节点</h1>
        <h1 id="b1" class="c1">我是标题1</h1>
        <p id="p1" >我是段落1</p>
        <a href="">我是超链接1</a>
        <p class="c1">我是段落2</p>
        <hr >
        <h1>添加节点</h1>
        <div id="div1" style="background-color: yellow; height: 100px;">
            
        </div>
        <div id="div2" style="background-color: greenyellow; height: 100px;">
            
        </div>
        <hr >
        <h1>父子节点的获取</h1>
        <div id="div3">
            <p id="p2">我是段落3</p>
            <h2>我是标题2</h2>
            <a id="a1" href="">我是超链接2</a>
        </div>
        
        <hr>
        <h1>拷贝节点</h1>
        <div id="div4" style="background-color: hotpink; width: 150px; height: 150px; margin-bottom: 20px;">
            <div id="" style="background-color: seagreen; width: 80px; height: 80px;">    
            </div>
        </div>
	</body>
</html>

<script type="text/javascript">
    // 1.获取节点(在js中获取html中的标签)
    // 1）通过id获取标签对应的节点
    // document.getElementById(id属性值)  -  获取当前页面中id属性值是指定值的标签对应的节点对象
    b1Node = document.getElementById('b1')
    console.log(b1Node, typeof(b1Node))
    
    // 2) 通过class获取标签对应的节点
    // document.getElementsByClassName(class属性值)  -  同时返回所有class是指定值的标签（以容器的形式返回）
    
    c1NodeArray = document.getElementsByClassName('c1')
    // 返回的是一个类似数组的容器，容器中的元素就是对应的标签
    console.log(c1NodeArray)
    // 可以通过下标依次取出每一个标签
    console.log(c1NodeArray[0], c1NodeArray[1])
    
    console.log('=======================')
    // 注意：不能用for-in的方式来遍历这个容器
    // for(x in c1NodeArray){
    //     console.log(x, c1NodeArray[x])
    // }
    // 遍历取到每一个标签
    for(x=0;x<c1NodeArray.length;x++){
        console.log(c1NodeArray[x])
    }
    
    // 3）通过标签名获取标签对应的节点
    // document.getElementsByTagName(标签名)
    pNodeArray = document.getElementsByTagName('p')
    console.log(pNodeArray)
    for(x=0;x<pNodeArray.length;x++){
        console.log(pNodeArray[x])
    }
    
    // 4)通过子节点获取父节点
    // 节点对象.parentElement   - 获取当前节点的父节点
    p2PNode = document.getElementById('p2').parentElement
    console.log('父节点:',p2PNode)
    
    // 5)通过父节点获取子节点
    // a.节点对象.children   -  获取指定节点所有的子节点
    // b.节点对象.firstElementChild  -  获取指定节点的第一个子节点
    // c.节点对象.lastElementChild  -  获取指定节点的最后一个子节点
    div3Node = document.getElementById('div3')
    allChild = div3Node.children
    console.log(allChild)
    console.log(div3Node.firstElementChild)
    console.log(div3Node.lastElementChild)
    
    // 2. 添加节点
    // 1)创建节点
    // document.createElement(标签名)
    inputNode = document.createElement('input')
    // 2)添加节点
    // 节点1.appendChild(节点2)  -  在节点1的最后添加节点2（节点1和节点2是父子关系）
    document.getElementById('div2').appendChild(inputNode)
    
    // 节点1.insertBefore(节点3, 节点2)  -  将节点3插入到节点1中的节点2的前面
    btnNode = document.createElement('button')
    bodyNode = document.getElementsByTagName('body')[0]
    div1Node = document.getElementById('div1')
    bodyNode.insertBefore(btnNode, div1Node)
    
    // 在body的最前面插入一个div标签
    divNode = document.createElement('div')
    bodyNode.insertBefore(divNode, bodyNode.firstElementChild)
    
    // 3.删除节点
    // 1）节点对象.remove()   -   删除指定节点
    document.getElementById('p2').remove()
    
    // 2）(了解)父节点.removeChild(子节点)  -  删除指定父节点中指定的子节点
    document.getElementById('div3').removeChild(document.getElementById('a1'))
    
    // 4.拷贝节点
    // 节点对象.cloneNode()   -   浅拷贝
    // 节点对象.cloneNode(true)   -   深拷贝
    div4Node = document.getElementById('div4')
    // 拷贝产生新的节点
    newDiv4Node1 = div4Node.cloneNode()
    newDiv4Node2 = div4Node.cloneNode(true)
    
    // 添加节点
    bodyNode.appendChild(newDiv4Node1)
    bodyNode.appendChild(newDiv4Node2)
    
    
    
    
    
    
    
    
</script>

3.节点属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
        <p id="p1" class="c1">我是段落1</p>
        
        <img src="img/bear.png" >
        
        <input id="username" type="" name=""  value="" placeholder="" />
        <br>
        
        <!-- 给按钮添加点击事件 -->
        <button type="button" onclick="getUserName()">获取用户名</button>
        
        
	</body>
</html>
<script type="text/javascript">
    // 1.标签内容
    // 1）节点.innnerText  -  获取或者修改文本内容（不能处理内容中标签）
    // 2）节点.innerHTML  -  获取或者修改标签内容（可以处理内容中标签）
    pNode = document.getElementById('p1')
    console.log(pNode.innerText, pNode.innerHTML)
    
    // pNode.innerText = '你好js!'
    // pNode.innerHTML = '你好js！'
    
    // pNode.innerText = "你好<a href='#'>js</a>"
    pNode.innerHTML = "你好<a href='#'>js</a>"
    
    // 2.class属性
    // 节点.className   
    // 节点.className = 值
    console.log(pNode.className)
    pNode.className = 'c2'
    pNode.className += ' c3'
    
    // 3.普通属性
    // html中标签的属性在js的节点对象中都有一个对应的属性，它们的属性名和功能是一样的。
    // img的src属性
    imgNode = document.getElementsByTagName('img')[0]
    console.log(imgNode.src)
    imgNode.src = 'img/hat.png'
    imgNode.title = '路飞'
    
    inputNode = document.getElementsByTagName('input')[0]
    inputNode.value = '张三'
    inputNode.placeholder = '请输入用户名'
    
    function getUserName(){
        var input = document.getElementById('username')
        console.log(input.value)
    }
    
    // 4.样式属性
    // 1)style属性
    pNode.style = 'color:red;font-size:25px;background-color:yellow;'
    
    // 2)style.样式属性
    pNode.style.color = 'green'
    pNode.style.backgroundColor = 'pink'
      
</script>

4.添加标签练习

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
        <input type="" name="" id="content" value="" />
        <br>
        <br>
        <button onclick="addElement()">确定</button>
	</body>
    
    <script type="text/javascript">
        
        // 获取input标签
        inputNode = document.getElementById('content')
        bodyNode = document.getElementsByTagName('body')[0]
        function addElement(){
            // 获取输入框中输入的内容
            var content = inputNode.value
            // console.log(content)
            // 创建空的p标签
            var pNode = document.createElement('p')
            // 设置p标签的标签内容
            pNode.innerText = content
            // 添加标签
            bodyNode.appendChild(pNode)
        }
    </script>
</html>

qq_48486897

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
27-Web-文档对象模型

1.DOM操作的概念<!DOCTY
复制链接

扫一扫