狂神说javascript学习笔记

1.操作DOM对象

浏览器就是一个Dom树形结构！

• 更新：更新Dom结点
• 遍历dom结点：得到Dom节点
• 删除：删除一个Dom节点
• 添加：添加一个新的节点
  要操作一个Dom节点，就必须要先获得这个Dom节点

 获取Dom
// 对应css选择器
    var h1 = document.getElementsByTagName('h1');
    var p1 = document.getElementById('h1')
    var p2 = document.getElementsByClassName('h1')
    var father = document.getElementById('father');
    var children = father.children; // 获取父节点下的所有子节点
    // father.firstChild;
    // father.lastChild;

//更新节点
<div  id="id1">
</div>
<script>
    var id1 = document.getElementById('id1');
</script>

id1.innerText = '456'修改文本的值
id1.innerHTML = '<strong>123</strong>'可以解析HTML文本标签

操作js 

id1.innerHTML = '<strong>123</strong>'
"<strong>123</strong>"
id1.style.color = 'red'; // 属性使用 字符串 包裹
id1.style.fontSize = '20px'; // -转驼峰命名问题
id1.style.padding = '2em'; 

删除节点 

1. 先获取父节点
2. 通过父节点删除自己

<div  id="father">
    <h1>标题一</h1>
    <p id="p1">p1</p>
    <p class="p2">p2</p>
</div>
<script>
	var self = document.getElementById('p1');
	father.removeChild(father.children[0]);
	father.removeChild(father.children[0]);
	var father = p1.parentElement;
	father.removeChild(p1)
</script>

插入节点 

<p id="js">JavaScript</p>
<div id="list">
    <p id="se">JavaSE</p>
    <p id="ee">JavaEE</p>
    <p id="me">JavaME</p>
</div>
<script>
    var js=document.getElementById('js');
    var list = document.getElementById('list');

</script>

创建一个新的标签，实现插入 

var js=document.getElementById('js');
    var list = document.getElementById('list');
    // 通过JS创建一个新的节点
    var newP = document.createElement('p'); // 创建一个p标签
    newP.id = 'newP';
    newP.innerText = 'Hello,Kuangshen';
    list.appendChild(newP);
        // 创建一个标签节点
    var myScript = document.createElement('script');
    myScript.setAttribute('type','text/javascript');
    // 创建一个style标签
    var myStyle = document.createElement('style'); // 创建了一个空style标签
    myStyle.setAttribute('type','text/css');
    myStyle.innerHTML= 'body{background-color: chartreuse;}';
    document.getElementsByTagName('head')[0].appendChild(myStyle)

insert 

var ee = document.getElementById('ee');
    var js = document.getElementById('js');
    var list = document.getElementById('list');
    // 要包含的结点.insertBrfore(newNode,targetNode);

    list.insertBefore(js,ee)

2.操作表单 

获得要提交的信息

<form action="post">
    <p>
        <span> 用户名：</span> <input type="text" id="username">
    </p>
    <p>
        <span>性别：</span>
        <input type="radio" name="sex" value="man" id="boy"> 男
        <input type="radio" name="sex" value="woman" id="girl">女
    </p>
</form>
<script>
    var input_text = document.getElementById("username");
    var boy_radio = document.getElementById("boy");
    var girl_radio = document.getElementById("girl");
    // 得到输入框的值
    input_text.value;
    // 修改输入框的值
    input_text.value = '123';

    // 对于单选框，多选框等等固定的值，boy_radio.value只能取得当前的值
    boy_radio.checked; // 查看返回的结果，是否为true，如果为true，则被选中
    boy_radio.checked = true // 赋值
</script>

提交表单 

<!--
表单绑定提交时间
onsubmit = 绑定一个提交检索的函数，true ，false
将这个结果返回给表单，使用onsubmit接收
-->
<form action="post">
    <p>
        <span> 用户名：</span> <input type="text" id="username" name="username" onsubmit="return aaa()">
    </p>
    <p>
        <span>密码：</span> <input type="text" id="password" name="password">

    </p>
    <!--绑定事件Onclick 被点击-->
    <button type="button" onclick="aaa()">提交</button>
</form>
    <script>
        function aaa(){
            var username=document.getElementById('username');
            var pwd=document.getElementById('password');
            pwd.value = '12323'
            //MD5算法可加密
            console.log(username.value);
            console.log(pwd.value);
            return true;
            // 可以校验判断表单内容，true就是通过提交，false就是不通过。
        }
    </script>