js第十天(DOM上)_javascript学习日志第十天-CSDN博客

<body>
    <h2 id="title">元素一</h2>
    <input type="text" name="message" placeholder="请输入内容" value="rose">

    <script>
        function test1(){
            var h2Ele = document.querySelector('#title')
            h2Ele.innerHTML = '<h3>innerText设置的内容</h3>'  //输出innerText设置的内容
            h2Ele.innerText = '<h3>innerText设置的内容</h3>'  //输出<h3>innerText设置的内容</h3>
            console.log('内容 :',h2Ele.innerHTML);
        }
        // test1()
        function test2(){
            var inputEle = document.querySelector('input[name="message"]')
            // inputEle.value = 'jack'
            console.log( inputEle.value )
        }
        test2()
    </script>
</body>

使用规律：

操作非表单元素：innerText 和innerHTML

操作表单元素：value

3.操作CSS样式

使用js代码动态操作样式

1）获取行内样式

<h2 style="color:red;"> 获取样式</h2>

①先获取标签

var h2Ele =document.querySelector('h2')

②获取样式

var colorValue = h2Ele.style.color //行内式

③设置样式

//更改h2文字大小为25px

h2Ele.style.fontSize='25px' //注意：js操作样式名，样式名用驼峰命名 eg:font-size ===> fontSize

获取样式：ele.style.样式名

设置样式：ele.style.样式名 =样式值

2）设置类样式

语法：ele.className = 类名

注意：如果一个元素有多个类名，使用此方法，后面的类名会覆盖前面的内容这时可以使用下面这种方法

动态添加样式：

ele.classList.add('类名1')

ele.classList.add('类名2')

动态移除指定样式：

ele.classList.remove('类名')

给元素设置类名

var div=document.quselect('div')

div.className ='test' //给div添加类名为test

3）获取非行间样式

window.getComputeStyle(元素).样式名 //获取样式值

如果是获取颜色，单位为RGB4）操作属性

代码如下（示例）：

样式部分：

<style>
			.d1 {
				width: 200px;
				height: 200px;
				background-color: skyblue;
			}
            .d2{
                text-align: center;
            }

            .d3{
                width: 200px;
				height: 200px;
				background-color: pink;
            }
		</style>

结构部分：

<h2 style="color: red;">操作样式</h2>
		<div>元素一</div>
        <h3 class="d3">元素二</h3>

        <p></p>

        <button onclick="getStyleTest()">获取style样式</button>
        <button onclick="setStyleTest()">设置style样式</button>

        <button onclick="setClassStyle()">设置class样式</button>
        <button onclick="getClassStyle()">获取非行间样式</button>
		<script>
            function getClassStyle(){
                var h3Ele = document.querySelector('h3')
                var w = window.getComputedStyle(h3Ele).width
                console.log('w :',w);
            }

            function setClassStyle(){
                var divEle = document.querySelector('div')
                // divEle.className = 'd1'
                // divEle.className = 'd2'
                divEle.classList.add('d1')
                divEle.classList.add('d2')
            }

            // 获取h2标签的行内样式
            function getStyleTest(){
                var h2Ele = document.querySelector('h2')
                var colorValue = h2Ele.style.color  //行内式

                var pEle = document.querySelector('p')
                pEle.innerHTML = colorValue
            }
            // 更改h2字体大小为24px  
            function setStyleTest(){
                var h2Ele = document.querySelector('h2')
                h2Ele.style.fontSize = '44px'  // js代码操作样式名， 样式名用驼峰命令 font-size  -> fontSize
                h2Ele.style.backgroundColor = 'skyblue'
            }



        </script>

4.操作属性

js代码动态获取属性或设置属性

①获取属性

ele.getAttribute(属性名) //获取属性值

或者

ele.属性名

前者能获取我们自定义的属性以及元素自身特有的属性的属性值

后者只能获取元素自身特有的属性的属性值，不能获取我们自定义的属性的属性值

②设置属性

ele.SetAttribute(属性名,属性值) //元素自身特有以及自定义的属性都可以设置

ele.属性名=属性值 //设置元素自身特有的属性

③删除属性

ele.removeAttribute(属性名)

④自定义属性

data-属性名

eg:获取自定义属性值 ele.dataset.属性名

代码如下（示例）：

<h2 id="title" class="d1" a="100" b="200">元素一</h2>
    <h3>元素二</h3>
    <a href="http://www.baidu.com">百度</a>
    <img src="./06练习岛上书店/images/11239.png" alt="图片">
    <img src="" alt="图片2">

    <!-- 自定义属性 -->
    <h4 data-index="1001" data-score="98">元素三</h4>

    <button onclick="getAttr()">获取属性</button>
    <button onclick="setAttr()">设置属性</button>
    <button onclick="removeAttr()">移除属性</button>
    <button onclick="getMyAttr()">获取自定义属性</button>

    <script>
        function getMyAttr(){
            var h4Ele = document.querySelector('h4')
            var index =  h4Ele.dataset.score
            console.log(index)
        }

        function removeAttr(){
            var h2Ele = document.querySelector('h2')  // 获取h2元素
            h2Ele.removeAttribute('a')
        }


        function setAttr(){
            var h3Ele = document.querySelector('h3')
            h3Ele.setAttribute('id','titl2')
            h3Ele.setAttribute('a','1000')

            var imgEle = document.querySelectorAll('img')[1]
            // imgEle.setAttribute('src','./06练习岛上书店/images/book.jpg')
            imgEle.src='./06练习岛上书店/images/book.jpg'
        }


        function getAttr(){
            var h2Ele = document.querySelector('h2')  // 获取h2元素
            var imgEle = document.querySelector('img')  // 获取img元素
            var idValue =  imgEle.getAttribute('src')  // 获取h2元素id属性值
            console.log(idValue)
            console.log(imgEle.src)
        }
    </script>

5.操作事件

绑定事件的两种方式：

①属性事件

②元素与事件行为分离

1.属性事件

直接给元素添加onclick属性实现

2.元素和事件行为分离

代码如下（示例）：

<button>按钮</button>
    <div>元素一</div>

    <script>
        var btn = document.querySelector('button')
        btn.onclick = function(){
            alert('绑定事件')
        }

        var divEle = document.querySelector('div')
        divEle.onclick = function(){
            divEle.innerHTML = '今天是周五'
        }
    </script>