DOM操作元素内容——案例

<title>操作内容示例</title>
    <style type="text/css">
        body,
        input,
        div,
        p {
            margin: 0;
            padding: 0;
        }

        body {
            font-size: 14px;
            font-family: "微软雅黑";
            line-height: 25px;
        }

        .content {
            width: 550px;
            margin: 0 auto;
        }

        .content img {
            float: left;
            width: 150px;
        }

        .r {
            float: left;
            width: 400px;
        }

        input[name="changeBook"] {
            width: 100px;
            height: 28px;
            line-height: 28px;
            text-align: center;
            font-size: 14px;
            font-family: "微软雅黑";
            margin: 10px 0 10px 0;
        }

        input[name="season"] {
            width: 50px;
            text-align: center;
        }

        .input {
            border: 1px solid green;
            font-size: 18px;
            font-weight: bold;
        }
    </style>

<div class="content">
        <img src="images/book.jpg" alt="岛上书店" />
        <div class="r">
            <div id="book">书名：岛上书店</div>
            <input id="updatename" name="changeBook" value="换换名称" type="button" onclick="onUpdateBookName()" /><br>

            四季名称：
            <input name="season" type="text" value="春" />
            <input name="season" type="text" value="夏" />
            <input name="season" type="text" value="秋" />
            <input name="season" type="text" value="冬" /><br><br>

            <input name="b2" type="button" value="input内容" onclick="onShowInput()" />

            <input name="b3" type="button" value="四季名称" onclick="onSeason()" />
            <input name="b4" type="button" value="清空页面内容" onclick="onClear()" />
            <p id="replace"></p>
        </div>
    </div>
    ```
```javascript
<script type="text/javascript">
        /*
          做什么?
            点击换换名称按钮，更换书名
            1. 绑定点击事件
            2. 更改名内容
        */
        function onUpdateBookName() {

            var changeBookName = document.querySelector('#book')
            changeBookName.innerHTML = 'javasCript编程'
        }
        //onUpdateBookName()
        /*
          做什么?
            点击input内容按钮，将所有input按钮内容值拼接成字符串设置给p标签作为内容显示
            1. input内容按钮点击事件
            2. 将所有input标签内容值拼接成字符串
                 
            3. 操作p标签内容
        
        */
        function onShowInput() {
            var inputEles = document.querySelectorAll('input')    //选中所有input标签
            //循环遍历数组
            var str = ''
            for (var i = 0; i < inputEles.length; i++) {
                var inputEle = inputEles[i]
                str = str + inputEle.value + ' '
            }
            var pEle = document.querySelector('#replace')
            pEle.innerHTML = str

        }

        /*
           做什么?
             点击四季名称按钮，拼接四季名称显示

        */
        function onSeason() {
            var seasonInput = document.querySelectorAll('input[name="season"]')
            var str = ''
            for (var i = 0; i < seasonInput.length; i++) {
                var inputEle = seasonInput[i]
                str = str + inputEle.value
            }
            var pEle = document.querySelector('#replace')
            pEle.innerHTML = str
        }

        function onClear() {
            document.write('')
        }

    </script>```