javascript（三）

来源：互联网发布：ios sql软件编辑：程序博客网时间：2024/05/22 00:09

创建节点：
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" onclick="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.onclick=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].onclick=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 onclick="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>

阅读全文

0 0