javascript（三）

最新推荐文章于 2023-07-31 12:48:56 发布

defending

最新推荐文章于 2023-07-31 12:48:56 发布

阅读量302

点赞数

分类专栏： javascript 文章标签： javascript

本文链接：https://blog.csdn.net/defending/article/details/77010598

版权

javascript 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

创建节点：
createElement(标签名) ：创建一个指定名称的元素。
例：var tag=document.createElement(“input")
tag.setAttribute('type','text');

添加节点：
追加一个子节点（作为最后的子节点）
somenode.appendChild(newnode)

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

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

删除节点：

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

替换节点：

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

移动节点：

目标位置父节点.appendChild(被移动节点) 方法从一个元素向另一个元素中移动元素。

===================================================

节点属性操作：

1、修改文本节点的值：innerText innerHTML
修改innerHTML属性，这个方式非常强大，不但可以修改一个DOM节点的文本内容，还可以直接通过HTML片段修改DOM节点内部的子树：

// 获取<p id="p-id">...</p>
var p = document.getElementById('p-id');
// 设置文本为abc:
p.innerHTML = 'ABC'; // <p id="p-id">ABC</p>
// 设置HTML:
p.innerHTML = 'ABC <span style="color:red">RED</span> XYZ';
// <p>...</p>的内部结构已修改

用innerHTML时要注意，是否需要写入HTML。如果写入的字符串是通过网络拿到了，要注意对字符编码来避免XSS攻击。

修改innerText或textContent属性，这样可以自动对字符串进行HTML编码，保证无法设置任何HTML标签：

// 获取<p id="p-id">...</p>
var p = document.getElementById('p-id');
// 设置文本:
p.innerText = '<script>alert("Hi")</script>';
// HTML被自动编码，无法设置一个<script>节点:
// <p id="p-id"><script>alert("Hi")</script></p>

两者的区别在于读取属性时，innerText不返回隐藏元素的文本，而textContent返回所有文本。另外注意IE<9不支持textContent。

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>”;

5、关于class的操作：
elementNode.className
elementNode.classList.add

elementNode.classList.remove

6、改变css样式：

<p id="p2">Hello world!</p>
document.getElementById("p2").style.color="blue";

.style.fontSize=48px

===================================================

DOM Event(事件)
事件类型

onclick        当用户点击某个对象时调用的事件句柄。
ondblclick     当用户双击某个对象时调用的事件句柄。

onfocus        元素获得焦点。               练习：输入框
onblur         元素失去焦点。               应用场景：用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证.
onchange       域的内容被改变。             应用场景：通常用于表单元素,当元素内容被改变时触发.（三级联动）

onkeydown      某个键盘按键被按下。          应用场景: 当用户在最后一个输入框按下回车按键时,表单提交.
onkeypress     某个键盘按键被按下并松开。
onkeyup        某个键盘按键被松开。

onload         一张页面或一幅图像完成加载。

onmousedown    鼠标按钮被按下。
onmousemove    鼠标被移动。
onmouseout     鼠标从某元素移开。
onmouseover    鼠标移到某元素之上。
onmouseleave   鼠标从元素离开

onselect       文本被选中。
onsubmit       确认按钮被点击。

-----------------------------------------------------------------------------------------
绑定事件方式：一

<div id="div" οnclick="foo(this)">点我呀</div>

<script>
    function foo(self){           // 形参不能是this;
        console.log("点你大爷!");
        console.log(self);   
    }
</script>

二

<p id="abc">试一试!</p>

<script>

    var ele=document.getElementById("abc");

    ele.οnclick=function(){
        console.log("ok");
        console.log(this);    // this直接用
    };

</script>

----------------------------------------------------------------------------------------

Event对象

bubbles 返回布尔值，指示事件是否是起泡事件类型。
cancelable 返回布尔值，指示事件是否可拥可取消的默认动作。
currentTarget 返回其事件监听器触发该事件的元素。
eventPhase 返回事件传播的当前阶段。
target 返回触发此事件的元素（事件的目标节点）。
timeStamp 返回事件生成的日期和时间。
type 返回当前 Event 对象表示的事件的名称。

--------------------------------------------------------------------------------------------

练习：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            width: 20%;
            float: left;
        }
        .c3{
            background-color: #2459a2;
            text-align: center;
        }

        .c2{
            width: 80%;
            float: left;
        }
        .c4{
            width: 280px;
            height: 300px;
            position: fixed;
            top:50%;
            left: 50%;
            margin-top: -150px;
            margin-left: -115px;

            background-color: #8aab30;
            text-align: right;
            padding-right: 30px;

        }
        .hide{

            display: none;
        }
    </style>
</head>
<body>
<div class="c1">
    <div class="c3">操作</div>
    <div><button class="add">新增</button></div>
</div>
<div class="c2">
      <table border="1" class="tab">
          <tr>
              <td>编号</td>
              <td>书名</td>
              <td>作者</td>
              <td>价格</td>
              <td>分类</td>
              <td>上架时间</td>
              <td>操作</td>
          </tr>
          <tr>
              <td>3122</td>
              <td>《端午节》</td>
              <td>egon</td>
              <td>2</td>
              <td>A</td>
              <td>2010</td>
              <td><button class="del">删除</button></td>
          </tr>
          <tr>
              <td>3142</td>
              <td>《若干规定》</td>
              <td>Alex</td>
              <td>3</td>
              <td>B</td>
              <td>2015</td>
              <td><button class="del">删除</button></td>
          </tr>
          <tr>
              <td>3422</td>
              <td>《哭一哭》</td>
              <td>yuan</td>
              <td>2</td>
              <td>A</td>
              <td>2010</td>
              <td><button class="del">删除</button></td>
          </tr>
      </table>
    <div class="c4 hide">
        <form action="#">
            <p>编号：<input type="text" class="text_data"></p>
            <p>书名：<input type="text" class="text_data"></p>
            <p>作者：<input type="text" class="text_data"></p>
            <p>价格：<input type="text" class="text_data"></p>
            <p>分类：<input type="text" class="text_data"></p>
            <p>上架时间：<input type="text" class="text_data"></p>
            <p><button>保存</button> </p>
        </form>
    </div>
</div>
<script>
    var ele_btn=document.getElementsByTagName('button');

    for (var i=0;i<ele_btn.length;i++){
        ele_btn[i].οnclick=function () {

            if (this.className == 'add'){
                var ele_tab=document.getElementsByClassName('tab')[0];
                var ele_form=ele_tab.nextElementSibling;
                ele_form.classList.remove('hide')
                var New_tr=document.createElement('tr');

                ele_tab.appendChild(New_tr);


            }
            else if (this.className == 'del'){
                var ele_del=this.parentElement.parentElement.parentElement;
                var ele_f=this.parentElement.parentElement
                ele_del.removeChild(ele_f)
            }
            else {
                var ele_tab=document.getElementsByClassName('tab')[0];
                var ele_last=ele_tab.lastElementChild;


                var ele_input=document.getElementsByClassName('text_data');

                for (var i=0;i<ele_input.length;i++){
                    var ele_value=ele_input[i].value;
//                    alert(ele_value)
                    var new_td=document.createElement('td')
                    ele_last.appendChild(new_td)
                    var ele_1=ele_last.lastElementChild
                  ele_1.innerText=ele_value
                }
                var new_td=document.createElement('td')
                ele_last.appendChild(new_td)
                var ele_1=ele_last.lastElementChild
                        ele_1.innerHTML='<button οnclick="ss(this)">删除</button>'
                var ele_form=ele_tab.nextElementSibling;
                ele_form.classList.add('hide')
            }
        }
    }
function ss(self) {
    var ele_del=self.parentElement.parentElement.parentElement;
                var ele_f=self.parentElement.parentElement
                ele_del.removeChild(ele_f)
}



</script>
</body>
</html>