dom操作补充

2019-05-11 20:48:03 阅读：213 来源： 互联网

标签：obj dom 补充 html value i1 tag 操作 document

s5.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <div id="i1">

        你好

        <a>百<span>度</span></a>

    </div>

    <input type="text" id="i2"/>

    <select id="i3">

        <option value="11">北京</option>

        <option value="12">上海</option>

        <option value="13">广州</option>

    </select>

    <textarea id="i4"></textarea>

</body>

</html>





obj=document.getElementById('i1')

obj.innerText 只获取标签的文本



obj.innerHTML 获取标签里面的所有的，包括子标签



obj=document.getElementById('i1');

obj.innerHTML="<a href='http://www.qq.com'>腾讯</a>";



value 获取input标签中的值

obj=document.getElementById('i2');

obj.value="hyhskdk"



select:获取修改选中的value值

obj=document.getElementById('i3');

obj.value

obj.value=12



obj.selectedIndex=0  修改成第几个选项





textarea:多行文本操作

obj=document.getElementById('i4');

obj.value

obj.value=1233

s6.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div style="width: 600px;margin: 0 auto;">
        <input id="i1" onfocus="Focus();" onblur="Blur();" type="text" value="请输入关键字">
        <input type="text" placeholder="请输入关键字">
    </div>
    <script>
        function Focus() {
            var tag=document.getElementById('i1');
            var val= tag.value;
            if(val=="请输入关键字"){
                tag.value="";
            }
        }
        function Blur() {
            var tag=document.getElementById('i1');
            var val= tag.value;
            if(val.length==0){
                tag.value="请输入关键字";
            }
        }
    </script>
</body>
</html>

对样式进行操作
obj=document.getElementById('i1');
obj.className="c1 c2"; 添加样式
obj.className 查询样式
obj.classList 查询样式并以列表的形式显示
obj.classList.add('c3') 添加样式
obj.classList.remove("c2") 移除样式

<div class="c1 c2" style="font-size: 16px";></div>
obj.style.fontSize='16px'; //更细致的某一个样式操作
obj.style.backgroundColor='red';
obj.style.color='green';

对属性进行操作
obj=document.getElementById("i1");
obj.setAttribute("name","alex"); 添加属性
obj.removeAttribute("value"); 删除属性
obj.attributes 获取所有的属性

创建标签并添加到html中

s8.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <input type="button" onclick="AddEle1();" value="+">
    <input type="button" onclick="AddEle2();" value="+">
    <div id="i1">
        <p><input type="text"></p>
        
    </div>
    <script>
        function AddEle1() {
            //创建一个标签
            //将标签添加到i1里面
            var tag="<p><input type='text'/></p>";
            document.getElementById('i1').insertAdjacentHTML("beforeEnd",tag);
        }
        function AddEle2() {
            //创建一个标签
            //将标签添加到i1里面
            var tag=document.createElement('input'); //创建一个input标签
            tag.setAttribute('type','text')
            tag.style.fontSize="16px";
            tag.style.color='red';

            var p=document.createElement('p'); //创建p标签
            p.appendChild(tag)
            document.getElementById('i1').appendChild(p) //添加p标签

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

创建标签的两种形式:
AddEle1:字符串的形式

AddEle2:对象的方式
document.createElement('div') 创建div标签

标签：obj,dom,补充,html,value,i1,tag,操作,document
来源： https://www.cnblogs.com/leiwenbin627/p/10849974.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

dom操作补充